溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了在Vue.JS中使用圖標組件的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
此文不包含字體圖標和SVG sprite。僅在此討論允許用戶按需導入的圖標系統。
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的生態里，有3種主流的API形態，它們有各自的優缺點：
1.使用單一的組件（如<v-icon>），讓乃通過name或者type屬性來指定真正的圖標。
圖標的數據通過一個全局的“池子”來注冊。
// 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（內置了FontAwesome圖標的組件庫）中用了這個方案，同時我認為這是當前最符合人機工程學的形式。不過圖標的name屬性和那些純副作用的模塊的導入之間的關系比較隱式，圖標的數據也在全局注冊。如果你有多個不同版本的v-icon，就可能出現問題。
FontAwesome官方的Vue.js組件用了一個稍微不同的方案，它們讓用戶自己主動把圖標加到全局的池子中（也可能我不應該把這個方式歸類到這個方案中）：
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
library.add(faUserSecret)2.用一個單一的維護（如<v-icon），用戶通過data或content之類的屬性創建真正的圖標。
用戶主動把圖標的數據傳遞給組件：
<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通過這種方式支持多種圖標的使用方式），這種試在人機工程和直觀性上有些損失，但沒有方案1的缺點。
3.每個組件代表不同的圖標（如<icon-flag />、<icon-star />等）。
這個方案里，每個組件通過一個圖標工廠創造出來：
// 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社區里被廣泛采用，我在本文的后續部分將展開討論。
每個組件代表一個圖標
我將更深入地說一下這種方案在Vue.js中的使用。
在Vue.js中，模板和腳本是分開的，組件通過components選項注冊。不過就像我們知道的，如果一個組件要用很多圖標的話，這種方式會挺麻煩。
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>可以看到如果想用圖標的is綁定，我們必須把components手動暴露到渲染上下文中。我們可以用字符串去替換組件定義來繞過，但對代碼檢查和類型系統來說就不那么友好。
<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中按需引入圖標的方式，與React社區做比較，可以看到兩個生態的差異還是存在的。在React社區中，使用第3種方式（每個圖標一個組件）非常普遍，如NPM上排名較高的react-icons和知名組件庫@ant-design/icons、@material-ui/icons都是這一形態。
這可能是由于React社區中并不傾向將“組件”這一概念特殊化，組件就是普通的函數、普通的類，所以它的復用于其它的函數、類的復用相同，如同lodash會導出很多個工具函數一樣，一個圖標庫會導出很多個圖標組件非常合理。
在文中對于使用createIcon工廠函數的使用有一些可以優化的點。正常使用工廠函數會讓創建的組件不可被tree shaking，其原因是語法分析會認為createIcon函數本身是有副作用的，因此這個調用不能被安全地刪除。可以通過terser的特殊注釋來標記：
// icon-flag.js
import { mdiFlag } from '@mdi/js'
import { createIcon } from 'v-icon'
export default /*#__PURE__*/createIcon('flag', mdiFlag)看完上述內容，是不是對在Vue.JS中使用圖標組件的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
