# 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
}</