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>