vue中手动封装iconfont组件解析(三种引用方式的封装和使用)
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
在线使用 有时候会因网络问题影响用户体验;直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护。
封装基于阿里巴巴图标库的项目图标。
准备
将项目内的图标下载至本地
在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件
解压下载到本地的字体图标文件,放到 iconfont 文件夹下
如过项目中没有下载 css-loader 依赖包,就进行下载,否则会报错
封装
unicode引用封装
1 2 3 4 5 6 | < template > < div > < span class = "iconfont" v-html = "name" ></ span > < slot ></ slot > </ div > </ template > |
1 2 3 4 5 6 7 8 9 10 11 | <script> export default { name: 'iconUnicode' , props: { name: { type: String, required: true } } } </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style scoped> @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; } </style> |
font-class引用封装
1 2 3 4 5 6 | < template > < div > < span class = "iconfont" :class = "iconTag" ></ span > < slot ></ slot > </ div > </ template > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> import "../assets/iconfont/iconfont.css" ; export default { name: "iconFontClass" , props: { name: { type: String, required: true } }, computed: { iconTag() { return `icon-${ this .name}`; } } }; </script> |
1 2 3 4 5 6 7 8 9 | <style scoped> .iconfont { font-family : "iconfont" !important ; font-size : 2em ; font-style : normal ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> |
symbol引用封装
1 2 3 4 5 6 7 8 | < template > < div > < svg class = "icon" aria-hidden = "true" > < use :xlink:href = "iconTag" rel = "external nofollow" ></ use > </ svg > < slot ></ slot > </ div > </ template > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> import "../assets/iconfont/iconfont.js" ; export default { name: "iconSymbol" , props: { name: { type: String, required: true } }, computed: { iconTag() { return ` #icon-${this.name}`; } } }; </script> |
1 2 3 4 5 6 7 8 9 | <style scoped> . icon { width : 2em ; height : 2em ; vertical-align : -0.15em ; fill: currentColor; overflow : hidden ; } </style> |
引入
全局引入
1 2 3 4 | // main.js // 引入并注册全局组件 import iconUnicode from './ui/iconUnicode' Vue.component( 'iUnicode' , iconUnicode) |
局部引入
1 2 3 4 5 6 7 8 9 10 | // 局部引入并使用 import iSymbol from "../ui/iconSymbol" import iFont from "../ui/iconFontClass" export default { //注册 components: { iSymbol, iFont } }; |
使用
1 2 3 4 5 6 7 | < template > < div class = "box" > < i-symbol name = "fanhuidingbu" >Symbol</ i-symbol > < i-font name = "fanhuidingbu" >Font class</ i-font > < i-unicode name = "" style = "font-size:30px;color:#333" >Unicode</ i-unicode > </ div > </ template > |
效果图:
最后
也可以通过在线链接进行封装,但不管是在线使用还是本地使用,每次在项目中添加新图标之后都要更新一下 本地iconfont文件 或者 在线链接 。
demo 已上传 GitHub
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue项目中,main.js,App.vue,index.html的调用方法
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09前端XSS攻击场景详解与Vue.js处理XSS的方法(vue-xss)
这篇文章主要给大家介绍了关于前端XSS攻击场景与Vue.js使用vue-xss处理XSS的方法,介绍了实际工作中渲染数据时遇到XSS攻击时的防范措施,以及解决方案,需要的朋友可以参考下2024-02-02
最新评论