참고 코드
src > components > base > Header
리액트 프로젝트에서 SVG 파일을 불러올 때 단순한 이미지 형태로 불러오면 SVG가 할 수 있는 기능(ex:fill)들을 활용할 수 없어 방법을 찾던 중에 발견했다.
위와 같은 컴포넌트 형태로 svg 파일을 불러올 수 있다.
불러온 파일의 색을 바꿀 때는 기존의 방법 style={{ color: 'color' }}와는 방법이 조금 다르다.
svg 파일에는 fill 같은 attribute가 있는데 이를 활용하면 된다.
fill='none'이 있으면 지워주고, 컬러를 변환시켜주고 싶은 태그의 fill값을 current로 바꿔준 뒤
다시 svg를 component로 import 한 곳으로 가서 <Svg fill='color' />이렇게 사용해주면 원하는 곳에 컬러값을 조건에 따라 바꿔줄 수 있다.
참고 자료
