React Vite 환경에서 svg 파일에 css 적용하기

문제

react에서 svg 파일을 스타일링 하려면 img src가 아닌 컴포넌트로 변환하여 가져와야 한다.
https://velog.io/@juno7803/React-React에서-SVG-활용하기

하지만 하라는대로 라이브러리도 설치하고, 컴포넌트 import도 했는데 계속해서 오류가 났다 (ㅠㅠ)
알고보니 Vite에서는 이 방식이 오류가 난다고 한다...

해결 방법

먼저 svgr 라이브러리를 설치해준다.
npm install vite-plugin-svgr --save-dev

다음으로는 vite.config.js 파일을 다음과 같이 세팅해준다.

//vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [svgr(), react()],
});

이제 svg파일을 컴포넌트로 변환해준다.
이때 react 실행 환경에 따라 import하는 방법이 다르다. vite의 경우 파일 경로 뒤에 ?react를 꼭 붙여줘야 한다. (안그러면 에러 떠서 실행이 안 된다!!!)

//create-react-app
import {ReactComponents as LikeIcon} from 'svg-파일-경로'
//vite
import LikeIcon from 'svg-파일-경로?react'

나는 버튼에 사용할 아이콘이기 때문에 버튼 태그 안에 넣어줬다.

//Button.jsx
return (
    <button>
  	  <LikeIcon className={styles.icon} />
	</button>
  );

하지만 fill이나 stroke의 속성으로는 색상이 바뀌지 않았고... 검색해보니 버튼 안의 컴포넌트에 대해 색상이 출력되지 않는 오류가 있는 것 같다 (대체 왜)
이런 경우에는 다음과 같이 filter 속성을 활용하여 색을 입혀줘야 한다.
https://developer.mozilla.org/ko/docs/Web/CSS/filter

.icon {
  filter: invert(38%) sepia(27%) saturate(4887%) hue-rotate(200deg)
    brightness(94%) contrast(102%);
}

색상 코드를 사용해서 filter 속성으로 변환하는 방법은 아래 링크에 있다. 원하는 색상 코드를 입력하면 자동으로 변환해준다.
https://codepen.io/sosuke/pen/Pjoqqp