|
@@ -1,17 +1,27 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <i :class="`magic-icon magic-icon-${icon}`" :style="style"/>
|
|
|
|
|
|
|
+ <svg aria-hidden="true" :class="prefix">
|
|
|
|
|
+ <use :xlink:href="symbolId" :class="prefix + '-' +icon"/>
|
|
|
|
|
+ </svg>
|
|
|
</template>
|
|
</template>
|
|
|
<script setup>
|
|
<script setup>
|
|
|
|
|
+import { computed } from 'vue'
|
|
|
|
|
+
|
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
|
- icon: String,
|
|
|
|
|
- size: String
|
|
|
|
|
-})
|
|
|
|
|
-const style = {
|
|
|
|
|
- fontSize: props.size
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ prefix: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: 'magic-icon'
|
|
|
|
|
+ },
|
|
|
|
|
+ icon: String,
|
|
|
|
|
+ size: String,
|
|
|
|
|
+});
|
|
|
|
|
+const symbolId = computed(() => `#${props.prefix}-${props.icon}`)
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
-.magic-icon{
|
|
|
|
|
- color: var(--main-icon-color);
|
|
|
|
|
|
|
+svg {
|
|
|
|
|
+ width: 1.3em;
|
|
|
|
|
+ height: 1.3em;
|
|
|
|
|
+ vertical-align: -0.25em;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ fill: var(--main-icon-color)
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
mxd