React에서 svg file 사용하는 방법

 

1. src 안에 custom.d.ts 혹은 아무 d.ts 파일을 만들고 아래처럼 적는다

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

 

 

2. ReactComponent로 불러와서 사용한다

import { ReactComponent as Svg1} from "./svg/file1.svg";
// import Svg1 from './svg/file1.svg' // 이건 실패

const ScatterPoint = ({ x, y, datum, min, max } : any) => {
  return <svg x={x} y={y}><Svg1/></svg>
};