Lt0 / vicon

icon component for vue

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

中文说明

vicon

Vicon is an simple iconfont componenet for vue.


iconfont

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



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"

dowload icons


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.

icon name

About

icon component for vue

License:MIT License


Languages

Language:Vue 100.0%