svg使用

Vue.component('XSvg', () => import('./abc-svg'))

 

 <x-svg

            icon-name="personl"

            height="24"

            @click.native=""

          >

            <icon-personl />

          </x-svg>

icon-personl
<template>
  <path d="M772.016 632.023c-39.228-39.229-85.763-68.498-136.531-86.546 26.775-13.284 51.501-30.977 73.254-52.73 52.552-52.551 81.494-122.422 81.494-196.741s-28.941-144.19-81.494-196.742c-52.551-52.551-122.422-81.493-196.741-81.493s-144.19 28.942-196.742 81.493c-52.552 52.551-81.494 122.422-81.494 196.742s28.941 144.19 81.494 196.741c21.753 21.753 46.481 39.446 73.256 52.73-50.769 18.049-97.303 47.317-136.533 86.546-66.188 66.187-104.010 153.166-107.423 246.208h48.731c3.387-80.029 36.14-154.783 93.129-211.77 55.771-55.771 128.558-88.327 206.651-92.867 6.274 0.419 12.583 0.646 18.929 0.646 6.346 0 12.656-0.227 18.929-0.646 78.092 4.54 150.88 37.096 206.651 92.867 56.988 56.987 89.742 131.741 93.129 211.77h48.731c-3.411-93.042-41.233-180.021-107.422-246.208zM282.467 296.005c0-126.565 102.968-229.534 229.534-229.534 126.565 0 229.534 102.969 229.534 229.534 0 120.305-93.040 219.28-210.942 228.775-6.171-0.305-12.37-0.46-18.591-0.46-6.223 0-12.421 0.156-18.592 0.46-117.902-9.495-210.941-108.47-210.941-228.775z"></path>
</template>

　　

xsvg
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 1024 1024"
    :aria-labelledby="iconName"
    role="presentation"
  >
    <title
      :id="iconName"
      lang="en"
    >{{ iconName }} icon</title>
    <g :fill="iconColor">
      <slot />
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    iconName: {
      type: String,
      default: 'box'
    },
    width: {
      type: [Number, String],
      default: 28
    },
    height: {
      type: [Number, String],
      default: 28
    },
    iconColor: {
      type: String,
      default: '#EACD91'
    }
  }
}
</script>
<style scoped>
svg {
  display: inline-block;
  vertical-align: baseline;
}
</style>