[알쓸신잡] 2. React에서 SVG 다루는 법

Whis·2021년 1월 16일
0

알쓸신잡

목록 보기
2/4

이전에 따로 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

profile
Developer

0개의 댓글

관련 채용 정보