0

浏览器控制台

我尝试将 svg-sprite-loader 与 Vue 一起使用，但出现了问题。似乎 svg 文件已在 <body> 的开头加载，但 <use> 标记下没有任何内容

index.js 和 iconSvg.vue 在 /views/icons/
下 *.svg 文件在 /views/icons/svg/ 下

和源文件：index.js

const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => {
  return requireContext.keys().map(requireContext);
}
requireAll(req);

图标Svg.vue

<template>
<div>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:herf="iconName"></use>
    </svg>
  </div>
</template>
<script>
import { computed, reactive } from 'vue';

export default{
  name: "iconSvg",
  //props: ['iconClass', 'className'],
  props: {
    iconClass: {
      type: String,
      default: "",
      },
    className: {
      type: String,
      default: ""
    }
  },
  setup(props) {
    
    const iconName = computed(() => `#icon-${props.iconClass}`);
    const svgClass = computed(() => {
      if (props.className)
        return `svg-icon ${props.className}`;
      else
        return `svg-icon`;
    });
    return {
      iconName,
      svgClass
    };
  },
}
</script>

main.js

import { createApp, component } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import "./views/icons/index.js"
import iconSvg from "./views/icons/iconSvg.vue";
//import VueCompositionApi from '@vue/composition-api'

const app = createApp(App);
app.use(store).use(router).use(ElementPlus).mount('#app');
app.component('icon-svg', iconSvg);

vue.config.js

//a part of the full file
//and i use 'runtimeCompiler: true,' when I start build a component
  chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      }).end();
   }
4

0 回答 0