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 Docs about how to use plugin in VuePress.

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

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.