vue iconfont_Vue的简单iconfont componenet

vue iconfont

维康 (vicon)

A simple iconfont componenet for vue.

用于vue的简单iconfont componenet。

图标字体 (iconfont)

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

iconfont是Alimama MUX制作的矢量图标管理和通信平台。

用法 (Usage)

1.准备图标字体 (1. Prepare iconfonts)

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

从iconfont中获取iconfont ，然后保存在您的对象中。

1.1下载zip (1.1 Download zip)

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

在项目页面中选择“符号”，然后选择“下载代码”

1.2保存iconfont.js (1.2 save iconfont.js)

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

解压缩下载的zip包，然后将文件“ iconfont.js”复制到新项目中。 文件如下所示：

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

2.安装vicon (2. install vicon)

npm install vicon --save

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

安装vicon后，整个项目文件如下所示：

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

3.进口 (3. import)

import and regist vicon/iconfonts in main.js.

在main.js中导入并注册vicon / iconfonts。

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

Vue.component('icon', icon)

4.使用图标 (4. use icon)

Using icon selected from iconfont in template.

使用从模板的iconfont中选择的图标。

<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)

   图标名称可以在demo_symbol.html中找到，该文件包含在download.zip中(通过步骤1下载的文件)

2. you can open demo_symbol.html directly with web browser.

   您可以直接使用网络浏览器打开demo_symbol.html。

翻译自: https://vuejsexamples.com/a-simple-iconfont-componenet-for-vue/

vue iconfont