vue 導入 iconfont 中的 svg 圖標

symbol引用

這是一種全新的使用方式，應該說這纔是未來的主流，也是平臺目前推薦的用法。這種用法其
實是做了一個svg的集合，與另外兩種相比具有如下特點：

• 支持多色圖標了，不再受單色限制。
• 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。 兼容性較差，支持 ie9+,及現代瀏覽器。
• 瀏覽器渲染svg的性能一般，還不如png。

使用

• 打開iconfont，找到我的項目，點擊 批量操作-全選-批量去色
• 選擇Symbol，打開鏈接下載js文件
• 將下載的js文件保存在assects靜態文件中，並在main.js引入

//main.js
import '@/assets/js/font_symbol.js'

• 新建svgIcon.vue,將svg的導入封裝起來

//svgIcon.vue
<template>
    <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"/>
    </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

• 新建svg-icon.js全局註冊，並導入main.js

//svg-icon.js
import Vue from 'vue'
import SvgIcon from '@/common/SvgIcon.vue' // svg組件

Vue.component('svg-icon', SvgIcon)// 全局註冊

//main.js
import '@/assets/js/svg-icon.js'

• ok,寫到這裏就大功告成了，可以在頁面中直接通過標籤對來調用了

<svg-icon icon-class="icon圖標名稱" />

• 最後，我看到網上有很多導入svg的方法，需要在vue.config.js中進行配置，這是針對那些需要直接在項目中導入svg圖標的，如果你只是單純使用iconfont的話就沒必要配置了，話不多說，順便把配置也貼一下吧

//vue.config.js
//svg-icon
        // svg loader
    chainWebpack: config => {
        const svgRule = config.module.rule('svg') // 找到svg-loader
        svgRule.uses.clear(); // 清除已有的loader, 如果不這樣做會添加在此loader之後
        svgRule.exclude.add(/node_modules/); // 正則匹配排除node_modules目錄
        svgRule // 添加svg新的loader處理
            .test(/\.svg$/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            });
        // 修改images loader 添加svg處理
        const imagesRule = config.module.rule('images');
        imagesRule.exclude.add(resolve('src/icons'));
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    }