vite-plugin-svg-sprite
A Vite plugin for importing SVG files as SVG sprite symbols or components.
Installation
You can install the plugin using npm, pnpm, or yarn:
npm install vite-plugin-svg-sprite --save-dev
# or
pnpm add vite-plugin-svg-sprite --save-dev
# or
yarn add vite-plugin-svg-sprite --dev
How to Use
To use the plugin, import and configure it in your Vite configuration file (vite.config.js|ts):
import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
const config = {
plugins: [
createSvgSpritePlugin({
exportType: 'vanilla', // or 'react' or 'vue'
include: '**/icons/*.svg'
}),
],
}
React
For React projects, set the exportType to 'react' to import SVGs as components:
import IconFoo from './icons/foo.svg';
<IconFoo />
This may seem similar to svgr but internally they are different.
vite-plugin-svg-sprite usually has a better render performance.
Vue
For Vue projects, set the exportType to 'vue' to import SVGs as components:
import IconFoo from './icons/foo.svg';
<IconFoo />
Non-React / Non-Vue
For users not using React or Vue, set the exportType to 'vanilla'. The imported value will be the symbolId, which can be used with SVG <use>:
import IconFoo from './icons/foo.svg';
const html = `
<svg>
<use xlink:href="#${IconFoo}" />
</svg>
`;
TypeScript Users
To get proper type hints in TypeScript, include the appropriate type definitions in your tsconfig.json:
"types": [
// or "vite-plugin-svg-sprite/typings/react" | "vite-plugin-svg-sprite/typings/vue"
"vite-plugin-svg-sprite/typings/vanilla"
],
API Configuration Options
-
symbolId: (string, optional) Controls the generated symbol ID. Default is 'icon-[name]'.
-
exportType: ('vanilla' | 'react' | 'vue', optional) Determines the type of the exported value. Default is 'vanilla'.
- If set to
'vanilla', the value will be the symbolId.
- If set to
'react', the value will be a React component.
- If set to
'vue', the value will be a Vue component.
-
svgo: (object, optional) Configuration for SVGO, refer to the SVGO documentation for details.
-
include: (string | string[], optional) Paths to match SVG files that should be processed. Default is '**/icons/*.svg', following micromatch rules.
