Guide

vuepress-plugin-svg-icons is a VuePress plugin that makes it available to use svg-sprite-icon in VuePress.

Install

npm i @goy/vuepress-plugin-svg-icons -D

yarn add @goy/vuepress-plugin-svg-icons -D

pnpm add @goy/vuepress-plugin-svg-icons -D

Usage

See Official Docsopen in new window about how to use plugin in VuePress.

import { defineUserConfig } from 'vuepress'
import { svgIconPlugin } from '@goy/vuepress-plugin-svg-icons'

export default defineUserConfig({
  plugins: [
    svgIconPlugin(),
  ],
})

Create a folder named icons in your document sourceDir and put all your SVG files in it.

All icons will be loaded automatic.

The plugin provide a global component named VpIcon.

Just enjoy it!

WARNING

A name prop must be provided to specific the SVG file name you gonna use.

And the file must exists wherever you put your SVG files in.

i.e:

<vp-icon name="vue" />

Options

svgsDir

  • type: string
  • default: icons

The path to your svg files directory.

If a relative path is specified, it will be resolved based on sourceDir.

componentName

  • type: string
  • default: VpIcon

Custom the svg icon component name if needed.

Component Props

The VpIcon component's props.

color

  • type string
  • default undefined

Custom the icon color.

size

  • type string
  • default undefined

Custom the icon size.

Custom style

By default, those variables are set to vuepress-plugin-svg-icons.

:root {
  --vp-icon-color: currentcolor;
}

Override it in your stylesheet if needed.