9012年了你还在用单色图标？(iconfont多色图标详解)

作者: LinDaiDai_霖呆呆 | 来源:发表于2019-07-03 21:03 被阅读0次

前言

记录iconfont的三种使用方式
多色图标出来已经很久了，现在才拿出来说貌似有点过时...
但为了方便自己以后知道怎么使用，也为了让更多刚入门的新手熟悉iconfont，还是决定写一篇比较详细的文章来记录它的使用方式。
本文主要是参考花叔的文章：手摸手，带你优雅的使用 icon

前期准备

在iconfont官网上创建一个自己的账号，并创建一个项目。在官网上挑选响应的图标添加进项目中。比如我这里有一个名为vuepress-bolg的项目，添加了一个github的图标。

image.png

unicode

最基础的一种使用方式，就是使用unicode。
它的主要优点是：

兼容性最好，支持ie6+
支持按字体的方式去动态调整图标大小，颜色等等
但是缺点也很明显：
不支持多色图标
在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
第一步
在你项目的css中引入字体
如果你的项目是使用像vue这样的前端框架开发的话，你可以在公共的css中引入它：
比如我的vue项目下有一个common.css:

/* common.css */

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

注：上面的内容不是复制我的，而是复制你在iconfont项目上Unicode下的内容。这段代码的作用是远程的引入iconfont 字体。你可以不需要下载到本地。
第二步
定义字体
将字体引入到了项目中的话，你需要定一个类，让它的字体类型为iconfont：

/* common.css */

@font-face {
  font-family: 'iconfont';  /* project id 872514 */
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot');
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.woff') format('woff'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.svg#iconfont') format('svg');
}
.icon-online { /* 定义一个类 */
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

由于我的字体是远程引入的，所以这里我就取名为icon-online，当然你也可以使用其它的命名。
第三步
页面上使用unicode

<i class="icon-online">&#xe68c;</i>

创建一个i标签，然后给它设置class，之后在标签中写上你要使用的字体的代码。这样在页面上显示的就是你在对应的图标啦。
可以看到上面的这种unicode有一个很大的弊端，就是你看到代码里的这串，根本不知道它是个什么图标，需要打开iconfont在你的项目上找对应的代码才知道。所以有了另一种font-class的方式。

font-class

第二种方式就是使用font-class
它的优点是：

兼容性良好，支持ie8+
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
第一步
找到iconfont项目下的Font class,并复制它：
fontClass
然后在css中引用：

/* common.css */

@import "//at.alicdn.com/t/font_872514_urq1z9ughp.css";
@font-face {
  font-family: 'iconfont';  /* project id 872514 */
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot');
  src: url('//at.alicdn.com/t/font_872514_urq1z9ughp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.woff') format('woff'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_872514_urq1z9ughp.svg#iconfont') format('svg');
}
.icon-online { /* 定义一个类 */
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

第二步
然后你在使用的时候就可以将unicode的方式改为font-class啦：

<i class="icon-online icon-github"></i>

注意⚠️：
不过你的前端项目要是用到了多组iconfont，一定要主要命名空间的问题。

不管是unicode还是font-class都只支持单色的图标，设置了iconfont的i标签其实就相当于一个字了，也就是可以根据color来控制它的字体颜色。但是你并不能使用多色。

symbol

随着IE慢慢的退出历史舞台，svg-icon使用形式慢慢成为主流和推荐的方法。
它主要有一下几个优点：

支持多色图标了，不再受单色限制。
支持像字体那样通过font-size,color来调整样式。
支持 ie9+
可利用CSS实现动画。
减少HTTP请求。
矢量，缩放不失真
可以很精细的控制SVG图标的每一部分
使用方式：
第一步
引入js
引入的方式有两种：

在iconfont的项目里，点击下载至本地，它会把这个项目相关的字体文件都下载下来。找到下载下来里面的iconfont.js文件，把它拷贝到你的前端项目里(只需要拷贝这一个文件就可以了)，然后在前端代码里引用这个js:

<script src="./iconfont.js"></script>

远程引入，不需要下载这个iconfont.js，而是直接用iconfont项目里生成的那个地址：

<script src="//at.alicdn.com/t/font_872514_urq1z9ughp.js"></script>

第二步
设置通用的类名

/* common.css */
.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

第三步
挑选相应图标并获取类名，应用于页面：

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

注意⚠️
在xlink:href="#"后面接的就是你图标的font-class，比如我这里github的图标就是icon-github。前缀icon-并不是所有图标都会有，要根据自己图标的font-class来填写它。
另外，使用symbol这种方式是不需要引用woff|eot|ttf|这些字体库的，也就是上面的unicon和font-class两步都可以省去。

现在你可以去iconfont彩色图标库挑选你想要的彩色图标应用在页面中啦。

创建公共的多色图标组件

完成上面的第三步，你已经可以在项目中使用多色的图标了。
但是作为一个有"追求"的前端，怎么能允许在每次要用到图标的时候就写那么一长串的html标签呢。我相信，你首先想到的就是把它封装成一个组件。(如果你真的想到了，恭喜你，和我心有灵犀🧡)
下面以在vue中创建多色图标组件为例：
第一步

创建IconSvg组件

首先在你的组件文件夹中创建一个IconSvg.vue文件：

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  font-size: 18px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第二步

注册为全局组件

由于多色图标可能会在多处使用，所以我建议你将这个组件注册为全局的组件。
比如我会在components文件夹下创建一个GlobalComponent文件夹，文件夹目录为：

|-src
  |-components
    |-GlobalComponent
      |-index.js
      |-IconSvg.vue

然后在index.js中，将其注册为全局组件：

// 存放一些全局的组件
import Vue from 'vue'
import IconSvg from './components/IconSvg'
//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

最后记得在main.js中引入：

// main.js
...
import '@components/GlobalComponent' // 全局组件
...

第三步

使用多色图标组件

使用的时候只需要指定对应的font-class就可以了：

<icon-svg icon-class="icon-github" />

是不是感觉方便多了呢？
由于icon-svg也是一个组件，所以你还可以给它加上额外的属性，比如：

<icon-svg
   class="cur_pointer"
   style="font-size: 20px;"
   icon-class="icon-github"
   title="我是github图标"
/>

但是在使用过程中，我碰到了一个问题。
就是在你想给图标添加一个事件的时候，却是无效的。
比如我先给图标添加一个点击事件：

<icon-svg icon-class="icon-github"  @click="onClick"/>

click事件并没有触发。
暂时的解决方案：使用事件修饰符native：

<icon-svg icon-class="icon-github"  @click.native="onClick"/>

有更好解决方案的大佬请评论区留言，谢谢...

注⚠️
我喜欢使用iconfont的还一个好处是它可以在一个项目中添加多个项目成员，这样在团队进行项目开发的时候是十分方便的。

后语

参考文章：手摸手，带你优雅的使用 icon
知识无价，支持原创

9012年了你还在用单色图标？(iconfont多色图标详解)

前言

前期准备

unicode

font-class

symbol

创建公共的多色图标组件

后语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读