vue-cli3 svg-sprite-loader不显示icon

本文主要是介绍vue-cli3 svg-sprite-loader不显示icon，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

按照网上的教程，一步步下来，icon死活不显示，后来改了下；终于能正常显示了。

---

后来发现在保存的时候，vscode格式化工具把 :xlink:href前面的：给去掉了。。。???

---

主要是改了下面的代码：

// 在IconSvg.vue 加了v-bind(:)
<use :xlink:href="iconName"></use>

---

下面是各个文件
vue.config.js

const path = require("path");
function resolve(dir) {return path.join(__dirname, dir);
}
module.exports = {baseUrl: "/",// 输出目录outputDir: "dist",lintOnSave: true,// 是否为生产环境构建生成 source map？productionSourceMap: false,// alias 配置chainWebpack: config => {config.resolve.alias.set("@", resolve("src"));config.module.rules.delete("svg");config.module.rule("svg-smart").test(/\.svg$/).include.add(resolve("src/icons/svg")).end().use("svg-sprite-loader").loader("svg-sprite-loader").options({symbolId: "[name]"});}
};

---

src/icons/index.js

import Vue from "vue";
import IconSvg from "@/components/IconSvg/IconSvg.vue";Vue.component("icon-svg", IconSvg);
const req = require.context("./svg", true, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

---

src/components/IconSvg/IconSvg.vue

<template><svg :class="sc" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script>
export default {name: "SvgIcon",props: {svgName: {type: String,required: true},svgClass: {type: String,default: ""}},computed: {iconName() {console.log(this.svgName);return `#${this.svgName}`;},sc() {console.log(this.svgClass);if (this.svgClass) {return "svg-icon " + this.className;} else {return "svg-icon";}}}
};
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

---

 <icon-svg svgName="demo" svgClass="ss"></icon-svg>

这篇关于vue-cli3 svg-sprite-loader不显示icon的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---