通过变量名称在模板中使用自定义 vuetify 图标

Question

我正在尝试使用下一个模板在列表中呈现自定义 vuetify 图标：

<template v-for="item in items">
    <v-list nav :key="item.name">
        <v-list-item link :to="item.to">
            <v-list-item-icon>
                <v-icon color="white">{{$vuetify.icons.values[item.icon]}}</v-icon>
            </v-list-item-icon>
            <v-list-item-title>{{item.name}}</v-list-item-title>
        </v-list-item>
    </v-list>
</template>

脚本：

<script lang="ts">
...
export default class Menu extends Vue {

items: Array<any> = [
    {
        name: "Home",
        to: "/Home",
        icon: "test1"
    },
    {
        name: "Contacts",
        to: "/Contacts",
        icon: 'test2'
    }   
]}
</script>

已在 vuetify.ts

中注册图标

Vue.use(Vuetify, {
    icons: {
        iconfont: "mdi",
    },
    values: {
        test1: '...svg'
        test2: '...svg'
    }
});

我的第一个问题是，当我将自定义图标与 $vuetify.icons.test1 一起使用时，它工作正常。但是，如果我动态获取此值，我应该怎么做。第二个有什么方法可以将其用作普通图标，例如：

<v-icon>test1</v-icon>

Answer 1

自定义图标的模板语法假设图标路径是一个字符串。您可以使用字符串插值来定义动态图标。

<v-icon color="white">{{ `$vuetify.icons.${item.icon}` }}</v-icon>

关于第二个问题，自定义图标有一个shorthand：

<v-icon color="white">$test1</v-icon>

动态版本如下所示：

<v-icon color="white">{{ `$${item.icon}` }}</v-icon>

另外，请注意您不需要为自定义图标指定 values。所有图标（内置和自定义）都被拉入一个 icons 对象。

通过变量名称在模板中使用自定义 vuetify 图标

Use custom vuetify icon in template by it name from variable

vue.js

vuetify.js