vue2 svg icon component

The icons are from iconfont.cn

Demo

qinshenxue.github.io/vui-icon/

Installation

$ npm install vui-icon

Usage

const Vue = require('vue');
const VuiIcon=require('vui-icon');
Vue.use(VuiIcon);

<vui-icon name="close"></vui-icon>

Icon style

You should define the icon style in your project as follows.

.vui-icon{
    fill:#666
}
.vui-icon:hover{
    fill:#000
}

How to use your icon

You can download the icon on the iconfont.cn or design your own icon to save as SVG file. Put the SVG file in src/svg/, and run npm install && npm run build.

Notes

• The viewbox attribute of the SVG file must be 0 0 1024 1024
• The icon name keeps pace with the name of the SVG file

How to change the component name

Find vui-icon in src/index.js, change it to your component name, then run npm install && npm run build.