Issue
Tried to use this library: vite-plugin-react-svg
and had no success by importing it like:
import { ExternalLink } from 'assets/svg/link-external.svg?component';
Are there any workarounds for this issue?
The error i got before was the following:
import { ReactComponent as ExternalLink } from 'assets/svg/link-external.svg';
//Uncaught SyntaxError:
The requested module '/src/assets/svg/link-external.svg?import'
does not provide an export named 'ReactComponent'
Solution
👉 Use vite-plugin-svgr
- Add
SVGR
to the project
yarn add -D @honkhonk/vite-plugin-svgr
- Add the plugin
SVGR
to 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.tsx
import SVG as React Component by adding?component
on the svg's import directive :
import Happy from './assets/svg/happy.svg?component'
<Happy />
You can find more informations about SVGR at https://react-svgr.com/docs/ecosystem/#articles
Answered By - flydev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.