59 lines
855 B
Vue
59 lines
855 B
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
:class="{ active }"
|
||
|
|
:title="title"
|
||
|
|
class="icon"
|
||
|
|
v-html="svg"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
|
||
|
|
const svg = ref(null);
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
icon: {
|
||
|
|
type: String,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
active: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
import(`../../assets/img/icons/${props.icon}.svg?raw`).then((raw) => {
|
||
|
|
svg.value = raw.default;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.icon {
|
||
|
|
fill: var(--text);
|
||
|
|
display: inline-block;
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 1rem;
|
||
|
|
height: 1rem;
|
||
|
|
font-size: 0; /* prevent flashing null before icon is loaded */
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
fill: var(--shadow);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
fill: var(--text);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|