GterForumWeB/src/components/SvgIcon.vue

<template>
	<!-- <svg class="svg-icon" :class="svgClass" xmlns="http://www.w3.org/2000/svg"> -->
	<!-- <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" /> -->

	<svg class="svg-icon" :class="className" xmlns="http://www.w3.org/2000/svg">
		<use :xlink:href="`#icon-${iconClass}`" xmlns:xlink="http://www.w3.org/1999/xlink" />
	</svg>
</template>
<script>
export default {
	name: 'SvgIcon',
	props: {
		iconClass: {
			type: String,
			required: true
		},
		className: {
			type: String,
			default: ''
		}
	},
	computed: {
		iconName() {
			return `#icon-${this.iconClass}`;
		},
		svgClass() {
			if (this.className) {
				return 'svg-icon ' + this.className;
			} else {
				return 'svg-icon';
			}
		}
	}
};
</script>
<style scoped>
.svg-icon {
	/* width: 100%;
		height: 100%; */
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>