[React] React에서 SVG 파일 다루기

고병표·2022년 2월 10일
0

React.js

목록 보기
14/21
post-thumbnail

참고 코드
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' />이렇게 사용해주면 원하는 곳에 컬러값을 조건에 따라 바꿔줄 수 있다.

참고 자료

0개의 댓글

Powered by GraphCDN, the GraphQL CDN