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() 中返回。我正在使用composition-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>