vicon

A simple iconfont componenet for vue.

iconfont

iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Usage

1. Prepare iconfonts

Get your iconfonts from iconfont and then save in your porject.

1.1 Download zip

Select "Symbol" in your project page and then select "Download Code"

1.2 save iconfont.js

unpack downloading zip package and then copy file "iconfont.js" to your new project.
Files looks like below:

project/
├── iconfont.js
└── main.js

2. install vicon

npm install vicon --save

After installing vicon, the whole project files looks like below:

project/
├── iconfont.js
├── main.js
└── node_modules
    └── vicon
        └── ...

3. import

import and regist vicon/iconfonts in main.js.

import icon from 'vicon'
import './static/icon/iconfont'

Vue.component('icon', icon)

4. use icon

Using icon selected from iconfont in template.

<template>
  <icon>tools</icon>
</template>

Note:

1. icon name could be found in demo_symbol.html which include in download.zip(file downloaded by step 1)
2. you can open demo_symbol.html directly with web browser.

GitHub