一、SVG定义

SVG全称是Scalable Vector Graphics，即可伸缩矢量图，用于描述二维矢量图形的图形格式。在web中使用SVG可以解决位图放大失真的问题。首先，不要把SVG和CSS、Canvas、HTML搞混，他们之间并没有关系。简单的理解，它是图形的另一种格式，例如它和常见的图片格式.png、.jpg、.gif等是一类。
SVG是通过XML的形式写在HTML文档中的。SVG在既能满足现有图片的功能的前提下，
*是矢量图，矢量图是根据几何特性来绘制图形，它的特点是放大后图像不会失真，和分辨率无关，文件占用内在空间较小。
*在可访问性上面也非常不错，并且有利于SEO和无障碍，在性能和维护性方面也比iconfont要出色许多。

二、自定义SVG插件

关于如何在文中使用svg图标，可以参考这篇博客：iconfont字体图标的使用{:target=”_blank”}

1、在components目录下新建一个svg.vue文件：

前提：已按上述所给博客链接在阿里矢量图标库官网{:target=”_blank”}下载了自己所需图标的iconfont.js文件，并在main.js文件中引入（import ‘./font/iconfont.js’），供全局使用。写好通用css代码，并在main.js中引用：

.icon {
    width:1em;
    height:1em;
    vertical-align:-0.15em;
    fill:currentColor;
    overflow:hidden;
}

编写svg.vue文件：

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

<script>
    export default {
        name: "icon-svg",
        //props用于父子组件传值
        props: {
            name: {
                type: String,
                required: true
            }
        },
        computed: {
            iconName() {
                return `#icon-${this.name}`;
            }
        }
    }
</script>

其中，:xlink:href为xml语句，值为图标的url；aria-hidden设置为true，是避免屏幕拾取设备读取装饰作用的图标。

2、在主文件夹下新建common-components.js文件：

import IconSvg from components/svg.vue;
const install = Vue => {
    Vue.component('Icon',IconSvg);
}
export default install;

3、在main.js中全局引入‘Icon’组件

import commonComponents from './common-components.js';
Vue.use(commonComponents);

4、在其他vue文件中引用Icon组件

<Icon name="xxx"></Icon>

至此，自定义svg图标插件完成。