Registry / web-framework / vite-plugin-svgicon

vite-plugin-svgicon

library2.1.2jsnpmunverified

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.

web-framework serialization

npm install vite-plugin-svgicon

package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SVGICO

vite-plugin-svgicon

web-frameworkjavascriptv2.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import vitePluginSvgicon from 'vite-plugin-svgicon'

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

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

VitePluginSvgiconOptions

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

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

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

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 } ] } }) ] })

Debug

Known issues

breakingVite >=2.0.0-beta.1 required; older versions unsupported.

fix

Upgrade Vite to at least 2.0.0-beta.1.

affects: >=2.0.0-beta.1

gotchaPlugin 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

Package not installed or dependency missing.

fix

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

TypeError: vitePluginSvgicon is not a function

Using require() instead of ESM import.

fix

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

Upgrade

Version history

2.1.2latest on npm

Audit

Dependencies

viterequiredpeer dependency required for the plugin to work

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-svgicon ↗

homepagehttps://svgicon.github.io ↗