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)(\?.*)?$/)
    }