React 상에서 svg 다루기

문제

요소에 들어갈 아이콘을 넣어주기 위해 다음과 같이 기존의 png나 jpg 파일을 import하는 방식으로 svg 리소스를 가져왔다.

import linkBtnImg from '../../../assets/icon-link_to_button.svg';

 

하지만 이런 식으로 사용하다 보니, 크기만 다른 svg를 사용하기 위해서 똑같은 리소스를 두 번 import 해야 되는 번거로운 문제가 있었다.

 

문제해결

위의 방식이 아닌 svg 자체를 컴포넌트화 시키는 방식을 사용하기로 하였다.

 

 

우선 다음과 같이 해당 svg 파일을 ReactComponent의 형태로 import 해 온다.

import { ReactComponent as LinkToButton } from '../../../assets/icon-link_to_button.svg';

 

다음으론, svg 코드에서 바꾸고자 하는 요소의 값을 current 로 바꿔준다.

<svg width="current" height="current" fill="current" class="SvgIcon_SvgIcon__root__svg__DKYBi" viewBox="0 0 18 18"><path d="m11.955 9-5.978 5.977a.563.563 0 0 0 .796.796l6.375-6.375a.563.563 0 0 0 0-.796L6.773 2.227a.562.562 0 1 0-.796.796L11.955 9z"></path></svg>

 

current로 바꿔 준 속성은, 사용하는 컴포넌트에서 다음과 같이 props로 디자인 목적에 맞는 값들을 할당해주어 원하는 형태로 랜더링할 수 있었다.

<LinkToButton width="1em" height="1em" fill="#36f" />