vue自定义图标

一.图标库

1.1图标引用

图标引用可适用于移动端和web端,本文主要讲述web端的离线引用,其它平台可参考官方介绍.

1.1.1图标下载

• 注册登入

• 新建项目

• 项目设置

图上红圈处的引用名称为了防止与本地项目中的其它引用冲突,可自行设置

• 搜索并添加你需要的图标

• 将图标添加到你的项目中

• 进入刚才添加的项目,可以看到官方为我们提供了在线引用,但是为了减轻项目负载,我们这边使用本地引用.

• 下载至本地并解压

• 然后复制到项目中(assets文件夹中新建了一个icon文件夹);
  其中有一些demo和样例可以不用导入项目，但是为了给其他人一个参考最好全部拷入.

• 打开icnfont.css文件,设置图标属性及引用标签.

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

//添加引用标签,icon-test为我们一开始新建项目时的FontClass/Symbol前缀
[class^="icon-test"], [class*=" icon-test"] {
  font-family:"iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 66px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//设置指定图标属性
.icon-test-icon-test10 {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

---

1.1.2页面引用

①在你的xxx.vue页面引入css文件和js文件

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

Unicode与Font class方式不支持多色图标;Symbol方式支持多色图标所以这边引入了js文件.图标详情及设置可去对应的.css文件修改.

<div>
    <i class="iconfont">&#xe615;</i>
    <i class="iconfont icon-test-icon-test2"></i>
    
    <el-button type="primary" class="icon-test-icon-test17" @click="" style="padding:6px 4px;width: 70px"></el-button>
    
    <el-button type="primary" class="icon-test-icon-test14" @click="" style="padding:6px 4px;width: 70px"></el-button>
    
    <i class="iconfont icon-test-icon-test10"></i>
    
    <svg class="icon-test-icon-test10" aria-hidden="true">
        <use xlink:href="#icon-test-icon-test10"></use>
    </svg>
    
    <svg class="icon-test-icon-test8" aria-hidden="true">
         <use xlink:href="#icon-test-icon-test8"></use>
    </svg>
</div>

• Unicode 方式:

<i class="iconfont">&#xe615;</i>

• Font class方式:

<i class="iconfont icon-test-icon-test2"></i>

• Symbol方式:

<svg class="icon-test-icon-test10" aria-hidden="true">
    <use xlink:href="#icon-test-icon-test10"></use>
</svg>

• 效果图:

---

1.1.3制作与上传

由于本人不是专业的UI,对图标制作这块并未做过多深入研究,想了解的朋友可以参考官网.

---

注:本文所有图标来源:阿里巴巴矢量图标库