如何在Vue.JS中使用圖標(biāo)組件
原文鏈接：https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30
本文對原文進(jìn)行一次翻譯，并從React開發(fā)者的角度簡單地做了一些解讀。
此文不包含字體圖標(biāo)和SVG sprite。僅在此討論允許用戶按需導(dǎo)入的圖標(biāo)系統(tǒng)。
There are three major ways of exposing API of an icon component in Vue.js and each one of them has its own pros & cons:
在Vue.js的生態(tài)里，有3種主流的API形態(tài)，它們有各自的優(yōu)缺點(diǎn)：
1.使用單一的組件（如<v-icon>），讓乃通過name或者type屬性來指定真正的圖標(biāo)。
圖標(biāo)的數(shù)據(jù)通過一個全局的“池子”來注冊。
// v-icon/flag.js
import Icon from 'v-icon'
import { mdiFlag } from '@mdi/js'
Icon.add('flag', mdiFlag)
然后這樣子使用：
<template>
<v-icon name="flag" />
</template>
<script>
import VIcon from 'v-icon'
import 'v-icon/flag'
export default {
components: {
VIcon
}
}
</script>
在我維護(hù)的VueAwesome（內(nèi)置了FontAwesome圖標(biāo)的組件庫）中用了這個方案，同時我認(rèn)為這是當(dāng)前最符合人機(jī)工程學(xué)的形式。不過圖標(biāo)的name屬性和那些純副作用的模塊的導(dǎo)入之間的關(guān)系比較隱式，圖標(biāo)的數(shù)據(jù)也在全局注冊。如果你有多個不同版本的v-icon，就可能出現(xiàn)問題。
FontAwesome官方的Vue.js組件用了一個稍微不同的方案，它們讓用戶自己主動把圖標(biāo)加到全局的池子中（也可能我不應(yīng)該把這個方式歸類到這個方案中）：
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
library.add(faUserSecret)
2.用一個單一的維護(hù)（如<v-icon），用戶通過data或content之類的屬性創(chuàng)建真正的圖標(biāo)。
用戶主動把圖標(biāo)的數(shù)據(jù)傳遞給組件：
<template>
<v-icon :content="mdiFlag" />
</template>
<script>
import VIcon from 'v-icon'
import { mdiFlag } from '@mdi/js'
export default {
components: {
VIcon
},
created() {
Object.assign(this, {
mdiFlag
})
}
}
</script>
這是Vuetify支持的方式（Vuetify通過這種方式支持多種圖標(biāo)的使用方式），這種試在人機(jī)工程和直觀性上有些損失，但沒有方案1的缺點(diǎn)。
3.每個組件代表不同的圖標(biāo)（如<icon-flag />、<icon-star />等）。
這個方案里，每個組件通過一個圖標(biāo)工廠創(chuàng)造出來：
// icon-flag.js
import { mdiFlag } from '@mdi/js'
import { createIcon } from 'v-icon'
export default createIcon('flag', mdiFlag)
并通過這種方式使用：
<template>
<icon-flag />
</template>
<script>
import { IconFlag } from 'v-icon'
export default {
components: {
VIcon,
IconFlag
}
}
</script>
這種方案在React社區(qū)里被廣泛采用，我在本文的后續(xù)部分將展開討論。
每個組件代表一個圖標(biāo)
我將更深入地說一下這種方案在Vue.js中的使用。
在Vue.js中，模板和腳本是分開的，組件通過components選項(xiàng)注冊。不過就像我們知道的，如果一個組件要用很多圖標(biāo)的話，這種方式會挺麻煩。
Vue 2
<template>
<div>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? IconFlag : IconStar" />
</div>
</template>
<script>
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
data() {
return {
flag: true
}
},
created() {
Object.assign(this, {
IconFlag,
IconStar
})
}
}
</script>
可以看到如果想用圖標(biāo)的is綁定，我們必須把components手動暴露到渲染上下文中。我們可以用字符串去替換組件定義來繞過，但對代碼檢查和類型系統(tǒng)來說就不那么友好。
<template>
<div>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? 'icon-flag' : 'icon-star'" />
</div>
</template>
<script>
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
data() {
return {
flag: true
}
}
}
</script>
Vue 3
<template>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? IconFlag : IconStar" />
</template>
<script>
import { ref } from 'vue'
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
setup() {
const flag = ref(true)
return {
flag,
IconFlag,
IconStar
}
}
}
</script>
如果用:is綁定，<script>部分會變成這樣：
import { ref } from 'vue'
import { IconFlag, IconStar } from 'foo-icons'
export default {
components: {
IconFlag,
IconStar
},
setup() {
const flag = ref(true)
return {
flag
}
}
}
如果我們采納<script components>這樣的形式的話：
<template>
<!-- inline -->
<icon-flag />
<!-- conditional -->
<icon-flag v-if="flag" />
<icon-star v-else />
<!-- dynamic -->
<component :is="flag ? 'icon-flag' : 'icon-star'" />
</template>
<script components>
export { IconFlag, IconStar } from 'foo-icons'
</script>
<script>
import { ref } from 'vue'
export default {
setup() {
const flag = ref(true)
return {
flag
}
}
}
</script>
或者用<script setup>提案：
<script setup>
import { ref } from 'vue'
export const flag = ref(true)
</script>
后記
這很篇文章很精練地介紹了在Vue中按需引入圖標(biāo)的方式，與React社區(qū)做比較，可以看到兩個生態(tài)的差異還是存在的。在React社區(qū)中，使用第3種方式（每個圖標(biāo)一個組件）非常普遍，如NPM上排名較高的react-icons和知名組件庫@ant-design/icons、@material-ui/icons都是這一形態(tài)。
這可能是由于React社區(qū)中并不傾向?qū)ⅰ敖M件”這一概念特殊化，組件就是普通的函數(shù)、普通的類，所以它的復(fù)用于其它的函數(shù)、類的復(fù)用相同，如同lodash會導(dǎo)出很多個工具函數(shù)一樣，一個圖標(biāo)庫會導(dǎo)出很多個圖標(biāo)組件非常合理。
在文中對于使用createIcon工廠函數(shù)的使用有一些可以優(yōu)化的點(diǎn)。正常使用工廠函數(shù)會讓創(chuàng)建的組件不可被tree shaking，其原因是語法分析會認(rèn)為createIcon函數(shù)本身是有副作用的，因此這個調(diào)用不能被安全地刪除?？梢酝ㄟ^terser的特殊注釋來標(biāo)記：
// icon-flag.js
import { mdiFlag } from '@mdi/js'
import { createIcon } from 'v-icon'
export default /*#__PURE__*/createIcon('flag', mdiFlag)
以上就是如何在Vue.JS中使用圖標(biāo)組件的詳細(xì)內(nèi)容，更多關(guān)于Vue.JS中使用圖標(biāo)組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無限加載瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue?3?中動態(tài)賦值?ref?的應(yīng)用示例解析
Vue3引入了Composition?API,其中ref是核心概念,允許開發(fā)者聲明響應(yīng)式狀態(tài),本文通過一個具體示例,探討了在Vue3中如何使用ref進(jìn)行動態(tài)賦值,尤其是在處理DOM相關(guān)操作時的應(yīng)用,通過ref動態(tài)賦值,可以有效管理組件內(nèi)的狀態(tài),提高代碼的可維護(hù)性和清晰度2024-09-09
vue2 el-checkbox-group復(fù)選框無法選中問題及解決
這篇文章主要介紹了vue2 el-checkbox-group復(fù)選框無法選中問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
React-Router 路由庫，是官方維護(hù)的路由庫，事實(shí)上也是唯一可選的路由庫。它通過管理 URL，實(shí)現(xiàn)組件的切換和狀態(tài)的變化，開發(fā)復(fù)雜的應(yīng)用幾乎肯定會用到2022-09-09
nvm全英文也叫node.js version management，是一個nodejs的版本管理工具，這篇文章主要介紹了Vue中nvm-windows的安裝與使用,需要的朋友可以參考下2023-02-02
Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流
本文主要介紹了Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
關(guān)于element-ui?select?下拉框位置錯亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯亂問題解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
羊了個羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本
這篇文章主要為大家介紹了羊了個羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue?scss后綴文件background-image路徑錯誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯誤的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04