@Wangww0925
2019-08-07T05:51:26.000000Z
字数 1396
阅读 508
阿里巴巴矢量图 使用
icon图标 vue-cli
阿里巴巴矢量图： https://www.iconfont.cn/
优点：资源丰富，文件较小。需要提前准备好所有的图标
使用：
- 1、打开 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3
- 2、登录
- 3、选择图标加入购物车
- 4、在购物车中 -> 添加至项目
- 5、下载
- 6、使用文档： https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
vue中使用 icon svg图标：
1、选择完图标至项目中
2、选择项目
3、选择symbol并生成代码
3、在index.html中引入生成的symbol代码
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>person</title></head><body><div id="app"></div><!-- built files will be auto injected --></body><!-- 阿里巴巴矢量图 icon 图标 --><script src="//at.alicdn.com/t/font_978219_dnsxi1bfnl.js"></script></html>
4、在公共的css中加入css代码
.svg-icon {fill: currentColor;overflow: hidden;}
注意： fill: currentColor; 不能省略
5、在.vue页面中使用图标
<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
注意：
class="svg-icon" 命名要与css中的样式一致
xlink:href="#icon-home" 的icon-home是项目中每个图标的代码【代码获取：项目中 -> 滑过图标 -> 复制代码 -> 粘贴 】
例子：
<template><div id="app"><ul><li><svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>首页</li><li><svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-classify"></use></svg>分类</li><li><svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-about-us"></use></svg>关于</li></ul></div></template><script>export default {name: 'App'}</script>
效果：
作者 wendy
2018 年 12月 21日
