Skip to main content

vite-plugin-svgr ↔ adds SVGR lib as Vite plugin to properly parse SVG files as JSX

Sources: github.com/pd4d10/vite www.npmjs.com/package/vite

yarn add vite-plugin-svgr

update vite.config.js || 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({
      // Set `true` to export React FC as default.
      // Notice that it will overrides the default behavior of Vite.
      exportAsDefault: false, 
    
      // svgr options: https://react-svgr.com/docs/options/
      svgrOptions: {
        // ...
      },
    
      // esbuild options, to transform jsx to js
      esbuildOptions: {
        // ...
      },
    
      //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include. By default all svg files will be included.
      include: '**/*.svg',
    
      //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
      exclude: '',
    }),
      ], 
})

References​

  1. BUG: Vite can't load SVG files properly with correct types ↔ FIX: add vite-plugin-svgr