[React] SVG React Component로 가져오기(feat. TypeScript, Vite)

svg react component로 가져오기

import { ReactComponent as AlarmIcon } from '../assets/icons/alarm-icon.svg';

1. ts 설정

   1. ts.config.ts

      "include": ["src", "custom.d.ts"], 

   2. custom.d.ts

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

2. vite 설정

   1. vite-plugin-svgr install

      import svgr from 'vite-plugin-svgr';

   2. vite.config.ts

      plugins: [svgr()]