traxxx/assets/components/icon/icon.vue

<template>
	<div
		:class="{ active }"
		class="icon"
		v-html="svg"
	/>
</template>

<script>
export default {
	props: {
		icon: {
			type: String,
			default: null,
		},
		title: {
			type: String,
			default: null,
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			svg: null,
		};
	},
	beforeMount() {
		this.svg = require(`../../img/icons/${this.icon}.svg`).default; // eslint-disable-line global-require, import/no-dynamic-require
	},
};
</script>

<style lang="scss">
@import '../../css/theme';

.icon {
    fill: var(--text);
    display: inline-block;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;

    svg {
        width: 100%;
        height: 100%;
    }

    &.active {
        fill: var(--shadow);

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