svg 파일은 css를 작성해도 변하지 않는다. 따라서 svg 파일 코드에서 스타일을 변경하던가 해야하는데, 이상하게 이게 적용이 잘 안됐다. 그리고 해당 파일을 어떤 페이지에서 사용하느냐에 따라 색상이나 사이즈가 달라져서 svg 파일에서 변경하는 것은 좋은 방법은 아니었다.
따라서, 나는 ReactComponent를 활용하여 변경하였다.
ReactComponent로 svg 이미지 스타일 변경하기
해당 방법은 svg 파일을 컴포넌트와 시켜주는 것이다.
파일을 컴포넌트로 만들어줬기 때문에 우리가 평소에 사용하던대로 스타일을 적용하면 된다.
import ReactComponent as 원하는 컴포넌트 이름 from '이미지 파일 url'를 통해 svg 파일을 컴포넌트로 만들어 준다.
컴포넌트 만들어줬으니 사용하는 것도 컴포넌트처럼 사용하면 된다.
나는 scss에서 스타일을 변경시켜주려고 컴포넌트에 class를 부여해줬다.
scss에서 path 태그에 fill을 원하는 색상으로 설정해주면 해당 색상으로 svg 이미지의 색상이 변경된다.
svg 파일의 코드를 보면 색상이 path 태그의 style에 들어가 있는 것을 알 수 있다.
Comments