安装 vue-svg-loader

    npm i -D vue-svg-loader

配置 vue.config.js

module.exports = {
    runtimeCompiler: true,
    configureWebpack: (config) => {
    },
    chainWebpack: config => {
      // 配置vue-svg-loader
      const svgRule = config.module.rule('svg');
      svgRule.uses.clear();
      svgRule.use('vue-svg-loader').loader('vue-svg-loader');
      
    },
    css: {
     
    },  
  }

下载svg

到iconfont下载svg代码 然后创建一个.svg文件复制进去

引入

// svg组件
import svg_excel_upload from "@/assets/svg/excel_upload.svg";
import svg_excel_export from "@/assets/svg/excel_export.svg";
import svg_create from "@/assets/svg/create.svg";
import svg_registration from "@/assets/svg/Registration.svg";
import svg_delete from "@/assets/svg/delete.svg";
import svg_user from "@/assets/svg/user.svg";
import svg_details from "@/assets/svg/details.svg";
import svg_edit from "@/assets/svg/edit.svg";
import svg_condition from "@/assets/svg/condition.svg";
const SVG_LIST = {
  svg_excel_upload,
  svg_excel_export,
  svg_create,
  svg_registration,
  svg_delete,
  svg_user,
  svg_details,
  svg_edit,
  svg_condition
};
export default {
    data(){
        return SVG_LIST
    }
}

结合 antd design vue 使用

    <a-icon :component="svg_details" />

自定义组件使用

    <ImageButton
      :src="svg_excel_upload"
      @click="showModal"
      :text="'导入'"
    />

效果