Unable to import SVG with Vite as ReactComponent
👉 Use vite-plugin-svgr
- Add
SVGRto the project
yarn add -D @honkhonk/vite-plugin-svgr
- Add the plugin
SVGRto vite invite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from '@honkhonk/vite-plugin-svgr'
export default defineConfig({
plugins: [ svgr(), react()]
})
- In
App.tsximport SVG as React Component by adding?componenton the svg's import directive :
import Happy from './assets/svg/happy.svg?component'
<Happy />