23.Vue技术栈开发实战-Icon组件

23.Vue技术栈开发实战-Icon组件
三种制作icon组件的⽅式。

这个过程我们⽤了阿⾥巴巴的⼯具⽹站
最后来封装两个icon组件，⼀个多⾊，⼀个单⾊。

⾸先来看下iview的icon组件。

custom允许使⽤⾃定义的图标。

这⾥内置了很多⾃定义的图标
已经创建好的页⾯
设置⼤⼩为50
设置为粉⾊
⾃⼰制作字体⽂件iconfont⽹站
随便选⼏个都加⼊库
右侧就有了这些图标
新建⼀个项⽬
这样在我们的项⽬中，就有了这些图标
下载后的压缩包，
把下⾯这⼏个拷贝到assets⽂件夹下
Unicode这种使⽤⽅式
路径都改成assets/font
使⽤
class必须定义为iconfont。

在标签的中间写unicode
设置颜⾊
红⾊
symbol⽅式
类名和app.vue内定义的保持⼀致。

图标就变⼩了
添加多⾊图标
添加到项⽬中，然后下载到本地
原来的font下的⽂件删除掉，复制新的
带颜⾊的
设置⼤⼩
font class形式
这是iview的icon组件返回的形式
这⾥注释掉，不使⽤iconfont.js了。

引⼊这个css
⾸先是⽤i标签，然后⾥⾯是iconfont。

复制类名
这是⼀个before伪类，把编码content写进去。

这种防晒也是可以的
封装组件
icon作为属性，传进来，是图标的名称，计算属性⽣成类名数组。

我们的图标前⾯都icon前缀，所有icon-拼接上我们的图标名称就可以了。

font-size和color加到style⾥⾯。

为了风格统⼀，使⽤这个颜⾊
⼀定要确保引⼊了iconfont.css
在全局引⼊
icon-font建议是⼩写加横线的形式注册组件。

这样就全局注册了组件，在任何的地⽅都可以⽤了。

记得要导出这个组件
symbol组件封装
导出这个组件
之前的例⼦代码复制过来
这⾥的名称和font-size的值都是要传进来的
全局主策这个组件
main.js内还是要引⼊iconfont.js
字体的⼤⼩绑定
style 也是⼀个计算属性
传⼊⼤⼩为100
本节代码
结束。