如何在Vue.JS中使用图标组件
原文链接：https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30
本文对原文进行一次翻译，并从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.使用单一的组件（如<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中使用图标组件的详细内容，更多关于Vue.JS中使用图标组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Vue实现无限加载瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
Vue3引入了Composition API,其中ref是核心概念,允许开发者声明响应式状态,本文通过一个具体示例,探讨了在Vue3中如何使用ref进行动态赋值,尤其是在处理DOM相关操作时的应用,通过ref动态赋值,可以有效管理组件内的状态,提高代码的可维护性和清晰度2024-09-09
vue2 el-checkbox-group复选框无法选中问题及解决
这篇文章主要介绍了vue2 el-checkbox-group复选框无法选中问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
React-Router 路由库，是官方维护的路由库，事实上也是唯一可选的路由库。它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到2022-09-09
nvm全英文也叫node.js version management，是一个nodejs的版本管理工具，这篇文章主要介绍了Vue中nvm-windows的安装与使用,需要的朋友可以参考下2023-02-02
本文主要介绍了Vue+LogicFlow+Flowable实现工作流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
关于element-ui select 下拉框位置错乱问题解决
这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了羊了个羊通关脚本Vue node实现版本，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
vue scss后缀文件background-image路径错误的解决
这篇文章主要介绍了vue scss后缀文件background-image路径错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
最新评论