如何在Vuetify中实现图标库(Tabler)

Question

我在一个项目中使用Vue2和Vuetify。我希望能够使用Tabler图标库中的任何图标，比如：

<v-icon>custom-icon-name</v-icon

我不想使用基于自定义组件的系统与：

<v-icon>$vuetify.icons.iconName</v-icons>

从概念上讲，可能的解决方案是什么？我需要为此创建一个模块吗？如果需要，什么是好方法？谢谢你抽出时间。

Answer 1

技术上对我有效的选项是实现TablerCon.vue组件：

<template>
<div>
<template v-if="iconName=='Deg360ViewIcon'">
<Deg360ViewIcon :size="size" :stroke-width="strokewidth" />
</template>
<template v-else>
<QuestionMarkIcon :size="size" :stroke-width="strokewidth" />
</template>
</div>
</template>

<style>
</style>

<script>
export default {
name: 'TablerIcon',
props: ['iconName','size','strokewidth'],
data() {
return {
}
},
}
</script>

然后我称之为：

import TablerIcon from './TablerIcon.vue'
...
components: {TablerIcon},
<TablerIcon :iconName="'Deg360ViewIcon'" :size="24" :strokewidth="1.5"/>

这似乎适用于此处找到的npm包：https://www.npmjs.com/package/vue-tabler-icons