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

qfe3c7zg  于 2023-01-21  发布在  Vue.js
关注(0)|答案(1)|浏览(302)

我正在一个项目中使用Vue2和Vuetify。我希望能够使用Tabler图标库中的任何图标,如下所示:

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

我不想将基于自定义组件的系统用于:

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

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

k10s72fa

k10s72fa1#

从技术上讲,这个选项对我来说是可行的--但做起来会很繁琐--就是实现一个TablerIcon.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

相关问题