본문 바로가기
카테고리 없음

React에서 SVG를 사용하는 법

woochul 2024. 1. 10. 20:43

React에서 SVG를 사용하는 여러 방법을 비교해 보고 가장 좋은 방법을 찾았다.

이 글에서 에디터는 VSCode, 프로젝트는 Create React App TypeScript 템플릿을 사용했다.

바쁘신 분을 위해: 결론

SVG를 사용하는 4가지 방법

1. SVG 코드 복사, 붙여넣기

 

위와 같이 JSX에 SVG 코드를 그대로 복사해서 붙여넣는 방법이다.

가장 단순하고 쉽지만 유지보수에는 좋지 않다.

2. SVG 파일을 컴포넌트 파일로 변환

SVGR을 이용해서 모든 SVG 파일을 컴포넌트 파일로 변환하는 방법이다. 명령어:

npx svgr --icon --no-svgo <svg 폴더 경로> --out-dir <결과 폴더 경로> --typescript

 

예시)

npx svgr --icon --no-svgo ./src/assets/icons/*.svg --out-dir ./src/assets/icons --typescript

 

변환된 컴포넌트 파일 코드는 이렇게 생겼다.

 

이제 이 변환된 컴포넌트를 불러와서 쓰기만 하면 된다.

간단하고 좋은 방법이지만 굳이 단점을 꼽자면 같은 내용의 파일이 2개가 생긴다는 점이다.

3. img 태그 사용

 

위와 같이 SVG 파일을 불러와서 img 태그에 넣는 방법이다. 이 방법은 2가지 단점이 있다.

  1. 원본을 조작할 수 없다.
    • 예) 색상을 변경할 수 없다.
  2. 사용할 때마다 불필요한 네트워크 요청이 생긴다.

4. SVG 파일을 React 컴포넌트로 불러오기

최종적으로 내가 선택한 방법이다.

Create React App 프로젝트에서는 다음과 같이 SVG 파일을 ReactComponent로 불러올 수 있다.

import { ReactComponent as Logo } from './logo.svg'

 

SVG를 사용할 때마다 매번 저렇게 불러오는 건 번거롭다.

따라서 SVG 파일이 모여 있는 폴더에 index.ts 파일을 생성 후, index.ts 파일에 다음과 같은 형태로 코드를 작성해 준다.

 

이렇게 정리 해놓으면 다음과 같이 깔끔하게 사용할 수 있다.

 

VSCode를 이용해 index.ts 파일의 코드를 쉽게 생성하는 방법이 있다. 순서는 다음과 같다.

 

1. SVG 파일이 모여 있는 폴더에 index.ts 파일 생성

2. 모든 SVG 파일을 선택하고 우클릭 후 Copy Relative Path를 클릭

 

3. index.ts 파일에 복사한 내용 붙여넣기

4. Ctrl + F를 누르고 Regex 옵션을 활성화한 뒤 Search, Replace 입력창에 각각 다음 내용 추가

    • src\\assets\\icons\\(.+).svg (Mac 사용자는 src/assets/icons/(.+).svg 입력)
    • export { ReactComponent as \u$1 } from './$1.svg'

 

 

5. 모두 변환(Replace All)

SVG 색상을 변경하는 3가지 방법

SVG 파일의 색상을 변경해야 할 때가 있다. 예를 들어, hover 시 아이콘 색상을 바꾼다든지 하는 식으로 말이다.

똑같은 아이콘인데 색상만 다른 파일을 만들어서 쓸 수도 있겠지만 더 쉽고 좋은 방법이 있다.

SVG 색상을 바꿀 필요가 없다면 이 부분은 생략해도 된다.

1. CSS fill, stroke 이용

예를 들어 아이콘 색상을 빨간색으로 바꾸고 싶다면 다음과 같이 CSS를 작성하면 된다.

svg path {
    stroke: red;
}
svg path {
    fill: red;
}

 

위 코드를 보면 알겠지만, 아이콘마다 다른 속성을 건드려줘야 하는 단점이 있다.

SVG 파일마다 코드가 다르기 때문에 건드려야 하는 게 stroke인지 fill인지, 아니면 다른 속성인지는 SVG 코드를 확인해야 알 수 있다.

2. CSS filter 이용

스택오버플로우 답변에 CSS filter를 이용해 SVG 색상을 바꾸는 방법이 잘 설명돼 있다.

이 방법은 색상을 filter에 맞게 변경해 줘야 한다는 단점이 있다. 바꾼 색상이 직관적이지도 않다.

3. currentColor 이용

최종적으로 내가 선택한 방법이다.

SVG 코드에서 필요한 부분만 currentColor로 바꿔주면 된다.

VSCode를 이용하면 SVG 파일의 코드를 쉽게 변경할 수 있다. 순서는 다음과 같다.

 

1. VSCode Search 탭으로 이동

2. Regex 옵션 활성화

3. files to include에 *.svg 추가

4. Search, Replace 입력창에 각각 다음 내용 추가

  • (fill|stroke)="(?:(?!none)[^"])+"
  • $1="currentColor"

        최종적으로 다음과 같은 모습이 된다.

 

5. 모두 변환(Replace All)

 

사용은 다음과 같이 하면 된다.

// 1. props로 color 넣어주기
<Brightness color="red" />;

// 2. CSS color 사용
<Brightness style={{ color: 'blue' }} />

결론

React에서 SVG를 사용하는 여러 방법을 비교해 봤다.

최종적으로 다음 순서로 사용하는 게 가장 좋다는 결론을 내렸다.

  1. SVG 파일을 React 컴포넌트로 불러오기
  2. SVG 파일 색상을 currentColor로 변경
  3. 다음과 같이 사용
    import { Brightness } from './assets/icons';
    
    ...
    
    <Brightness color="blue" />

 

티스토리툴바