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.
41 lines
1.8 KiB
41 lines
1.8 KiB
import html from "html";
|
|
import { onMounted, ref } from "vue";
|
|
import { useAppStore } from "../../store/index.js";
|
|
|
|
export default {
|
|
template: html`<template v-if="name.indexOf('ep-')===0">
|
|
<component :is="name" />
|
|
</template>
|
|
<template v-else>
|
|
<g v-html="svg" />
|
|
</template> `,
|
|
props: {
|
|
name: {
|
|
default: "file",
|
|
},
|
|
},
|
|
setup(props) {
|
|
const svg = ref(null);
|
|
const appStore = useAppStore();
|
|
onMounted(async () => {
|
|
if (!props.name.startsWith("ep-")) {
|
|
try {
|
|
const url = `./assets/icons/${props.name}.svg`;
|
|
if (!appStore.cache.has(url)) {
|
|
const response = await fetch(url);
|
|
const result = await response.text();
|
|
appStore.cache.set(url, result);
|
|
}
|
|
svg.value = appStore.cache.get(url);
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
svg.value ??= `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>`;
|
|
}
|
|
}
|
|
});
|
|
return {
|
|
svg,
|
|
};
|
|
},
|
|
};
|
|
|