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...

Да, используйте простые .js файлы и подключайте импортами

Структура

projectFolder
  ...
  src
    components
      Component.vue
    utils
      numberWithComma.js

Component.vue

<template>
  <span>{{ valueChanged }}</span>
</template>

<script>
import numberWithComma from '../utils/numberWithComma.js';
// или настройте алиасы, тогда путь к утилитам может выглядеть так: '@/numberWithComma.js'

export default {
  data: ({
    value: 0.123456789  
  }),
  computed: {
    valueChanged() {
      return numberWithComma(this.value);
    }
  }
};
</script>

numberWithComma.js

const numberWithComma = (x) => x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ", ");

export default numberWithComma;