vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

　　iconfont字体图标使用就很少说了，大体是几部：

　　一、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压

　　二、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码

　　三、在main.js导入iconfont.css文件

import './assets/iconfont/iconfont.css'

　　四、在代码中使用class="iconfont icon-XXX"就可使用图标了

　　可是上面的图标都是黑色的，下面介绍如何引入彩色图标：

　　下载代码到本地，打开压缩包后，咱们能够看到 demo_symbol.html 打开后显示的是彩色图标

　　注：解压以后能够看到3个demo的html文件，打开能够看到图标样式，和使用方法

　　官方提供的教程：

symbol引用 这是一种全新的使用方式，应该说这才是将来的主流，也是平台目前推荐的用法。相关介绍能够参考这篇文章 这种用法实际上是作了一个svg的集合，与另外两种相比具备以下特色： 支持多色图标了，再也不受单色限制。 经过一些技巧，支持像字体那样，经过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 浏览器渲染svg的性能通常，还不如png。 使用步骤以下： 第一步：引入项目下面生成的symbol代码： <script src="./iconfont.js"></script> 
 第二步：加入通用css代码（引入一次就行）： <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 
 第三步：挑选相应图标并获取类名，应用于页面： <svg class="icon" aria-hidden="true"> <use xlink:href="#tiebazs-xxx"></use> </svg> 

　　一、main.js里面导入：import './assets/iconfont/iconfont.js'

　　二、App.vue加上：

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

　　三、使用方式略微不一样

<svg class="icon myIconStyle" aria-hidden="true"> 　　<use :xlink:href="'#' + dbIcon[item.type]"></use> </svg>

.myIconStyle{
　　width 40px
　　height 40px
}

　　myIconStyle是自定义的样式

　　补充：aria-hidden 的意思

　　图标的可访问性

　　现代的辅助技术可以识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了不屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤为是当图标纯粹做为装饰用途时），咱们为这些图标设置了 aria-hidden="true" 属性。

　　若是你使用图标是为了表达某些含义（不单单是为了装饰用），请确保你所要表达的意思可以经过被辅助设备识别，例如，包含额外的内容并经过 .sr-only 类让其在视觉上表现出隐藏的效果。

　　若是你所建立的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其余的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其做用了。这种状况下，你能够为控件添加 aria-label 属相。