vue-svgicon 使用方法

安装

# install global
npm install vue-svgicon -g
# install for project
npm install vue-svgicon --save-dev

命令

# generate svg icon components
vsvg -s /path/to/svg/source -t /path/for/generated/components

scripts

{
    "scripts": {
        "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
    }
}

# bash
npm run svg

使用

// main.ts

...

import SvgIcon from 'vue-svgicon'
import '@/icons/components'

// Default tag name is 'svgicon'
Vue.use(SvgIcon, {
    tagName: 'svg-icon',
    defaultWidth: '1em',
    defaultHeight: '1em'
})

...

// 404 component

<svg-icon
    name="404"
    width="3em"
    height="3em"
    color="#333 #f60"
></svg-icon>