共计 872 个字符，预计需要花费 3 分钟才能阅读完成。
我的项目引入阿里图标库
一. Symbol 形式（多色）
- 反对多色图标了，不再受单色限度
- 通过一些技巧，反对像字体那样，通过 font-size,color 来调整款式
- 兼容性较差，反对 ie9+, 及古代浏览器
- 浏览器渲染 svg 的性能个别，不如 png
- 前端引入 js 链接
<script src=”http://at.alicdn.com/t/font_2326420_a5e2tkgk7u9.js”></script>
2. 因为我的项目中常常会用到 icon, 所以封装成了组件, 而后全局注册组件, 不便团队应用.
<template>
<svg class="svg-icon"
aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'IconSvg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {iconName () {return `#${this.iconClass}`
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
font-size: 18px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>二. font-class 形式（单色）
- 兼容性良好，反对 ie8+，及所有古代浏览器
- 因为应用 class 来定义图标，所以当要替换图标时，只须要批改 class 外面的 unicode 援用
- 相比于 unicode 语意明确，书写更直观。能够很容易分辨这个 icon 是什么
-
不过因为实质上还是应用的字体，所以多色图标还是不反对的
在线引入
1. 在 html 中应用 link
<link rel=”stylesheet” href=”http://at.alicdn.com/t/font_1957918_fj77cbthvj.css”>
2. 而后筛选相应的类名退出页面本地引入
正文完
