Как лучше подключать svg иконки во vue js?

Возник вопрос о том как лучше с точки зрения производительности и правильности организации кода подключать svg-иконки? Как это делаете вы?

1 Вариант:
Создать под каждую иконку свой компонент ("Close-icon.vue", "Menu-icon.vue", "Edit-icon.vue") и просто подключать как отдельный компонент.

2 Вариант:
Создать один компонент, например "Icons.vue", внутри добавить пропс name и через условные операторы рендерить необходимую иконку в зависимости от того, что лежит в пропс. Условно, если в пропс передали "close", то в компоненте "Icons.vue", через "v-if/v-else-if" рендерить ту, которая равна "close".

Может есть еще какие-то более лучшие варианты или готовые библиотеки?

Дополнительно:

Если точно нужны inline svg, то vue-svg-loader - он делает автоматически ваш 1-й вариант.

Ещё есть vite-svg-loader - подключается как плагин к vite и удобен тем, что можно из vite.config менять как импортировать файл (url или raw).

Можно написать свой компонент в который передавать имя иконки. Только не делайте свой 2-й вариант - его недостаток в том, что все иконки всегда загружаются в браузер даже если никогда не будут показаны.

через "v-if/v-else-if" рендерить ту, которая равна "close".

Если у вас всего 2-3 иконки - можно и так, но в общем случае - старайтесь не использовать длинные "портянки" if/else. Почти всегда можно обойтись без такого кода. (conponent is или defineAsyncComponent)

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

Если у вас есть не огромный(!) набор иконок для повсеместного использования - то вам нужен SVG Sprite. В других ответах уже накидали даже названий библиотек для Vue.

Если коротко, то использование выглядит следующим образом:

Кладете в public файл со спрайтами (обычно, сборка такого файла берут на себя библиотеки. Не хитрый SVG файл, который можно один раз собрать и юзать сборку)

А далее - элементарный компонент

Icon.vue

&lt;template&gt;   &lt;svg&gt;     &lt;use :xlink:href="`path-to-sprite.svg#${iconName}`"&gt;&lt;/use&gt;   &lt;/svg&gt; &lt;/template&gt;  &lt;script lang="ts" setup&gt;   defineProps&lt;{     iconName: string;   }&gt;(); &lt;/script&gt;

1	<template> <svg> <use :xlink:href="`path-to-sprite.svg#${iconName}`"></use> </svg> </template> <script lang="ts" setup> defineProps<{ iconName: string; }>(); </script>

Использования будет выглядеть следующим образом:
App.vue

&lt;template&gt;   &lt;div&gt;     &lt;Icon name="some-icon-1" /&gt;     &lt;Icon name="some-icon-2" /&gt;     &lt;Icon name="some-icon-3" /&gt;   &lt;/div&gt; &lt;/template&gt;  &lt;script lang="ts" setup&gt;   import Icon from './Icon.vue'; &lt;/script&gt;

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

Я в vue не работал, но в react.js лучшим вариантом по производительности считается создание svg спрайта
иконки не входят в компоненты и не увеличивают размер бандла.

Думаю в vue будет лучшим тоже такой способ, вот загуглил и нашел даже библиотеку
https://www.npmjs.com/package/vue-svg-sprite

Во времена HTTP 2 спрайты не столь актуальны.
VolgaVolga, а что актуально?
Петр Сергеев, на самом деле в этом комменте имеется ввиду спрайты картинок, раньше их использовали чтобы было меньше потоков загрузки, ведь максимально тогда грузилось по моему 9 потоков с одного домена остальные становились в очередь. Для этого и делали спрайты из картинок, или разносили картинки по разным доменам, чтобы все картинки грузить в одном потоке, или с разных доменов.
Но в данном вопросе суть совсем в другом, спрайты svg используются для того, чтобы уменьшить размер бандла, а значит увеличить скорость загрузки приложения.

У меня к примеру папка Icons и в паке IcomName.vue, внутри обычный содержащий svg-иконку. Когда нужна иконка, просто импортирую как обычный компонент Vue.

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

- Есть ответ
- 07.04.2024
Ответить
Для подключения SVG иконок во Vue.js есть несколько способов. Один из наиболее распространенных способов - это использование компонента Vue SVG Sprite.

Для начала установите пакет vue-svg-sprite с помощью npm:

Shell

npm install vue-svg-sprite --save

1

npm install vue-svg-sprite --save

Затем добавьте его в ваш проект:

JavaScript

import Vue from 'vue'; import VueSvgSprite from 'vue-svg-sprite'; Vue.use(VueSvgSprite);

1
2
3
4

import Vue from 'vue';
import VueSvgSprite from 'vue-svg-sprite';

Vue.use(VueSvgSprite);

Теперь вам нужно создать файл со всеми вашими SVG иконками. Обычно это делается путем создания файла с расширением .svg и помещения всех иконок внутри него.

Затем вы можете использовать иконки в своих компонентах Vue следующим образом:

XHTML

<div> </div> export default { name: 'MyComponent', };

1
2
3
4
5
6
7
8
9

  <div>

  </div>

export default {
  name: 'MyComponent',
};

Где icon-name - это имя вашей иконки, как она определена в вашем файле со всеми иконками.

Еще один способ - это использование встроенного свойства :src для тега:

XHTML

<div> <img alt="Icon"> </div> export default { name: 'MyComponent', };

1
2
3
4
5
6
7
8
9

  <div>
    <img alt="Icon">
  </div>

export default {
  name: 'MyComponent',
};

Здесь @/assets/icons/ - это путь к вашим SVG иконкам внутри вашего проекта.

Выберите подход, который лучше всего подходит для вашего проекта и начните использовать SVG иконки во Vue.js!

Как лучше подключать svg иконки во vue js?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как лучше подключать svg иконки во vue js?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно