vuecli4 使用svg svg-sprite-loader設置 vue+svg

vue項目使用阿里雲svg

先上一個目錄結構：

 

 

第一步：下載svg-sprite-loader

　　yarn add svg-sprite-loader -D

第二步：配置vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: false,
  transpileDependencies: ["vuetify"],
  chainWebpack(config) {
    // set svg-sprite-loader
    // 第一步：讓其他svg loader不要對src/assets/imgs/svgs進行操作
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/imgs/svgs"))
      .end();
    // 第二步：使用svg-sprite-loader 對 src/assets/imgs/svgs下的svg進行操作
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/imgs/svgs"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      //定義規則 使用時 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }
};

imgs/index.js:導入項目中用到的或者沒有用到的svg 一股腦全部導入

// 默認導入所有src文件夾下的icons文件(自動導入，不需手動一個個導入)
import Vue from "vue";
import SvgIcon from "@/components/icon";//寫了組件在打開 用於注冊組件

Vue.component("svg-icon", SvgIcon);//寫了組件在打開 用於注冊組件

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svgs", false, /.svg$/);
requireAll(req);

main.js引入：

　　import "@/assets/imgs/index.js";

 

第三步：在頁面中使用

<template>
  <div class="hello">
    <p>vue+svg-原生寫法 注意：eye是svg的文件名稱：eye.svg</p>
    <svg class="icon">
      <use xlink:href="#icon-eye"></use>
    </svg>
    <p>vue+svg-組件寫法-下一步再講</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>
<style scoped lang="scss">
.icon {
  width: 100px;
  height: 100px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

效果如下

 

 

 

 組件寫法：簡單便捷

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

<script>
export default {
  name: "svg-icon",
  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>

<div class="hello">
    <p>vue+svg-原生寫法</p>
    <svg class="icon">
      <use xlink:href="#icon-search"></use>
    </svg>
    <p>vue+svg-組件寫法-下一步再講</p>
    <svg-icon icon-class="search"></svg-icon>
  </div>