Pike Pikovskyy

На самом деле, решение зависит от ситуации.

Если у вас есть не огромный(!) набор иконок для повсеместного использования - то вам нужен 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...