这篇文章主要介绍了如何在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.使用单一的组件(如),让乃通过name或者type属性来指定真正的图标。
图标的数据通过一个全局的“池子”来注册。
// v-icon/flag.js import Icon from 'v-icon' import { mdiFlag } from '@mdi/js' Icon.add('flag', mdiFlag)
然后这样子使用:
在我维护的VueAwesome(内置了FontAwesome图标的组件库)中用了这个方案,同时我认为这是当前最符合人机工程学的形式。不过图标的name属性和那些纯副作用的模块的导入之间的关系比较隐式,图标的数据也在全局注册。如果你有多个不同版本的v-icon,就可能出现问题。
FontAwesome官方的Vue.js组件用了一个稍微不同的方案,它们让用户自己主动把图标加到全局的池子中(也可能我不应该把这个方式归类到这个方案中):
import { library } from '@fortawesome/fontawesome-svg-core' import { faUserSecret } from '@f<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码网%</span>ortawesome/free-solid-svg-icons' library.add(faUserSecret)
2.用一个单一的维护(如<v-icon),用户通过data或content之类的属性创建真正的图标。
用户主动把图标的数据传递给组件:
这是Vuetify支持的方式(Vuetify通过这种方式支持多种图标的使用方式),这种试在人机工程和直观性上有些损失,但没有方案1的缺点。
3.每个组件代表不同的图标(如、等)。
这个方案里,每个组件通过一个图标工厂创造出来:
// icon-flag.js import { mdiFlag } from '@mdi/js' import { createIcon } from 'v-icon' export default createIcon('flag', mdiFlag)
并通过这种方式使用:
这种方案在React社区里被广泛采用,我在本文的后续部分将展开讨论。
每个组件代表一个图标
我将更深入地说一下这种方案在Vue.js中的使用。
在Vue.js中,模板和脚本是分开的,组件通过components选项注册。不过就像我们知道的,如果一个组件要用很多图标的话,这种方式会挺麻烦。
Vue 2
<div> <!-- inline --><!-- conditional --><!-- dynamic --></div>
可以看到如果想用图标的is绑定,我们必须把components手动暴露到渲染上下文中。我们可以用字符串去替换组件定义来绕过,但对代码检查和类型系统来说就不那么友好。
<div> <!-- inline --><!-- conditional --><!-- dynamic --></div>
Vue 3
<!-- inline --><!-- conditional --><!-- dynamic -->
如果用:is绑定,
或者用