通用自定义组件注册到全局

如果自己自定义的通用组件频繁被调用，又不想每次都引入注册一遍，那该怎么办？
例如一个icon组件

<template>
  <div class="svg-icon-box">

    <svg v-if="type==='del'" class="svg-del" width="14px" height="14px" viewBox="0 0 14 14" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
      <title>删除</title>
      <desc>Created with Sketch.</desc>
      <g id="新主数据平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="删除默认" fill="#999999">
          <path
              d="M2.26030534,14.1 C2.22442748,14.0692475 2.18854962,14.030807 2.15267176,13.9923664 C2.19181124,14.030807 2.22442748,14.0692475 2.26030534,14.1 Z M1.19225634,14.1 C1.152738,14.0654035 1.11321966,14.030807 1.07633588,13.9923664 C1.11321966,14.030807 1.152738,14.0654035 1.19225634,14.1 Z M13.8289042,2.17122927 C13.9347654,2.27775423 13.9923664,2.4171766 13.9923664,2.56599823 C13.9923664,2.87617384 13.7261565,3.1268208 13.4194702,3.1268208 L13.0987729,3.1268208 L13.0987729,12.8879533 C13.0987729,13.4973387 12.6068295,13.9923664 12.0012408,13.9923664 L2.14680388,13.9923664 C1.54121526,13.9923664 1.0492718,13.4973387 1.0492718,12.8879533 L1.0492718,3.1268208 L0.557328346,3.1268208 C0.249085294,3.1268208 0,2.87617384 0,2.56599823 C0,2.25582262 0.250642077,2.00517566 0.557328346,2.00517566 L3.44516098,2.00517566 L3.44516098,1.10441316 C3.44516098,0.495027741 3.93710443,-1.70530257e-13 4.54269306,-1.70530257e-13 L9.44811657,-1.70530257e-13 C10.0537052,-1.70530257e-13 10.5456487,0.495027741 10.5456487,1.10441316 L10.5456487,2.00517566 L13.4194702,2.00517566 C13.5689214,2.00517566 13.7230429,2.06470431 13.8289042,2.17122927 Z M4.30534351,1.07633588 L9.6870229,1.07633588 L9.6870229,2.15267176 L4.30534351,2.15267176 L4.30534351,1.07633588 Z M11.8396947,12.9160305 L2.15267176,12.9160305 L2.15267176,3.22900763 L11.8396947,3.22900763 L11.8396947,12.9160305 Z M6.99618321,5.38167939 C7.29367048,5.38167939 7.53435115,5.6377731 7.53435115,5.95431128 L7.53435115,11.2670628 C7.53435115,11.5836009 7.29367048,11.8396947 6.99618321,11.8396947 C6.69869593,11.8396947 6.45801527,11.5836009 6.45801527,11.2670628 L6.45801527,5.95431128 C6.45801527,5.6377731 6.69869593,5.38167939 6.99618321,5.38167939 Z M3.76717557,5.38167939 C4.06466285,5.38167939 4.30534351,5.6377731 4.30534351,5.95431128 L4.30534351,11.2670628 C4.30534351,11.5836009 4.06466285,11.8396947 3.76717557,11.8396947 C3.4696883,11.8396947 3.22900763,11.5836009 3.22900763,11.2670628 L3.22900763,5.95431128 C3.22900763,5.6377731 3.4696883,5.38167939 3.76717557,5.38167939 Z M10.2251908,5.38167939 C10.5226781,5.38167939 10.7633588,5.6377731 10.7633588,5.95431128 L10.7633588,11.2670628 C10.7633588,11.5836009 10.5226781,11.8396947 10.2251908,11.8396947 C9.92770356,11.8396947 9.6870229,11.5836009 9.6870229,11.2670628 L9.6870229,5.95431128 C9.6870229,5.6377731 9.92770356,5.38167939 10.2251908,5.38167939 Z"
              id="Shape"></path>
        </g>
      </g>
    </svg>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      type: String,
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" type="text/scss">
  @import "../style/var";
  .svg-icon-box {width: 14px; height: 14px;
    svg {width: 100%; height: 100%;}
    .svg-del { transition: all ease $time;
      g {fill: #f56c6c;}
      &amp;:hover g {fill: #f19494;}
      &amp;:active g {fill: #f56c6c;}
    }
  }
</style>

在main.js入口文件中导入注册

import SvgIcon from '@/components/SvgIcon/index.vue'

Vue.component('SvgIcon',SvgIcon)

组件内直接使用

<svg-icon type='del'></svg-icon>)