如何在Vuex (Vuetify)中导入自定义svg图标

npm install -g @vue/cli

vue create my-project

import Vue from 'vue';
import vuetify from './plugins/vuetify';
import App from './App.vue';

Vue.config.productionTip = false;

const requireComponent = require.context(
  './icons', // 自定义svg图标所在的目录
  false,
  /.*\.svg$/
);

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName
    .split('/')
    .pop()
    .replace(/\.\w+$/, '');

  Vue.component(componentName, componentConfig.default || componentConfig);
});

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app');

<template>
  <div v-html="icon" />
</template>

<script>
export default {
  props: ['name'],
  computed: {
    icon() {
      return `<svg><use xlink:href="#${this.name}" /></svg>`; // 将自定义svg图标作为内联HTML使用
    }
  }
};
</script>

<template>
  <svg-icon name="your-icon-file-name" />
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue'; // 导入SvgIcon组件

export default {
  components: {
    SvgIcon // 注册SvgIcon组件
  }
};
</script>