Skip to content

A vite plugin which can transform svg icon to vue component. Support optimization via SVGO, support customize svg color and size.

License

Notifications You must be signed in to change notification settings

yisibell/vite-plugin-svg4vue

Repository files navigation


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

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

# pnpm
$ pnpm add vite-plugin-svg4vue -D

# yarn
$ yarn add vite-plugin-svg4vue --dev

# npm
$ npm i vite-plugin-svg4vue -D

Usage

Setup

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { svg4VuePlugin } from 'vite-plugin-svg4vue'

export default defineConfig({
  plugins: [
    vue(),
    svg4VuePlugin(),
  ],
})

In Vue

<template>
  <div>
    <h2>SVG component: </h2>

    <!-- you can change the svg icon color with `fill` attribute when it's a monochrome icon -->
    <LogoSvg fill="red" />

    <!-- you can change the svg icon size with `font-size` or `width`. both of this will be responsive -->
    <LogoSvg font-size="48" />
    <LogoSvg width="48" />

    <h2>SVG url: </h2>

    <p>
      <img :src="logoSvgUrl" alt="" width="36" />
    </p>

    <h2>SVG raw: </h2>

    <p>
      <span v-html="logoSvgRaw"></span>
    </p>
  </div>
</template>

<script setup lang="ts">
import LogoSvg from '@/icons/logo.svg?component'
import logoSvgUrl from '@/icons/logo.svg?url'
import logoSvgRaw from '@/icons/logo.svg?raw'
</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:

<template>
  <div class="d-flex align-center mb-16">
    <label class="mr-12"> ?component&skipsvgo: </label>
    <PPTSvg />
  </div>

  <div class="d-flex align-center">
    <label class="mr-12"> ?raw&skipsvgo: </label>
    <span v-html="PPTSvgRaw"></span>
  </div>
</template>

<script setup lang="ts">
import PPTSvg from '@/icons/ppt.svg?component&skipsvgo'
import PPTSvgRaw from '@/icons/ppt.svg?raw&skipsvgo'
</script>

Typescript

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

/// <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

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:

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

So, you can easily apply its original size.

<template>
  <LogoSvg fill="red" style="width: var(--svg-origin-width); height: var(--svg-origin-height)" />
</template>

<script setup lang="ts">
import LogoSvg from '@/icons/logo.svg?component'
</script>

Framework Support