阿里矢量图标库的使用方法

官网

1、注册账号
2、寻找图标，添加至购物车，注意尽量选取同一套图标库的图标。
3、打开购物车将图标添加至项目（或者点击右边+号，新建项目）。
4、找到我的项目，使用线上链接代码或者下载至本地

使用线上图标

方法一：unicode引用

1、在base.css文件写入字体图标代码

@font-face {
  font-family: 'iconfont';
  /* project id 1968940 */
  src: url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.eot');
  src: url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.woff') format('woff'),
    url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1968940_glb7ccfvcyc.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

2、在main.js全局配置引用base.css

import '@/css/base.css'

3、组件中使用
这里的就是字体图标对应的Unicode

<span class="iconfont"
      style="color:red">&#xe787;</span>
<i class="iconfont">&#xe787;</i>

4、优缺点
1、兼容性最好，支持ie6+，及所有现代浏览器。
2、支持按字体的方式去动态调整图标大小，颜色等等。
3、但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。（彩色图标建议使用symbol引用方式）

方法二：font-class引用

1、全局引入css外联
在public文件夹下的index.html文件引入css外联


2、组件中使用
这里的icon-undo就是字体图标对应的class

<button type="button"
        class="btn btn-primary">
  <i class="iconfont icon-undo"
     style="color:red"></i>
  重置
</button>

3、优缺点
1、兼容性良好，支持ie8+，及所有现代浏览器。
2、相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
3、因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
4、不过因为本质上还是使用的字体，所以多色图标还是不支持的。

方法三：symbol引用

1、全局引入js外联以及配置样式

在public文件夹下的index.html文件引入js外联以及配置全局css样式


2、组件中使用
这里的#iconbaoguanren-73就是字体图标对应的symbol

<button type="button"
         class="btn btn-primary">
   <svg class="icon"
        aria-hidden="true">
     <use xlink:href="#iconbaoguanren-73"></use>
   </svg>
 </button>

3、优缺点

1、支持多色图标了，不再受单色限制。
2、通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
3、兼容性较差，支持 ie9+,及现代浏览器。
4、浏览器渲染svg的性能一般，还不如png。

使用下载的图标

下载图标，解压缩包，得到如下文件

方法一：unicode方式

1、将解压后的文件,如下框选中的五个文件拷贝至项目中的font文件夹中

2、在base.css文件写入字体图标代码

本地文件引用

@font-face {
	font-family: 'iconfont';
	src: url('../font/iconfont.eot');
	src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../font/iconfont.woff2') format('woff2'),
		url('../font/iconfont.woff') format('woff'),
		url('../font/iconfont.ttf') format('truetype'),
		url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

与线上使用相比，仅仅是src变成了本地链接，剩下的步骤是一样的
3、在main.js全局配置引用base.css
4、组件中使用
这里的就是字体图标对应的Unicode

<span class="iconfont"
      style="color:red">&#xe787;</span>
<i class="iconfont">&#xe787;</i>

方法二：font-class

看解压文件demo_index.html

方法三：symbol

看解压文件demo_index.html

ant design of vue自定义字体图标

我的博客