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