svg組件封裝

svg圖標優點

文件體積小，能夠被大量的壓縮

圖片可無限放大而不失真(矢量圖的基本特征)

在視網膜顯示屏上效果極佳

能夠實現互動和濾鏡效果

svg圖標使用

1.安裝相應的npm包：

yarn add svg-sprite-loader svgo --dev 

2.src文件夾下新建一個icons文件夾。里面存放svg格式的圖標。

index.js實現組件全部注冊。

import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon.vue'; // svg組件

// register globally
Vue.component('svg-icon', SvgIcon);

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

SvgIcon.vue組件：

<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
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return `svg-icon ${this.className}`;
      }
      return 'svg-icon';
    }
  }
};
</script>

<style scoped>
.svg-icon {
    width: 20px;
    height: 20px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

3.在vue.config.js里set svg-sprite-loader

4.別忘了在main.js中引入：

import Vue from 'vue';
import './icons';

import router from './router';
import store from './store';

import './assets/styles/index.scss';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  template: '<router-view></router-view>',
}).$mount('#app');

5.然后，就可以使用了

<el-form-item prop="username">
    <svg-icon icon-class="user" class="icon-svg" />
    <el-input placeholder="請輸入郵箱" type="text" v-model="loginForm.username" />
</el-form-item>