React, Vite 환경에서 CSS로 SVG 색상변경하기

선행조건

아래 블로그에서 React + Vite 에서 ReactComponent 사용에 대해서 말하고 있어서

 "vite-plugin-svgr": "^4.2.0",

위 패키지가 설치가 안된분이라면 아래 블로그를 방문하고 오면 좋다.
https://velog.io/@yoonth95/SVG-파일-React-Component로-가져오기-Vite-TypeScript

위 블로그에서 설치를 완료했다면 이제 SVG 색상을 CSS로 수정하는 방법을 알아보자

다운받은 svg 파일을 클릭하면 사진에대한 정보가 나온다.
svg 태그에서 fill="currentColor" 로 수정한다(처음에는 fill=”none”)

<svg width="33" height="30" viewBox="0 0 33 30" **fill="currentColor"** xmlns="http://www.w3.org/2000/svg">

그래도 css로 색상 수정이 안된다면?

path에 fill이 고정되어 있을수 있다.

ex) fill=”#181818”

그러면 해당 코드를 지워준다

<svg width="33" height="30" viewBox="0 0 33 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path ...
fill="#18181B"/> // 여기 지울것
</svg>

완성된 코드

const SendInput = ({ className }: InputProps) => {
  return (
    ...
      <InputIcon className={`ml-auto mr-3 cursor-pointer text-white`} />
    </div>
  );
};

export default SendInput;

위 처럼 tailwind로 지정해줄수도 있고 직접 css color:색상 으로 편집해줄수도 있다.