vuecli3.0 优雅使用svg

1：vue-cli对svg文件有默认的url-loader 处理，我们要使用svg 图标需单独进行配置

下载一个插件svg-sprite-loader来单独处理我们的svg图标，它是一个webpack loader，支持将多个svg打包成svg sprites

npm install svg-sprite-loader -D

2：vue.config.js

// 内置路径包const path = require("path");
// 定义resolve方法，获取绝对路径function resolve(dir) {  return path.join(__dirname, dir);}
module.exports = {  
// 一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例 
 // 允许对内部的 webpack 配置进行更细粒度的修改  
chainWebpack: config => {    
// 配置svg默认规则排除icons目录中svg文件处理   
 config.module      
　　.rule("svg")      
　　.exclude.add(resolve("src/icons"))      
　　.end();
 // 新增icons规则，设置svg-sprite-loader处理icons目录中svg文件    
 config.module      
　　.rule("icons")    
  　　.test(/.svg$/)    
  　　.include.add(resolve("src/icons"))  
    　.end()      
　　　.use("svg-sprite-loader")    
  　　.loader("svg-sprite-loader")     
 　　.options({ symbolId: "icon-[name]" })     
 　　.end();  
}}

3  const req = require.context("./svg", false, /.svg$/);
req.keys().map(req);

4：components/目录下新建SvgIcon/index.vue文件，我们写一个svgicon组件，封装一下再全局注册，这样使用起来就会很方便了！

<template>

  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">

    <use :xlink:href="iconName" />

  </svg>

</template>

<script>

export default {

  name: "SvgIcon",

  props: {

    iconClass: {

      type: String,

      required: true

    },

    className: {

      type: String,

      default: ""

    }

  },

  computed: {

    iconName() {

      return `#icon-${this.iconClass}`;

    },

    svgClass() {

      if (this.className) {

        return "svg-icon " + this.className;

      } else {

        return "svg-icon";

      }

    }

  }

};

</script>

<style scoped>

.svg-icon {

   1em;

  height: 1em;

  vertical-align: -0.15em;

  fill: currentColor;

  overflow: hidden;

}

</style>

 

5 在 icon/index

import Vue from "vue";

import SvgIcon from "@/components/SvgIcon";

// icons图标自动加载

const req = require.context("./svg", false, /.svg$/);

req.keys().map(req);

// 全局注册svg-icon组件

Vue.component("svg-icon", SvgIcon);

6：import "@/icons/index.js";

7：页面使用

<template>

  <svg-icon icon-class="qq" class-name="qq-style"></svg-icon>

</template>