ntnyq/vuepress-plugin-svg-icons

:fire: SVG sprite plugin for VuePress

vuepress-plugin-svg-icons

❤️ SVG sprite plugin for VuePress

📖 Live Demo and Docs

Note

⚠️ The latest version since v5 only supports VuePress v2.

If you are looking for VuePress v1 support, please use @goy/[email protected].

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

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 provides a global component named VpIcon.

Just enjoy it! 😊

<vp-icon name="github" />

<vp-icon color="#3eaf7c" name="vue" />

<vp-icon color="#3eaf7c" name="vue" size="4em"/>

Custom options detail

License

MIT License © 2019-PRESENT ntnyq

vuepress-plugin-svg-icons's Issues

Unknown custom element: <vp-icon>

Hi
I cannot get your example to work as I get the following error in the console:

[Vue warn]: Unknown custom element: <vp-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Steps to reproduce
in vuepress project
ls -s docs/icons/github.svg
4 docs/icons/github.svg
grep goy docs/.vuepress/config.js
plugins: ["@goy/svg-icons", "@vuepress/plugin-back-to-top", "@vuepress/plugin-medium-zoom"]
grep icon docs/guida/Introduction.md
<vp-icon name="github" />
I also tried a variation
grep Icon docs/guida/Introduction.md
<VpIcon name="github" />
which gives

[Vue warn]: Unknown custom element: <VpIcon> ...

Thanks

bug: icons conflict when used in two plugins or theme

Support for vuepress 2.0 - TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

Hello,
Currently trying to use SVGs on my vuepress ^2.0.0-beta project, I found your module.
However, I got a nasty error.
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

Steps to reproduce:

1. Setup a vuepress 2.0 project
2. Install plugin and configure config.ts
3. Try to build.

Current environment:

• node : v14.17.5
• npm : v6.14.14

Here are my related configs:

# package.json
{
  "name": "docs",
  "version": "2.0.0",
  "description": "Docs",
  "license": "MIT",
  "scripts": {
    "docs:build": "vuepress build .",
    "docs:clean-dev": "vuepress dev . --clean-cache",
    "docs:dev": "vuepress dev ."
  },
  "devDependencies": {
    "@goy/vuepress-plugin-svg-icons": "^4.3.0",
    "vuepress": "^2.0.0-beta.39",
    "vuepress-theme-hope": "^2.0.0-beta.45"
  }
}

# config.ts
export default {
  plugins: ['@goy/svg-icons'],
});

Error fullstack :

PS C:\laragon\www\docs> vuepress dev . -v
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:124:11)
    at Object.resolve (path.js:162:9)
    at SvgIconsPlugin (C:\laragon\www\docs\node_modules\@goy\vuepress-plugin-svg-icons\lib\index.js:35:26)
    at resolvePluginObject (C:\laragon\www\docs\node_modules\@vuepress\core\lib\app\resolvePluginObject.js:18:11)
    at C:\laragon\www\docs\node_modules\@vuepress\core\lib\app\resolvePluginsFromConfig.js:12:65
    at Array.reduce (<anonymous>)
    at resolvePluginsFromConfig (C:\laragon\www\docs\node_modules\@vuepress\core\lib\app\resolvePluginsFromConfig.js:9:65)
    at setupAppPlugins (C:\laragon\www\docs\node_modules\@vuepress\core\lib\app\setupAppPlugins.js:10:77)
    at createBaseApp (C:\laragon\www\docs\node_modules\@vuepress\core\lib\app\createBaseApp.js:45:43)
    at createDevApp (C:\laragon\www\docs\node_modules\@vuepress\core\lib\app\createDevApp.js:10:51)