Use svgr-rs with vite and webpack.
pnpm i @svgr-rs/svgrs-plugin -D
import path from 'node:path'
import react from '@vitejs/plugin-react'
import { svgrs } from '@svgr-rs/svgrs-plugin/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
svgrs({
exportType: 'named',
namedExport: 'ReactComponent',
})
],
})
Check supported options from svg-rust/svgr-rs.
Extra options for vite:
include
- type
string[]
- default
['**/*.svg']
exclude
- type
string[]
- default
[]
Add the following module rule
to your webpack.config
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
resourceQuery: /react/,
use: [
{
loader: 'esbuild-loader',
options: {
loader: 'tsx',
target: 'es2015',
},
},
{
loader: '@svgr-rs/svgrs-plugin/webpack',
options: {
exportType: 'named',
namedExport: 'ReactComponent',
},
},
],
}
Check supported options from svg-rust/svgr-rs.
- Setup -
pnpm i
- Build -
pnpm build
built with ❤️ by 😼