在线使用 有时候会因网络问题影响用户体验；直接放在 本地使用 ，如果过多使用也会显得繁琐，所以就可以将其封装成一个组件，也方便维护。准备
?
封装基于阿里巴巴图标库的项目图标。
?
初次使用iconfont项目参考： 点我查看使用前的准备和三种引用方式介绍
- 将项目内的图标下载至本地
文章图片
- 在了路径
src/assets下新建文件夹iconfont，用来存放字体图标的本地文件 - 解压下载到本地的字体图标文件，放到 iconfont 文件夹下
- 如过项目中没有下载
css-loader依赖包，就进行下载，否则会报错
npm install css-loader -D
@font-face {
/* Unicode*/
font-family: "iconfont";
src: url("../assets/iconfont/iconfont.eot");
src: url("../assets/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
url("../assets/iconfont/iconfont.woff2") format("woff2"),
url("../assets/iconfont/iconfont.woff") format("woff"),
url("../assets/iconfont/iconfont.ttf") format("truetype"),
url("../assets/iconfont/iconfont.svg#iconfont") format("svg");
}
.iconfont {
font-family: "iconfont" !important;
font-size: 2em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
font-class引用封装
.iconfont {
font-family: "iconfont" !important;
font-size: 2em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
symbol引用封装
.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
引入 全局引入
// main.js// 引入并注册全局组件
import iconUnicode from './ui/iconUnicode'
Vue.component('iUnicode',iconUnicode)局部引入
// 局部引入并使用
import iSymbol from "../ui/iconSymbol"
import iFont from "../ui/iconFontClass"export default {
//注册
components: {
iSymbol,
iFont
}
};
使用
Symbol
Font class
Unicode 效果图：
文章图片
最后 也可以通过在线链接进行封装，但不管是在线使用还是本地使用，每次在项目中添加新图标之后都要更新一下 本地iconfont文件 或者 在线链接 。
【前端|vue中手动封装iconfont组件（三种引用方式的封装和使用）】demo 已上传 GitHub
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue.js组件开发
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结