Icon是前端基础逼格的体现,开发中常用到的。这里推荐使用阿里的图标库。
Iconfont-阿里巴巴矢量图标库www.iconfont.cn一、阿里图标库使用
先来快速入门阿里的图标库。先注册账号,
搜索图标,找到自己需要的图标,鼠标放在该图标上,会显示三个选项,点击“购物车图标”,添加入库。如下图:
选择完需要的图标后,点击右上角的购物车图标,将所选的图标添加到自己的项目中,如下图:
添加项目时,可以新建项目,或选择已有项目,如下图:
进入自己的项目,查看项目中的图标,如下图:使用阿里的iconfont有三种方法,分别是unicode、fontclass、symbol;下方是样式生成的链接,后面有实例来讲如何使用。
鼠标放到对应的图标上,可以下载图标,修改图标等
二、封装组件
这里你对阿里的iconfont已经了解了,接下来的问题是如何在我们的项目中使用icon,即引用icon。官方教程:
Iconfont-阿里巴巴矢量图标库www.iconfont.cnfont-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:拷贝项目下面生成的fontclass代码:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
为了在项目中更快速方便引用icon,接下来封装一个icon组件,代码如下:
<template>
<i :class="iconName" style="font-size: 15px"></i>
</template>
<script>
export default {
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName () {
return `iconfont icon-${this.iconClass}`
}
}
}
</script>
<style scoped>
@import "//at.alicdn.com/t/font_866325_h72r0zr0dww.css";
</style>
组件放在我习慣放在icon目录下。接下来全局注册组件。在main.js文件中加入以下代码:
import IconSvg from './icon/icon-svg'
// 全局注册icon-svg
Vue.component('icon-svg', IconSvg)
直接在项目需要icon的组件引用所需的icon图标即可,例如:
<icon-svg icon-class="icon_wangye"></icon-svg>
<icon-svg icon-class="cai"></icon-svg>
<icon-svg icon-class="tudou"></icon-svg>
注意,每次在阿里的iconfont项目中添加删除icon,都会引起icon项目生成的css链接变化,所以在项目添加icon后,需要在icon组件替换最新生成的链接
@import"//at.alicdn.com/t/font_866325_h72r0zr0dww.css";