Vue Inline SVG Wrapper

SvgIcon.vue

<template>
	<inline-svg
		:src="require(`@/assets/svg/${name}.svg`)"
		:width="width || size || null"
		:height="height || size || null"
		:style="{ fill: color || undefined, stroke: strokeColor || undefined }"
	/>
</template>

<script lang="ts">
import Vue from 'vue'
import InlineSvg from 'vue-inline-svg'

export default Vue.extend({
	name: 'SvgIcon',
	components: {
		InlineSvg,
	},
	props: {
		name: {
			type: String,
			required: true,
		},
		width: {
			type: Number,
			default: null,
		},
		height: {
			type: Number,
			default: null,
		},
		size: {
			type: Number,
			default: null,
		},
		color: {
			type: String,
			default: undefined,
		},
		strokeColor: {
			type: String,
			default: undefined,
		},
	},
})
</script>