На самом деле, решение зависит от ситуации.
Если у вас есть не огромный(!) набор иконок для повсеместного использования - то вам нужен SVG Sprite. В других ответах уже накидали даже названий библиотек для Vue.
Если коротко, то использование выглядит следующим образом:
Кладете в public файл со спрайтами (обычно, сборка такого файла берут на себя библиотеки. Не хитрый SVG файл, который можно один раз собрать и юзать сборку)
А далее - элементарный компонент
Icon.vue
<template>
<svg>
<use :xlink:href="`path-to-sprite.svg#${iconName}`"></use>
</svg>
</template>
<script lang="ts" setup>
defineProps<{
iconName: string;
}>();
</script>
Использования будет выглядеть следующим образом:
App.vue
<template>
<div>
<Icon name="some-icon-1" />
<Icon name="some-icon-2" />
<Icon name="some-icon-3" />
</div>
</template>
<script lang="ts" setup>
import Icon from './Icon.vue';
</script>
Тут есть небольшой подводный камень, связанный с размерами (use не учитывает width, height, viewBox иконки, которая в Spritemap). Обходится элементарно - добавлением размера для svg с помощью CSS.
Если вам нужны 2-3 иконки - более рационально будет просто заинлайнить их в template. Не очень оптимизировано, зато не тратим кучи времени на ненужные телодвижения.
В случае с большим количеством иконок (более 500) SVG Sprite будет неэффективен ввиду того, что на каждую страницу будет загружаться тонна ненужных иконок. В таких случаях, лучше хранить иконки без спрайта, просто в ассетах и использовать ссылки на них в
<use>.
Ссылки:
-
https://developer.mozilla.org/en-US/docs/Web/SVG/E... 
