Ответы пользователя по тегу Веб-разработка
  • Как лучше подключать svg иконки во vue js?

    @Pike-meow
    Pike - is a life
    На самом деле, решение зависит от ситуации.

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