<template>
|
<SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class, 'anticon']" :spin="spin" />
|
<span v-else ref="elRef" :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']" :style="getWrapStyle"></span>
|
</template>
|
<script lang="ts">
|
import type { PropType } from 'vue';
|
import { defineComponent, ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue';
|
import SvgIcon from './SvgIcon.vue';
|
import Iconify from '@purge-icons/generated';
|
import { isString } from '/@/utils/is';
|
import { propTypes } from '/@/utils/propTypes';
|
|
const SVG_END_WITH_FLAG = '|svg';
|
export default defineComponent({
|
name: 'Icon',
|
components: { SvgIcon },
|
props: {
|
// icon name
|
icon: propTypes.string,
|
// icon color
|
color: propTypes.string,
|
// icon size
|
size: {
|
type: [String, Number] as PropType<string | number>,
|
default: 16,
|
},
|
spin: propTypes.bool.def(false),
|
prefix: propTypes.string.def(''),
|
},
|
setup(props) {
|
const elRef = ref<ElRef>(null);
|
|
const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
|
const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
|
const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`);
|
|
const update = async () => {
|
if (unref(isSvgIcon)) return;
|
|
const el = unref(elRef);
|
if (!el) return;
|
|
await nextTick();
|
const icon = unref(getIconRef);
|
if (!icon) return;
|
|
const svg = Iconify.renderSVG(icon, {});
|
if (svg) {
|
el.textContent = '';
|
el.appendChild(svg);
|
} else {
|
const span = document.createElement('span');
|
span.className = 'iconify';
|
span.dataset.icon = icon;
|
el.textContent = '';
|
el.appendChild(span);
|
}
|
};
|
|
const getWrapStyle = computed((): CSSProperties => {
|
const { size, color } = props;
|
let fs = size;
|
if (isString(size)) {
|
fs = parseInt(size, 10);
|
}
|
|
return {
|
fontSize: `${fs}px`,
|
color: color,
|
display: 'inline-flex',
|
};
|
});
|
|
watch(() => props.icon, update, { flush: 'post' });
|
|
onMounted(update);
|
|
return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
|
},
|
});
|
</script>
|
<style lang="less">
|
.app-iconify {
|
display: inline-block;
|
// vertical-align: middle;
|
|
&-spin {
|
svg {
|
animation: loadingCircle 1s infinite linear;
|
}
|
}
|
}
|
|
span.iconify {
|
display: block;
|
min-width: 1em;
|
min-height: 1em;
|
background-color: @iconify-bg-color;
|
border-radius: 100%;
|
}
|
</style>
|
