|
@@ -15,7 +15,9 @@ const props = defineProps({
|
|
// icon color
|
|
// icon color
|
|
color: propTypes.string,
|
|
color: propTypes.string,
|
|
// icon size
|
|
// icon size
|
|
- size: propTypes.number.def(16)
|
|
|
|
|
|
+ size: propTypes.number.def(16),
|
|
|
|
+ // icon svg class
|
|
|
|
+ svgClass: propTypes.string.def('')
|
|
})
|
|
})
|
|
|
|
|
|
const elRef = ref<ElRef>(null)
|
|
const elRef = ref<ElRef>(null)
|
|
@@ -34,6 +36,11 @@ const getIconifyStyle = computed(() => {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+const getSvgClass = computed(() => {
|
|
|
|
+ const { svgClass } = props
|
|
|
|
+ return `iconify ${svgClass}`
|
|
|
|
+})
|
|
|
|
+
|
|
const updateIcon = async (icon: string) => {
|
|
const updateIcon = async (icon: string) => {
|
|
if (unref(isLocal)) return
|
|
if (unref(isLocal)) return
|
|
|
|
|
|
@@ -66,13 +73,13 @@ watch(
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <ElIcon :class="prefixCls" :size="size" :color="color">
|
|
|
|
- <svg v-if="isLocal" aria-hidden="true">
|
|
|
|
|
|
+ <ElIcon :class="prefixCls" :color="color" :size="size">
|
|
|
|
+ <svg v-if="isLocal" aria-hidden="true" :class="getSvgClass">
|
|
<use :xlink:href="symbolId" />
|
|
<use :xlink:href="symbolId" />
|
|
</svg>
|
|
</svg>
|
|
|
|
|
|
<span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
|
|
<span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
|
|
- <span class="iconify" :data-icon="symbolId"></span>
|
|
|
|
|
|
+ <span :class="getSvgClass" :data-icon="symbolId"></span>
|
|
</span>
|
|
</span>
|
|
</ElIcon>
|
|
</ElIcon>
|
|
</template>
|
|
</template>
|