이전에 따로 svg 파일을 잘 다룬적이 없어서 react에서 material-ui와 함께 svg를 icon으로 녹임에 있어서 많은 고민과 시행착오가 있었다.
svg 파일을 다 뜯어보는 것은 예사였고, 안의 path값만 가져오거나, 어떻게든 통일된 커스텀 컴포넌트를 만들어서 material-ui와 함께 잘(?) 쓰고싶었는데 그것이 생각보다 쉽지 않았다.
그래서 방법을 찾아본 결과 아래와 같이 사용하면 되는 것을 알아냈다.
import React from 'react';
import { ReactComponent as Icon } from './icon.svg'위와 같이 svg파일을 불러오면 svg파일을 잘 녹여내서 사용할 수 있다.
하지만, 이렇게 임포트한 아이콘을 이제 조건에 맞춰서 바꾸고 싶을때(조건에 따라 아이콘의 색을 바꾸는 등) style={{ color: 'colorValue' }} 이렇게 주면 생각대로 잘 바뀌지 않는다.
이런 경우 svg 파일을 잘 살펴보면 된다.
svg파일을 보면 fill이라는 attribute가 보이는데 이게 svg에서 컬러값을 담당하는 아이들이다. 여기서 가장 상위 부모 컴포넌트에 fill='none'이 있으면 지워주고, 컬러를 변환시켜주고 싶은 태그의 fill값을 current로 바꿔준 뒤 다시 svg를 component로 import 한 곳으로 가서 <Icon fill='colorValue' />이렇게 사용해주면 원하는 곳에 컬러값을 조건에 따라 바꿔줄 수 있다.
++ 부록
간혹 Figma에 있는 디자인을 사용할 때, Figma에 png로 업로드한 각각 다 다른 image들을 svg로 export 했을 경우, 해당 svg들을 위 설명에 맞게 import { ReactComponent as Icon } from './icon.svg' 이런 식으로 import를 하여 사용을 했을때, 가장 첫번째 이미지만 여러벌 나오는 경우가 있다.
이미지를 각각 열어보면 각기 다른 이미지들을 다운 받은 것이 맞는데도,이상하게 전부 첫번째 이미지로만 뜰때가 있는데, 이 또한 svg 파일을 까보면 답을 쉽게 찾을 수 있다.
png로 업로드 된 image를 svg로 export를 하면 아래와 같이 svg가 형성이 된다.
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0.44043" width="87.12" height="36" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.00826446 0.02)"/>
</pattern>
<image id="image0" width="121" height="50" xlink:href="data:image/png;base64,blahblah.../>
</defs>
</svg><rect x="0.44043" width="87.12" height="36" fill="url(#pattern0)"/> 를 보면 fill 값에서 호출하는 값이 pattern0인데, 이는 아래의 <pattern id="pattern0" ...>를 호출하는 것이다.
<use xlink:href="#image0" transform="scale(0.00826446 0.02)"/>를 보면 여기서 xlink:href='#image0' 인데, 이는 아래의 <image id="image0"..>를 불러오는 것이다.
Figma에서 받은 벡터값이 없는 그냥 통이미지였다가 svg로 변환된 파일들 모두 동일하게 되어있다. 모두 동일하게 patter0 id를 가진 pattern 태그를 불러오고, image0 id를 가진 image 태그를 불러오기 때문에, 다 다른 이미지더라도 구현했을때 첫번째 이미지가 여러개 뜨는 것처럼 보인 것이다.
Figma에서 따로 설정하는 방법이 있는지는 모르겠지만, 이런 경우에는 한땀한땀 svg파일을 열어서 unique id로 수정해주면 문제가 해결된다.
Reference
