vite-plugin-svg4vue

A vite (3.x || 4.x) plugin which can transform SVG icon to vue (2.7.X || 3.x) component.

this plugin dependencies on vue/compiler-sfc, so keep your vue version to 3.2.13+ or 2.7.14+.

• Example Here.
• Release Notes.

Features

• SVGO optimization.
• Hot Module Replacement support.
• Support for ?url , ?component and ?raw query string.
• Support custom svg icon (monochrome) color with fill , fill-opacity , stroke , stroke-opacity attribute.
• Support change svg icon size with font-size and it will be responsive.
• Support Iconfont SVG Icons.

Installation

1# pnpm
2$ pnpm add vite-plugin-svg4vue -D
3
4# yarn
5$ yarn add vite-plugin-svg4vue --dev
6
7# npm
8$ npm i vite-plugin-svg4vue -D

Usage

Setup

1// vite.config.ts
2
3import { defineConfig } from 'vite'
4import vue from '@vitejs/plugin-vue'
5import { svg4VuePlugin } from 'vite-plugin-svg4vue'
6
7export default defineConfig({
8  plugins: [
9    vue(),
10    svg4VuePlugin(),
11  ],
12})

In Vue

1<template>
2  <div>
3    <h2>SVG component: </h2>
4
5    <!-- you can change the svg icon color with `fill` attribute when it's a monochrome icon -->
6    <LogoSvg fill="red" />
7
8    <!-- you can change the svg icon size with `font-size` or `width`. both of this will be responsive -->
9    <LogoSvg font-size="48" />
10    <LogoSvg width="48" />
11
12    <h2>SVG url: </h2>
13
14    <p>
15      <img :src="logoSvgUrl" alt="" width="36" />
16    </p>
17
18    <h2>SVG raw: </h2>
19
20    <p>
21      <span v-html="logoSvgRaw"></span>
22    </p>
23  </div>
24</template>
25
26<script setup lang="ts">
27import LogoSvg from '@/icons/logo.svg?component'
28import logoSvgUrl from '@/icons/logo.svg?url'
29import logoSvgRaw from '@/icons/logo.svg?raw'
30</script>

Skip SVGO for a single file (Added in v2.8.1)

SVGO can be explicitly disabled for one file by adding the ?skipsvgo query string:

1<template>
2  <div class="d-flex align-center mb-16">
3    <label class="mr-12"> ?component&skipsvgo: </label>
4    <PPTSvg />
5  </div>
6
7  <div class="d-flex align-center">
8    <label class="mr-12"> ?raw&skipsvgo: </label>
9    <span v-html="PPTSvgRaw"></span>
10  </div>
11</template>
12
13<script setup lang="ts">
14import PPTSvg from '@/icons/ppt.svg?component&skipsvgo'
15import PPTSvgRaw from '@/icons/ppt.svg?raw&skipsvgo'
16</script>

Typescript

If you are using TypeScript, vite-plugin-svg4vue/client can be added to d.ts declaration file.

1/// <reference types="vite-plugin-svg4vue/client" />

Options

Key	Default value	Description	Type
svgoConfig	{}	SVGO config. if set to false, will disable SVGO.	object/boolean
enableSvgoPresetDefaultConfig	true	Whether to enable preset-default configuration for SVGO	boolean
defaultExport	url	Default behavior when importing .svg files, possible options are: url , component and raw	string
assetsDirName	icons	Restrict SVG to a specific folder. As long as the SVG is in the assetsDirName folder, it can be processed by this plugin, Even if the folder is nested, such as, path/to/icons/*.svg, icons/path/to/svg/*.svg , path/to/icons/path/to/*.svg and so on. If set assetsDirname to false , will make it work with arbitrary file path.	string/boolean
enableBuildCache	true	Whether to enable caching at build time	boolean
enableMonochromeSvgOptimize	true	Whether to enable monochrome svg icon optimize which can move child node (named path, Even the path wrapped by g) 's fill, fill-opacity and stroke, stroke-opacity attribute to its parent node (svg element). So that you can change the svg icon color with fill and stroke.	boolean
enableSvgSizeResponsive	true	Whether to enable svg icon responsive.	boolean
namespaceClassnames	true	Whether to add a namespace for class selector.	boolean
namespaceIDs	true	Whether to add a namespace for ID selector.	boolean
namespacePrefix	'a'	Whether to add a namespace prefix string for selector.	string
enforce	'pre'	Define this plugin invocation order.	string or boolean

What enableSvgSizeResponsive do ?

In fact, for the svg node, vite-plugin-svg4vue will set the width value to font-size, remove svg height and set width to 1em, so that the svg size will be responsive and you can manipulate it's size with font-size.

Just in case, it records the original size of the svg as a css variables:

1<svg style="--svg-origin-width: ${origin width}; --svg-origin-height: ${origin height};"></svg>

So, you can easily apply its original size.

1<template>
2  <LogoSvg fill="red" style="width: var(--svg-origin-width); height: var(--svg-origin-height)" />
3</template>
4
5<script setup lang="ts">
6import LogoSvg from '@/icons/logo.svg?component'
7</script>

Framework Support

• Nuxt: see nuxt-svg-icons.