一：前言

最近在写导航面板(vue-cli)中需要使用到Icon，于是采取了使用阿里的iconfont写这篇文章来记录一下

二：步骤

2.1 挑选需要的icon添加到购物车中

官网：

挑选完后在购物车处点击添加到项目。

如果选择多色，就选择Symbol模式，如果是单色模式就选择Unicode或Font class 模式。在这里只介绍Symlol的使用，另外两种可类似可得。

2.2在文件中引入

首先下载好文件，将其放入createtoolbox\src\assets\icon再在main.js中引入

import '@/assets/icon/iconfont.js'

再在App.vue 中引入样式

使用

2.3模块化Icon

在使用过程中觉得这样使用有点麻烦于是使用了将Icon模块化的想法

于是在components下创建了一个Icon.vue其中写入

之后再在main.js 中注册全局组件

import Icon from '@/components/Icon' Vue.component('Icon',Icon)

然后就可以在任意的地方使用了

参考文章：