【VUE】vuecli4项目优雅使用svg

一张图解释什么是svg文件

项目目录如下

1. 下载svg-sprite-loader

npm i svg-sprite-loader -D

2. 定义svg 组件

<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 `#icon-${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>

3. 编写/assets/icons/index.js文件

import Vue from "vue";
// 导入svg组件
import SvgIcon from "@/components/SvgIcon";

// 注册为全局组件
Vue.component("svg-icon", SvgIcon);

// 将所有svg导入到icons/index.js中
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);

4. main.js中引用svg全局组件

import "@/assets/icons"; // 自定义svg全局组件

5. 修改vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack(config) {
    // set svg-sprite-loader
    // 第一步：让其他svg loader不要对src/assets/icons/svg进行操作
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/icons/svg"))
      .end();
    // 第二步：使用svg-sprite-loader 对 src/assets/icons/svg下的svg进行操作
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }
};

另外如果用webpack-cli脚手架创建的项目没有vue.config.js，需要修改webpack.base.conf.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      }
}

6.使用

// icon-class是svg文件名
<svg-icon icon-class="user" />

7. 补充一下饿了么UI自带的图标用法

elementUI官网 => 组件 => Icon 图标
使用非常简单