在Vue.JS中使用图标组件的方法

2024-11-19 技术教程

这篇文章主要讲解了在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.jsimport 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.jsimport { 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选项注册。不过就像我们知道的，如果一个组件要用很多图标的话，这种方式会挺麻烦。

<template> <div>  <icon-flag />  <icon-flag v-if="flag" /> <icon-star v-else />  <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>  <icon-flag />  <icon-flag v-if="flag" /> <icon-star v-else />  <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>

<template>  <icon-flag />  <icon-flag v-if="flag" /> <icon-star v-else />  <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>  <icon-flag />  <icon-flag v-if="flag" /> <icon-star v-else />  <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>提案：

后记

这很篇文章很精练地介绍了在Vue中按需引入图标的方式，与React社区做比较，可以看到两个生态的差异还是存在的。在React社区中，使用第3种方式（每个图标一个组件）非常普遍，如NPM上排名较高的react-icons和知名组件库@ant-design/icons、@material-ui/icons都是这一形态。

这可能是由于React社区中并不倾向将“组件”这一概念特殊化，组件就是普通的函数、普通的类，所以它的复用于其它的函数、类的复用相同，如同lodash会导出很多个工具函数一样，一个图标库会导出很多个图标组件非常合理。

在文中对于使用createIcon工厂函数的使用有一些可以优化的点。正常使用工厂函数会让创建的组件不可被tree shaking，其原因是语法分析会认为createIcon函数本身是有副作用的，因此这个调用不能被安全地删除。可以通过terser的特殊注释来标记：

// icon-flag.jsimport { mdiFlag } from '@mdi/js'import { createIcon } from 'v-icon'export default /*#__PURE__*/createIcon('flag', mdiFlag)

看完上述内容，是不是对在Vue.JS中使用图标组件的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。