There are three major ways of exposing API of an icon component invue.jsand each one of them has its own pros & cons:

在vue.js的生態裡，有3種主流的API形態，它們有各自的優缺點：

使用單一的元件（如<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)

用一個單一的維護（如<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的缺點。

每個元件代表不同的圖示（如<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社群裡被廣泛採用，我在本文的後續部分將展開討論。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

每個元件代表一個圖示

我將更深入地說一下這種方案在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)