vite-svg-plugin

transfer svg file to svg symbol in vite

Install

npm install vite-svg-plugin -D

quick start

// vite.config.js / vite.config.ts
import { svgBuilder } from 'vite-svg-plugin'

export default {
  plugins: [
    svgBuilder({ path: 'your svg files directory path', prefix: '' })
  ]
}

use svg to import

<svg class="svg-icon" aria-hidden="true" v-on="$attrs">
  <use xlink:href="iconName" />
</svg>

if you set prefix, the iconName is #${prefix}-${svgFileName}. if not, the iconName is #${svgFileName}.

you can check the examples to know the detail.

config

you can check /src/type.ts to see the option.