React에서 SVG 다루는 법

이 방법을 사용하면, 하나의 svg 파일로 다양한 크기, 색상을 가진 아이콘을 이용할 수 있다.

import { ReactComponent as Icon } from './icon.svg'

 

 

타입스크립트 이용시 src 폴더 밑에 custom.d.ts 파일 추가 후 아래 내용 작성 

 

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

 

 

 

 

 

출처

https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

[React] React에서 SVG 활용하기

https://velog.io/@whis/%EC%95%8C%EC%93%B8%EC%8B%A0%EC%9E%A1-2.-React%EC%97%90%EC%84%9C-SVG-%EB%8B%A4%EB%A3%A8%EB%8A%94-%EB%B2%95

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