[React] React에서 SVG 다루기 with Styled-components (SVG 컴포넌트화)

React 에서 SVG를 사용하는 방법은 두 가지가 있다. 1. tag 사용하기 import Logo from 'assets/icon-logo.svg' 이 방법은 흔히 사용되는 방식으로, SVG 파일을 외부 리소스로서 로드하여 태그를 통해 사용한다. 이 방법은 간편하고 직관적이지만, SVG 내부의 요소에 동적으로 접근하거나 스타일을 변경하는 등 SVG의 일부 기능을 활용하기 어렵다는 단점이 있다. 2. ReactComponent 이용하기 import { ReactComponent as Logo } from 'assets/icon-logo.svg' 이 방법은 SVG 파일을 React 컴포넌트로서 불러와 사용하는 것이다. 이렇게 하면 SVG 파일 내부의 요소에 접근하여 스타일을 변경하거나 이벤트를 추가하는 ..
Client/React.js 2024. 4. 21. 09:00
1