traxxx-web/components/icon/icon.vue

59 lines
854 B
Vue
Raw Normal View History

<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(--glass);
&:hover {
fill: var(--text);
cursor: pointer;
}
}
}
</style>