vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
更新時(shí)間：2022年09月08日 11:00:05 作者：艾歡歡
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
在線使用 有時(shí)候會(huì)因網(wǎng)絡(luò)問(wèn)題影響用戶(hù)體驗(yàn)；直接放在 本地使用 ，如果過(guò)多使用也會(huì)顯得繁瑣，所以就可以將其封裝成一個(gè)組件，也方便維護(hù)。?
封裝基于阿里巴巴圖標(biāo)庫(kù)的項(xiàng)目圖標(biāo)。
準(zhǔn)備
將項(xiàng)目?jī)?nèi)的圖標(biāo)下載至本地
在了路徑 src/assets 下新建文件夾 iconfont ，用來(lái)存放字體圖標(biāo)的本地文件
解壓下載到本地的字體圖標(biāo)文件，放到 iconfont 文件夾下
如過(guò)項(xiàng)目中沒(méi)有下載 css-loader 依賴(lài)包，就進(jìn)行下載，否則會(huì)報(bào)錯(cuò)
npm install css-loader -D
封裝
unicode引用封裝
<template>
<div>
<span class="iconfont" v-html="name"></span>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'iconUnicode',
props: {
name: {
type: String,
required: true
}
}
}
</script>
<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引用封裝
<template> ? <div> ? ? <span class="iconfont" :class="iconTag"></span> ? ? <slot></slot> ? </div> </template>
<script>
import "../assets/iconfont/iconfont.css";
export default {
? name: "iconFontClass",
? props: {
? ? name: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? computed: {
? ? iconTag() {
? ? ? return `icon-${this.name}`;
? ? }
? }
};
</script><style scoped>
.iconfont {
? font-family: "iconfont" !important;
? font-size: 2em;
? font-style: normal;
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
}
</style>symbol引用封裝
<template> ? <div> ? ? <svg class="icon" aria-hidden="true"> ? ? ? <use :xlink:href="iconTag" rel="external nofollow" ></use> ? ? </svg> ? ? <slot></slot> ? </div> </template>
<script>
import "../assets/iconfont/iconfont.js";
export default {
? name: "iconSymbol",
? props: {
? ? name: {
? ? ? type: String,
? ? ? required: true
? ? }
? },
? computed: {
? ? iconTag() {
? ? ? return `#icon-${this.name}`;
? ? }
? }
};
</script><style scoped>
.icon {
? width: 2em;
? height: 2em;
? vertical-align: -0.15em;
? fill: currentColor;
? overflow: hidden;
}
</style>引入
全局引入
// main.js
// 引入并注冊(cè)全局組件
import iconUnicode from './ui/iconUnicode'
Vue.component('iUnicode', iconUnicode)
局部引入
// 局部引入并使用
import iSymbol from "../ui/iconSymbol"
import iFont from "../ui/iconFontClass"
export default {
//注冊(cè)
components: {
iSymbol,
iFont
}
};
使用
<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>
效果圖：
最后
也可以通過(guò)在線鏈接進(jìn)行封裝，但不管是在線使用還是本地使用，每次在項(xiàng)目中添加新圖標(biāo)之后都要更新一下 本地iconfont文件 或者 在線鏈接 。
demo 已上傳 GitHub
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法
這篇文章主要介紹了Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法，nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?"xxx&qu
這篇文章主要給大家介紹了關(guān)于vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?“xxx“:“TypeError:Cannot?read?properties?of?undefined的解決方法,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
最近在研究Vue的組件庫(kù),之前也用過(guò)$attrs和$listeners,官方文檔描述的不太詳細(xì),也沒(méi)有太好的例子,下面這篇文章主要給大家介紹了關(guān)于Vue中$attrs和$listeners詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue使用GraphVis開(kāi)發(fā)無(wú)限拓展的關(guān)系圖譜的實(shí)現(xiàn)
本文主要介紹了vue使用GraphVis開(kāi)發(fā)無(wú)限拓展的關(guān)系圖譜，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件推薦
在VSCode中添加好用的插件可以提高我們的開(kāi)發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下2022-12-12
詳解vue中v-model和v-bind綁定數(shù)據(jù)的異同
這篇文章主要介紹了vue中v-model和v-bind綁定數(shù)據(jù)的異同,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)瀑布流,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下2023-04-04