【vue3】：Icon 图标处理方案

# Icon 图标处理方案

图标无非是两种图标，自定义图标及UI框架中自带的图标

因此：我们需要封装一个可以兼容外部图标和内部图标的组件

# 封装自定义 SvgIcon 组件库

基本代码

<template>
  <!-- 外部图标 -->
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className"></div>
  <!-- 内部图标 -->
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
     <use :xlink:href="iconName"/>
  </svg>
</template>
<script setup>
import {
    defineProps, computed } from 'vue'
const props = defineProps({
   
  // icon 图标
  icon: {
   
    type: String,
    required: true
  }</