Craft CMS + Vue Icons

Icon.vue

<template>
  <svg>
    <use :xlink:href="path"></use>
  </svg>
</template>

<script>
export default {
  props: {
    name: String,
  },
  computed: {
    path() {
			// approx result "/assets/icons/facebook.svg#icon-definition"
      const path = `/assets/icons/${this.name}.svg#icon-definition`
			const url = encodeURI(path)
			return url
    }
  }
}
</script>

svgo-config.yml

plugins:
  - removeViewBox: false
  - removeDimensions: true
  - convertColors:
      currentColor: true
  - addAttributesToSVGElement:
      attribute: 'id="icon-definition"'

usage.twig

<!-- Basic Usage -->
<icon name="facebook"></icon>

<!-- Result -->
<svg>
  <use xlink:href="/assets/icons/facebook.svg#icon-definition"></use>
</svg>

<!-- Usage + styling (classes pass through automatically) -->
<icon name="facebook" class="text-red w-[16px]"></icon>

<!-- Result -->
<svg class="text-red w-[16px]">
  <use xlink:href="/assets/icons/facebook.svg#icon-definition"></use>
</svg>