vue項目如何創建svg組件，如何改變svg的顏色

一、組件創建

既然要創建svg組件，那么就需要項目支持svg引入

1、在vue.config.js中修改如下：

 

 

 

    // 清除已有的loader, 如果不這樣做會添加在此loader之后
    config.module
      .rule('svg')
      .uses.clear()
      .end();
    // 則匹配排除node_modules目錄
    config.module
      .rule('svg')
      .exclude.add(/node_modules/)
      .end();
    // 添加svg新的loader處理
    config.module
      .rule('svg')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();

2、svg全局注冊

import Vue from 'vue';
import SvgIcon from '@/components/svg-icon';

// 注冊到全局
Vue.component('svg-icon', SvgIcon);

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

3、文件目錄如下：

 

 

 

 4、組件封裝

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

<script>
export default {
  name: 'SvgIcon',

  props: {
    // 當前 svg 的文件名，如 arrow-left.svg，該值就應該是 arrow-left
    filename: {
      type: String,
      required: true,
    },

    // 自定義的 class，非必填
    className: {
      type: String,
      default: '',
    },
  },

  computed: {
    iconName() {
      return `#icon-${this.filename}`;
    },

    svgClass() {
      return 'svg-icon' + (this.className ? ' ' + this.className : '');
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

二、如果改變svg的顏色

 

 將fill以及stroke的值改成currentColor以后，就可以通過賦值class，修改class的color屬性就生效了