vue項目中配置svg圖標 cli3路徑

1 添加依賴

npm install svg-sprite-loader file-loader -D

2 在components目錄下新增一個IconSvg.vue文件

 

<template>
  <svg class="svg-icon" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>
export default {
  name: "icon-svg",
  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>
.svg-icon {
  /* 
  這里可以自定義寬高
  width: 1em;
  height: 1em; 
  */
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

3、添加icon-svg組件

　　在main.js中 新增全局組件

   //引入svg組件
   import IconSvg from './components/IconSvg'

   // //全局注冊icon-svg
   Vue.component('icon-svg', IconSvg)

4、配置vue.config.js

const path = require('path')
module.exports = {
  /**這里之后，還有第一行的path是跟svg有關系的配置**/
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      // 配置icons的目錄 我這里默認放在了 /src/assets/icons 目錄下 如要修改 記得更換你的目錄
      .include.add(path.resolve(__dirname, './src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      // 配置icons的目錄 我這里默認放在了 /src/assets/icons 目錄下 如要修改 記得更換你的目錄
      .exclude.add(path.resolve(__dirname, './src/assets/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  }
}

 

5、使用方式

 　　導入.svg圖標

　　import "@/assets/icons/aa.svg"

　　使用圖標

　　<icon-svg icon-class="aa" />