You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
928 B
46 lines
928 B
<template>
|
|
<div ref="el" :class="$attrs.class" style="vertical-align: text-bottom" />
|
|
</template>
|
|
|
|
<script setup="props">
|
|
import { watch, ref, onMounted, nextTick, defineProps } from "vue"
|
|
import Iconify from "@purge-icons/generated"
|
|
|
|
const props = defineProps({
|
|
icon: String
|
|
})
|
|
|
|
const el = ref(null)
|
|
|
|
const update = async () => {
|
|
if (el.value) {
|
|
await nextTick()
|
|
const svg = Iconify.renderSVG(props.icon, {})
|
|
if (svg) {
|
|
el.value.textContent = ""
|
|
el.value.appendChild(svg)
|
|
} else {
|
|
const span = document.createElement("span")
|
|
span.className = "iconify"
|
|
span.dataset.icon = props.icon
|
|
el.value.textContent = ""
|
|
el.value.appendChild(span)
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(() => props.icon, update, { flush: "post" })
|
|
|
|
onMounted(update)
|
|
</script>
|
|
|
|
<style>
|
|
span.iconify {
|
|
background: #5551;
|
|
border-radius: 100%;
|
|
min-width: 1em;
|
|
min-height: 1em;
|
|
display: block;
|
|
}
|
|
</style>
|