<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>