vite-plugin-svgicon

2.1.2 verified Mon Apr 27 auth: no javascript

Vite plugin that integrates the @yzfe/svgicon ecosystem for SVG icon management. Current stable version is 2.1.2, released in early 2023. It allows importing SVG files as SVG symbol definitions or Vue/React components, with built-in SVGO optimization. Key differentiators: supports multiple frameworks (Vue 2, Vue 3, React), generates sprite symbols automatically, and offers a consistent API across build tools (Vite, webpack, Vue CLI). Requires Vite >=2.0.0-beta.1. Ships TypeScript types.

Common errors

error Error: Cannot find module 'vite-plugin-svgicon' ↓

cause Package not installed or dependency missing.

fix

npm install vite-plugin-svgicon --save-dev

error TypeError: vitePluginSvgicon is not a function ↓

cause Using require() instead of ESM import.

fix

Use import statement: import vitePluginSvgicon from 'vite-plugin-svgicon'

Warnings

breaking Vite >=2.0.0-beta.1 required; older versions unsupported. ↓

fix Upgrade Vite to at least 2.0.0-beta.1.

gotcha Plugin must be placed after other plugins that process SVG (e.g., @vitejs/plugin-vue) to avoid conflicts. ↓

fix Order plugins correctly: vue/react plugin first, then svgicon plugin.

Install

npm install vite-plugin-svgicon

yarn add vite-plugin-svgicon

pnpm add vite-plugin-svgicon

Imports

default

wrong

const vitePluginSvgicon = require('vite-plugin-svgicon')

correct

import vitePluginSvgicon from 'vite-plugin-svgicon'

ESM-only; plugin must be used in Vite config as default import.

VitePluginSvgiconOptions

wrong

import { VitePluginSvgiconOptions } from 'vite-plugin-svgicon'

correct

import type { VitePluginSvgiconOptions } from 'vite-plugin-svgicon'

Options type is only available as a type export; do not use value import.

Quickstart

Demonstrates basic Vite config with plugin options, SVG include paths, and SVGO customization.

// vite.config.ts
import { defineConfig } from 'vite'
import vitePluginSvgicon from 'vite-plugin-svgicon'

export default defineConfig({
  plugins: [
    vitePluginSvgicon({
      include: ['src/assets/icons/**/*.svg'],
      svgo: true,
      svgoConfig: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeDimensions', active: true }
        ]
      }
    })
  ]
})