vue项目引入阿里巴巴矢量图标库图标

官方给了3种引入方式（这里只详细说明两种）

一、font-class引用

• 兼容性良好，支持ie8+，及所有现代浏览器。
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
• 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
• 不支持多色图标。

使用步骤：

第一步：新建项目，将项目用到的图标加入项目

第二步：点击新建项目中的下载至本地，新建iconFont文件夹，将解压后的文件复制到该文件夹下

第三步：在Main.js里引入index.css

import '../../shared/library/iconFont/index.css'

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

<i class="iconfont icon-xxx"></i>

二、symbol 引用

平台推荐用法

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。
  使用步骤：

第一步：同上

第二步：在index.html里加入下面这行代码

// 项目下的图标在线地址
<script type="text/javascript" src="https://at.alicdn.com/t/font_2797108_z8bjfxy68us.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="#icon-xxx"></use>
</svg>

本地引用是将下载到本地的js引用到main.js里，其他同操作

最后

以上就是阳光冰棍为你收集整理的vue项目引入阿里巴巴矢量图标库图标的全部内容，希望文章能够帮你解决vue项目引入阿里巴巴矢量图标库图标所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。