[React] svg에 스타일 입히기

나는 보통 svg 파일을 쓸때 한꺼번에 import하는 방식으로 svg 파일을 가져왔다( ↓ 이런 방식)

import LogoImage from 'logo.svg'

그러다보니 svg의 스타일을 동적으로 설정할 수 없어서 각각의 이미지 파일을 생성해서 쓰는 등 매우 비효율적인 방식으로 asset을 관리하고 있었다🤔

svg의 장점을 못살려서 고민이 많았는데 svg를 리액트 컴포넌트처럼 사용하는 방법을 알게됐다

이 방법을 사용하면 svg의 자식 태그들에 각각 스타일을 줄 수 있어서 효율적으로 관리할 수 있음!! 

(next에서는 이 방법은 안되고 따로 라이브러리를 설치해야 한다고 함)

import { ReactComponent as LogoImage } from 'logo.svg'

이제 svg에 직접 스타일을 줄 수 있다! 

svg 코드에서 바꾸고자 하는 요소를 "current" 로 바꿔주거나 아예 비우면 svg 태그의 props로 값을 넘겨서 커스텀 가능

 

 

이 방법을 사용해보니 살짝 스타일 코드가 복잡해질 수 있다고 느꼈지만 ... 하나의 파일로 깨짐 없는 여러 이미지를 만들 수 있다는 장점은 참을 수 없었음

 

 

그리고 내가 엄청나게 좋아하는 웹 svg 뷰어 사이트

https://www.svgviewer.dev/

SVG Viewer

이걸로 svg 요소 확인하면 넘모 편함 🍯