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;
}

最后页面效果图