我正在一个项目中使用Vue2和Vuetify。我希望能够使用Tabler图标库中的任何图标,如下所示:
<v-icon>custom-icon-name</v-icon
我不想将基于自定义组件的系统用于:
<v-icon>$vuetify.icons.iconName</v-icons>
从概念上讲,可能的解决方案是什么?我需要为此创建一个模块吗?如果需要,什么是一个好的方法?谢谢你的时间。
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
1条答案
按热度按时间k10s72fa1#
从技术上讲,这个选项对我来说是可行的--但做起来会很繁琐--就是实现一个TablerIcon.vue组件:
然后我把这个叫做:
这似乎是工作与npm包找到这里:https://www.npmjs.com/package/vue-tabler-icons