magic-editor/src/components/common/icon/magic-icon.vue

<template>
	<svg aria-hidden="true" :class="prefix">
		<use :xlink:href="symbolId" :class="prefix + '-' +icon"/>
	</svg>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
	prefix: {
		type: String,
		default: 'magic-icon'
	},
	icon: String,
	size: String,
});
const symbolId = computed(() => `#${props.prefix}-${props.icon}`)
</script>
<style scoped>
svg {
	width: 1.3em; 
	height: 1.3em;
	vertical-align: -0.25em;
	overflow: hidden;
	fill: var(--main-icon-color)
}
</style>