在Vue.JS中使用图标组件

• 原文链接: http://github.crmeb.net/u/LXT

• 本文对原文进行一次翻译，并从React开发者的角度简单地做了一些解读。

• 此文不包含字体图标和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.使用单一的组件（如），让乃通过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组件用了一个稍微不同的方案，它们让用户自己主动把图标加到全局的池子中（也可能我不应该把这个方式归类到这个方案中）：

       imp