- npm i svg-sprite-loader -D 或者yarn add svg-sprite-loader -D
- 新增svg-icon組件
<template>
<svg class="svg-icon"
aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 在 該文件夾中創(chuàng)建 plugin.js 文件。在assets下創(chuàng)建svg文件夾存放svg圖標(biāo)
import SvgIcon from "./index";
const componentPlugin = {
install: function (vue, options) {
if (
options &&
options.imports &&
Array.isArray(options.imports) &&
options.imports.length > 0
) {
// 按需引入圖標(biāo)
const { imports } = options;
imports.forEach((name) => {
require(`@/assets/svg/${name}.svg`);
});
} else {
// 全量引入圖標(biāo)
const ctx = require.context("@/assets/svg", false, /\.svg$/);
ctx.keys().forEach(path => {
const temp = path.match(/\.\/([A-Za-z0-9\-_]+)\.svg$/);
if (!temp) return;
const name = temp[1];
require(`@/assets/svg/${name}.svg`);
});
}
vue.component(SvgIcon.name, SvgIcon);
}
};
export default componentPlugin;
- 在 main.js 中導(dǎo)入插件
import plugin from "./components/SvgIcon/plugin";
Vue.use(plugin,{imports:[]});
- 修改 vue.config.js
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule("svg");
//webpack5 的配置有點(diǎn)區(qū)別 解開注釋
//svgRule.delete('type')
//svgRule.delete('generator');
svgRule.uses.clear();
svgRule.exclude.add(/node_modules/);
svgRule
.test(/\.svg$/)
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
}).end();
}
};
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
