1、阿里巴巴图标库图标svg格式下载引入
2、前端工程化svg格式图标处理
const req = require.context("../../../assets/icons/svg", false, /\.svg$/);
const requireAll = requireContext => requireContext.keys();
const re = /\.\/(.*)\.svg/;
const svgIcons = requireAll(req).map(i => {
return i.match(re)[1];
});
export default svgIcons;
webpack配置
config.module
.rule("svg")
.exclude.add(resolve("src/assets/icons"))
.end();
config.module
.rule("icons")
.test(/\.svg$/)
.include.add(resolve("src/assets/icons"))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
3、页面svg图标引入
<template>
<div
v-if="isExternal"
:style="styleExternalIcon"
class="svg-external-icon svg-icon"
v-on="$listeners"
/>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
最后页面效果图