개발일기_220106_svg 리액트 컴포넌트로 사용하기(svg 색상 바꾸기)

오늘 한 일

• 회사 웹사이트 디자인이 다시 한 번 대변동을 일으켰다. 이번엔 싹 다 갈아엎는 수준까지는 아니어도, 세세한 부분까지 많은 변화가 있어서 하나하나 체크하면서 작업하려니 여간 수고롭지가 않다.
• 형태는 똑같은 이미지인데 색상이 서로 묘하게 달리 적용된 것들도 꽤 있었다. 똑같은 알파벳으로 된 단어가 여기서는 옅은 연두색인데, 저기서는 좀 진한 초록색인 식. 일일이 svg로 저장하며 이미지 파일이 늘어나는 현상에 환멸을 느끼려던 찰나, 또 우연한 기회에 유용한 링크를 찾아냈다.
• 방법인즉슨 이렇다. 해당 svg 파일을 열어서 fill='none'이나 fill='#000000' 같이 색상 코드가 들어간 부분을 fill='current'로 변경해준다.
• 그리고 아래처럼 임포트하면 svg 파일일지라도 리액트 컴포넌트로서 가져와서 보통의 컴포넌트처럼 사용할 수 있다. 이렇게 가져온 컴포넌트에 fill 속성을 원하는 색상 코드로 넣어준다. 그러면 내가 원하는 색을 넣은 이미지로 바뀐다. 또, 마찬가지로 컴포넌트이기 때문에 일반적인 방식으로 style 속성을 넣으면 CSS의 인라인 적용도 가능하다.

import { ReactComponent as Blahblah } from '../your_directory/blahblah.svg';

...

  return (
      <Blahblah fill='#ffffff' style={{ margin: '10px' }} />
  )

오늘 배운 것

• 어쩌다 찾게 됐는지는 기억이 잘 나지 않는다. 뭔가 다른 걸 찾으려고 시작한 구글링이었던 것 같은데 제목에 끌려서 그만..

How To Change SVG's Color in React.