github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-25 02:58:43 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

perf(icon): icon and SvgIcon integration

Browse Source
This commit is contained in:
Vben 2021-03-09 00:19:44 +08:00
parent 9e3adaa30c
commit e8fe6a929b
1 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Icon/src/index.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle"></span> <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" />
<span
v-else
ref="elRef"
:class="[$attrs.class, 'app-iconify anticon']"
:style="getWrapStyle"
></span>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { PropType } from 'vue'; import type { PropType } from 'vue';
@ -13,12 +19,16 @@
computed, computed,
CSSProperties, CSSProperties,
} from 'vue'; } from 'vue';
import SvgIcon from './SvgIcon.vue';
import Iconify from '@purge-icons/generated'; import Iconify from '@purge-icons/generated';
import { isString } from '/@/utils/is'; import { isString } from '/@/utils/is';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
const SVG_END_WITH_FLAG = '|svg';
export default defineComponent({ export default defineComponent({
name: 'GIcon', name: 'GIcon',
components: { SvgIcon },
props: { props: {
// icon name // icon name
icon: propTypes.string, icon: propTypes.string,
@ -34,28 +44,30 @@
setup(props) { setup(props) {
const elRef = ref<ElRef>(null); const elRef = ref<ElRef>(null);
const getIconRef = computed(() => { const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
const { icon, prefix } = props; const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, ''));
return `${prefix ? prefix + ':' : ''}${icon}`; const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`);
});
const update = async () => { const update = async () => {
if (unref(isSvgIcon)) return;
const el = unref(elRef); const el = unref(elRef);
if (el) { if (!el) return;
await nextTick();
const icon = unref(getIconRef); await nextTick();
if (!icon) return; const icon = unref(getIconRef);
const svg = Iconify.renderSVG(icon, {}); if (!icon) return;
if (svg) {
el.textContent = ''; const svg = Iconify.renderSVG(icon, {});
el.appendChild(svg); if (svg) {
} else { el.textContent = '';
const span = document.createElement('span'); el.appendChild(svg);
span.className = 'iconify'; } else {
span.dataset.icon = icon; const span = document.createElement('span');
el.textContent = ''; span.className = 'iconify';
el.appendChild(span); span.dataset.icon = icon;
} el.textContent = '';
el.appendChild(span);
} }
}; };
@ -78,7 +90,7 @@
onMounted(update); onMounted(update);
return { elRef, getWrapStyle }; return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
}, },
}); });
</script> </script>