traxxx-web/components/icon/icon.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(--glass);

        &:hover {
            fill: var(--text);
            cursor: pointer;
        }
    }
}
</style>