elementUI 封装 SVG 组件

第一步增加vue.config.js 文件

vue.config.js 添加如下配置

　1.svg需要使用新的loader npm install svg-sprite-loader --S

2, 在chainWebpack 中设置匹配规则让原有的svgloader 不去匹配自己添加的svg 所以使用 .exclude.add（‘资源路径’）将存放svg资源的文件路径过滤掉

3. 添加新安装的loader 路径匹配使用.include.add(‘资源路径’) 让loader去解析存放svg资源的文件

4. symbolId 个人理解指的是 svg id 的命名格式

第二步 components 中添加组件

icon-svg.vue 内容如下

<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><template>;
  <svg class="svg-icon" aria-hidden="true">;
    <use :xlink:href="iconName">;</use>;
  </svg>;
</template>;

<script>;
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      console.log(`#icon-${this.iconClass}`)
      return `#icon-${this.iconClass}` // 与配置文件的配置格式一致
    }
  }
}
</script>;

<style>;
.svg-icon {
  width: 20px;
  height: 20px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>;
</pre>
</div>

第三步创建资源文件夹

最重要的是里面的index.js文件

import Vue from 'vue'

import IconSvg from '@/components/svgIcon/icon-svg'

//全局注册icon-svg
Vue.component('icon-svg', IconSvg)


const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)/*  */

require.context：require.context有三个参数：

directory：说明需要检索的目录

useSubdirectories：是否检索子目录

regExp: 匹配文件的正则表达式

eg:

require.context("./test", false, /.test.js$/);

这行代码就会去 test 文件夹（不包含子目录）下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。

即我们可以通过正则匹配引入相应的文件模块。

最后全局使用

参考网址：https://www.cnblogs.com/ccyinghua/p/10232481.html