vue.js - vuetify 中的动态 mdi svg 图标

Question

我正在尝试在 v-select 中呈现动态 v-icon。
我需要用它的导入值替换图标名称

            <v-select v-model="data.type" dense :items="typeItems" :label="$tc('Type')">
              <template v-slot:item="data">
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>{{data.item.icon}}</v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title v-html="data.item.text"></v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </template>
            </v-select>

data.item.icon 是一个字符串，例如“mdiArrowLeft”。

mdiArrowLeft 被导入：从 "@mdi/js" 导入 {mdiArrowLeft} 并在 setup() 中返回。我正在使用组合 API。

我无法将字符串 {{data.item.icon}} 替换为其导入的值
呈现的模板是 mdiArrowLeft 而不是图标。

Answer 1

src/plugins/vuetify.js

指定 mdiSvg 图标字体：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

Vue 组件

...
<v-icon>{{getIcon(data.item.icon)}}</v-icon>
...

<script>
  export default {
    methods: {
      async getIcon (iconName) {
        return { [iconName]: icon } = await import('@mdi/js')
      }
    }
  }
</script>

Answer 2

根据@Alex Hoffman 的建议，我找到了解决方案：

<v-icon small>{{ typeIcon(data.item.value)}}</v-icon>
...
    function typeIcon(type) {
      if (type === 1) return mdiArrowLeft;
      if (type === 2) return mdiCurrencyEur;
      if (type === 3) return mdiArrowRight;
      if (type === 4) return mdiEmailOutline;
      if (type === 5) return mdiCloudUploadOutline;
      if (type === 6) return mdiDeleteForever;
      if (type === 7) return mdiPhone;
      if (type === 8) return null;
      if (type === 9) return mdiDownload;
    }