如何在Vue.JS中使用圖標(biāo)組件
原文鏈接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30
本文對原文進行一次翻譯,并從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)缺點:
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>
在我維護的VueAwesome(內(nèi)置了FontAwesome圖標(biāo)的組件庫)中用了這個方案,同時我認(rèn)為這是當(dāng)前最符合人機工程學(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.用一個單一的維護(如<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)的使用方式),這種試在人機工程和直觀性上有些損失,但沒有方案1的缺點。
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選項注冊。不過就像我們知道的,如果一個組件要用很多圖標(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)化的點。正常使用工廠函數(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)組件的詳細內(nèi)容,更多關(guān)于Vue.JS中使用圖標(biāo)組件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作
這篇文章主要介紹了vue element 關(guān)閉當(dāng)前tab 跳轉(zhuǎn)到上一路由操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07electron-vite工具打包后如何通過內(nèi)置配置文件動態(tài)修改接口地址
使用electron-vite?工具開發(fā)項目打包完后每次要改接口地址都要重新打包,對于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動態(tài)修改接口地址實現(xiàn)方法,需要的朋友可以參考下2024-05-05