vite-plugin-svgr

ViteでSVGをReact Componentとして読もう

使い方

npmから取ってくる

code:sh

npm i -D vite-plugin-svgr

プラグインをインストールする

code:vite.config.ts

import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';

import svgr from 'vite-plugin-svgr';

export default defineConfig({

plugins: [

react(),

svgr(),

});

Reactコンポーネントとして使う

code:Icon.tsx

import { ReactComponent as HogeSvg } from './assets/hoge.svg';

export const Icon: React.FC = () => <HogeSvg />;