在vue-cli3中優雅的使用 icon

• 　首先咱們得有圖標
  • 這裏咱們從網上下載svg文件或者UI給你導出svg文件
  • 咱們在src 文件下新建一個放置svg 文件 的文件夾 @/src/icons.將全部 icon 放在這個文件夾下。

　　　　　　

 

• 　建立 icon-component 組件
  • <template>
      <svg
        :class="svgClass"
        aria-hidden="true"
        :color="svgColor"
      >
        <use :xlink:href="iconName" />
      </svg>
    </template>
    
    
    <script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';
    
    @Component({ components: {} })
    export default class SvgIcon extends Vue {
      @Prop({ default: null, type: String })
      iconClass!: String;
    
      @Prop({ default: '', type: String })
      className!: String;
    
      @Prop({ default: null, type: String })
      svgColor!: String;
    
      get iconName() {
        return `#icon-${this.iconClass}`;
      }
    
      get svgClass() {
        if (this.className) return `svg-icon ${this.className}`;
        return 'svg-icon';
      }
    }
    </script>
    
    <style scoped>
    .svg-icon {
      width: 2em;
      height: 2em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>

• 　在icons 文件夾放一個index.js  這個js 的做用是引入 icon組件並全局註冊 並實現 自動引入 @/src/icons 下面全部的圖標了
  • 以後咱們就要使用到 webpack 的 require.context。不少人對於 require.context可能比較陌生，直白的解釋就是
    • 　　require.context("./test", false, /.test.js$/); 這行代碼就會去 test 文件夾（不包含子目錄）下面的找全部文件名以 .test.js 結尾的文件能被 require 的文件。 更直白的說就是 咱們能夠經過正則匹配引入相應的文件模塊。

  • import Vue from 'vue';
    import IconSvg from '@/components/IconSvg/IconSvg.vue';
    
    // 全局註冊icon-svg
    Vue.component('icon-svg', IconSvg);
    
    
    // requires and returns all modules that match
    const requireAll = requireContext => requireContext.keys().map(requireContext);
    // import all svg
    const req = require.context('./svg', true, /\.svg$/);
    requireAll(req);

• 　svg-sprite-loader 依賴 install
  • 它是一個 webpack loader ，能夠將多個 svg 打包成 svg-sprite 。
  • 咱們發現vue-cli默認狀況下會使用 url-loader 對svg進行處理，會將它放在/img 目錄下，因此這時候咱們引入svg-sprite-loader 會引起一些衝突。

  • //默認`vue-cli` 對svg作的處理，正則匹配後綴名爲.svg的文件，匹配成功以後使用 url-loader 進行處理。
     {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
    }

• • 解決方案有兩種，最簡單的就是你能夠將 test 的 svg 去掉，這樣就不會對svg作處理了，固然這樣作是很不友善的。
    • 你不能保證你全部的 svg 都是用來當作 icon的，有些真的可能只是用來當作圖片資源的。
    • 不能確保你使用的一些第三方類庫會使用到 svg。
  • 因此最安全合理的作法是使用 webpack 的 exclude 和 include ，讓svg-sprite-loader只處理你指定文件夾下面的 svg，url-loaer只處理除此文件夾以外的因此 svg，這樣就完美解決了以前衝突的問題。 代碼以下
  • 這只是cli2 的配置， cli3 配置都在vue.config.js  裏面   詳情參看文檔 webpack相關 | vue-cli3
  • 這裏吧我本身寫的給貼出來

  • module.exports = {
      lintOnSave: true,
      baseUrl: './',
      productionSourceMap: process.env.NODE_ENV !== 'production',
      chainWebpack: (config) => {
        config.resolve.alias.set('@images', resolve('./src/assets/images'));
        config.resolve.alias.set('@svg', resolve('./src/icons/svg'));
        config.module.rules.delete('svg'); // 重點:刪除默認配置中處理svg,
        config.module
          .rule('svg-sprite-loader')
          .test(/\.svg$/)
          .include
          .add(resolve('src/icons/svg')) // 處理svg目錄
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]',
          });
      },
    ......

     

　　這樣配置好了,開始使用了.

　　

 

<icon-svg
    icon-class="send"
    className="icon"
/>

 效果

 

參考連接: 手摸手，帶你優雅的使用 icon

 更詳細的 能夠去看看上面連接,大神帶你飛