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>