官方给了3种引入方式（这里只详细说明两种）
一、font-class引用
- 兼容性良好，支持ie8+，及所有现代浏览器。
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
- 不支持多色图标。
使用步骤：
第一步：新建项目，将项目用到的图标加入项目
第二步：点击新建项目中的下载至本地，新建iconFont文件夹，将解压后的文件复制到该文件夹下
第三步：在Main.js里引入index.css
复制代码
1
2import '../../shared/library/iconFont/index.css'
第四步：挑选相应图标并获取类名，应用于页面
复制代码
1
2<i class="iconfont icon-xxx"></i>
二、symbol 引用
平台推荐用法
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
使用步骤：
第一步：同上
第二步：在index.html里加入下面这行代码
复制代码
1
2
3// 项目下的图标在线地址 <script type="text/javascript" src="https://at.alicdn.com/t/font_2797108_z8bjfxy68us.js"></script>
第三步：加入css通用代码（引入一次即可）
复制代码
1
2
3
4
5
6
7
8
9<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第四步：挑选相应图标并获取类名，应用于页面
复制代码
1
2
3
4<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
本地引用是将下载到本地的js引用到main.js里，其他同操作
最后
以上就是阳光冰棍最近收集整理的关于vue项目引入阿里巴巴矢量图标库图标的全部内容，更多相关vue项目引入阿里巴巴矢量图标库图标内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复