vue引入阿里图标库（iconfont）单色和彩色图标

2019年9月15日 196次阅读 来源: 默默

使用组件库时，图标往往不能满足需求，所以我们常常需要用到第三方图标库。阿里图标库是我们的常客。有两种形式，一是单色，二是彩色的。

单色图标的引用

  • 1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压
  • 2、在项目src目录新建目录font，用于存放刚才下载解压的代码

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

    import './font/iconfont/iconfont.css'

  • 4、在代码中使用class=”iconfont icon-XXX”就可以使用图标了

    这是直接引用，而像Element-UI则是将其与自己的图标进行了融合。

    Element-UI引入第三方图标库：

    • 在iconfont官网选图标，加入购物车，加入项目
    • 编辑项目，修改FontClass/Symbol 前缀为：el-icon-xx （xx为自己定义的类名，注意不要与Element自身的图标类名重合）
    • 将图标项目下载至本地，解压
    • 在项目src目录新建目录font，用于存放刚才下载解压的代码

    • 打开iconfont.css文件，将以下代码加进去：

      [class^="el-icon-my"],
[class*=" el-icon-my"]/*这里有空格*/*
{
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

《vue引入阿里图标库（iconfont）单色和彩色图标》

  • 在main.js导入iconfont.css文件
    import ‘./font/iconfont/iconfont.css’
  • 打开在阿里icon的项目，复制你想要的图标代码
  • 使用方式与Element-UI自带的图标一样

《vue引入阿里图标库（iconfont）单色和彩色图标》

彩色图标

  • 1、在iconfont官网选图标，加入购物车，加入项目，注意选择Symbol，再下载到本地
  • 2、在项目src目录新建目录font，用于存放刚才下载解压的代码，或者只拷贝其 iconfont.js文件
  • 3、在main.js导入iconfont.js文件

  • 4、写入图标代码

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

    注意： 在这里要用#加class名

  • 5、写入svg图标通用样式

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

补充：aria-hidden 的意思

　　图标的可访问性

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

感谢大神的分享：
https://www.cnblogs.com/golov…
https://www.jianshu.com/p/59d…

    原文作者：默默
    原文地址: https://segmentfault.com/a/1190000017548712
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞