I try to use svg-sprite-loader with Vue, but there's something wrong. It seems like the svg file had been loaded at the start of the <body>, but there is nothing under the <use> tag
index.js and iconSvg.vue are under /views/icons/
*.svg files under /views/icons/svg/
and source files: index.js
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => {
return requireContext.keys().map(requireContext);
}
requireAll(req);
iconSvg.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();
}