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

时间:2024-02-16 07:53:08

  iconfont字体图标使用就不多说了,大致是几部:

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

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

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

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

  4、在代码中使用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>

  1、main.js里面导入:import \'./assets/iconfont/iconfont.js\'

  2、App.vue加上:

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

  3、使用方式略微不同

<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 属相。