Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

Question

[Антон Вебсайтовский]

Поставил плагин vue-svg-sprite, для vue3, для того, чтобы подключить файл с иконками и уже с него показывать по названию svg, нужный svg в нужном месте.

Ошибки нет, но и не выводит.

Как я сделал: (разные варианты для теста прописал для вывода).

index.html

<svg-icon name="tonicon" class="icon" style="color: #000; width: 20px" />
	<svg-icon name="icon-tonicon" class="icon" style="color: #000; width: 20px" />
	<svg-icon name="icon-home-page" class="icon" />

	<svg class="icon" style="color: #000; width: 20px">
		<use :xlink:href="'#' + 'icon-tonicon'" />
	</svg>

	<svg class="icon" style="color: #000; width: 20px">
		<use :xlink:href="'#' + 'tonicon'" />
	</svg>

main.js

import * as SvgSprite from 'vue-svg-sprite'

app.use(SvgSprite, {
	url: './assets/icon/sprite.svg', // Укажите путь к вашему файлу с иконками
	class: 'svg-icon', // Класс, который будет добавлен к иконкам
})

Answer 1

[Антон Антон]

С vite точно работает плагин https://github.com/meowtec/vite-plugin-svg-sprite (я для большей гибкости использую vanilla вариант, а не напрямую компонент)

Comments

[Антон Вебсайтовский]

а запросы как идти будет, у данного модуля, через http(s)?

[Антон Антон]

Антон Вебсайтовский, оно при сборке приложения соберет все используемые иконки и заинлайнит их в dom дерево одним svg

[Антон Вебсайтовский]

Антон Антон, так у меня и так собраны, я собираю обычно через сайт один, делаю себе сборку иконок одним файлом.

[Антон Антон]

Антон Вебсайтовский, много работы лишней, когда состав иконок меняется или когда надо из разных мест или вообще из фигмы взять иконки. ну да ладно, хозяин барин )
есть https://www.npmjs.com/package/vite-svg-loader которым можно подключить конкретный svg как компонент, вставить его в приложение (он похожим образом заинлайнится) и потом использовать символы из него.

[Антон Вебсайтовский]

Антон Антон, А мне удобно так, я собрал пак и все, есть сайт, где я загружаю пак свой, и там удаляю, меняю, добавляю.

Вообще я подумал, ты прав, куда проще сразу в папке удалять или добавлять, минус, что не видно какая иконка в win10, надо открывать ее, чтоб видно было. Ну либо сразу на сайте выводить, чтоб видно было.

Минус данного модуля, что как картинку нельзя вывести или можно?, img, лучше для seo.

Насчет: (почему-то не заработало у меня)
https://www.npmjs.com/package/vite-svg-loader

[Антон Антон]

Антон Вебсайтовский, вот так инлайн svg с этим плагином получается:

<script setup>
import LogoText from 'assets/logo-letters.svg?component'
</script>
<template>
  <logo-text/>
</template>

(всякие классы и прочее я вырезал из кода, оставил только важное)

[Антон Антон]

Антон Вебсайтовский,

минус, что не видно какая иконка в win10

в vs code с некоторых пор при клике на svg открывается иконка, а через "open with -> text editor" с плагином SVG будет превью сразу справа. (там же можно настроить, чтобы всегда текст открывался вместо картинки)

[Антон Антон]

Антон Вебсайтовский,

Минус данного модуля, что как картинку нельзя вывести или можно?

ну так если вывести без указания нулевого размера -то картинка и будет? + ничего не мешает просто указать путь к ассету как src у картинки.

[Антон Вебсайтовский]

Антон Антон, да там плагин можно поставить, в нем видно ! но вс коде грузиться дольше, чем обычный просмотр фото в винде.

Насчет вывода в картинку, так? (кстати, работает).

<img src="assets/logo-letters.svg?component" alt="" title="">

[Антон Вебсайтовский]

Антон Антон, как просто выводить с этим плагином.

[Антон Антон]

Антон Вебсайтовский,

как просто выводить с этим плагином.

ну вот выше код простого вывода svg в html - импорт как компонента и использование этого компонента в шаблоне. мне так нужно было сделать чтобы стилями красить его по разному, но это не иконка.

если вывести в корневом компоненте у указанием нулевого размера, то его символы потом можно использовать, если вывести ничего не указывая (например на служебной странице) - то будет просто инлайновый svg.

но вс коде грузиться дольше, чем обычный просмотр фото в винде.

ну я в принципе в vs code все делаю и не выхожу из него. поэтому не понимаю, зачем вообще проводник нужен, когда работаешь.

[Антон Вебсайтовский]

Антон Антон, так как лучше иконку выводить, в img, теге можно писать титле и алт, что плюс для сайта.

Там и класс прописать можно.


А тут как класс прописать?

[Антон Антон]

Антон Вебсайтовский, ничего не понимаю. вот выше я указал способ загрузить svg инлайн в виде компонента, чтобы использовать дальше из него символы любым способом. классы и стили у него указываются как и любого другого компонента.

[Антон Вебсайтовский]

Антон Антон, А как выводить спрайтами, подключив один файл, где много иконок.

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

1. Вставка SVG как кода ()
Преимущества:
Гибкость: Вы можете изменять цвет, размер и другие атрибуты SVG с помощью CSS или JavaScript.
Производительность: SVG, встроенные как код, не требуют дополнительных HTTP-запросов, что ускоряет загрузку страницы.
Анимация: Вы можете анимировать элементы SVG с помощью CSS или JavaScript.
Доступность: Можно добавить ARIA-атрибуты для улучшения доступности.

Недостатки:
Усложнение кода: Вставка SVG как кода увеличивает объём HTML-кода, что может сделать его менее читаемым.
Кэширование: SVG не кэшируются отдельно, так как они являются частью HTML.
SEO: Если SVG используется для декоративных целей, это не влияет на SEO. Однако, если SVG содержит текстовую информацию, её можно индексировать.

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <path d="M4.351 29.461s-.028.715.67.715l8.066-.009.012-6.61s-.114-1.09.944-1.09h3.347c1.251 0 1.174 1.09 1.174 1.09l-.014 6.588h7.896c.887 0 .847-.891.847-.891V17.069L16.165 7.171 4.352 17.069V29.46zM0 16.148s1.003 1.849 3.191 0L16.263 5.089l12.256 10.99c2.532 1.826 3.481 0 3.481 0L16.263 1.824zM28.222 5.063h-3.153l.013 3.823 3.14 2.663z"></path>
</svg>

2. Вставка SVG как изображения ()
Преимущества:
Простота: Вставка SVG через делает код чище и проще для чтения.
Кэширование: SVG, загруженные как изображения, кэшируются браузером, что улучшает производительность при повторных посещениях.
SEO: Вы можете использовать атрибуты alt и title для описания изображения, что полезно для SEO и доступности.
Удобство: Легко заменять иконки, не изменяя HTML-код.

Недостатки:
Ограниченная гибкость: Вы не можете изменять цвет или анимировать SVG с помощью CSS, если они вставлены через .
Дополнительные HTTP-запросы: Каждое изображение требует отдельного запроса, что может замедлить загрузку страницы.

<img src="/src/assets/icons/02-home-page.svg" alt="Домой" title="Перейти на главную страницу">

3. Альтернативный подход: использование с SVG-спрайтами

Этот подход сочетает в себе преимущества обоих методов. Вы создаёте SVG-спрайт (один файл с несколькими иконками) и используете его через .

Преимущества:
Кэширование: SVG-спрайт кэшируется как один файл.
Гибкость: Вы можете изменять цвет и размер иконок с помощью CSS.
Чистый код: HTML остаётся чистым, так как SVG-код находится в отдельном файле.

Создайте SVG-спрайт:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="home-icon" viewBox="0 0 32 32">
    <path d="M4.351 29.461s-.028.715.67.715l8.066-.009.012-6.61s-.114-1.09.944-1.09h3.347c1.251 0 1.174 1.09 1.174 1.09l-.014 6.588h7.896c.887 0 .847-.891.847-.891V17.069L16.165 7.171 4.352 17.069V29.46zM0 16.148s1.003 1.849 3.191 0L16.263 5.089l12.256 10.99c2.532 1.826 3.481 0 3.481 0L16.263 1.824zM28.222 5.063h-3.153l.013 3.823 3.14 2.663z"></path>
  </symbol>
</svg>

Используйте иконку в HTML:

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

------------------------
4. Что выбрать?

Используйте встроенный SVG ():
Если вам нужно изменять цвет или анимировать иконку.
Если иконка небольшая и используется один раз на странице.

Используйте :
Если иконка используется многократно и должна кэшироваться.
Если вам важны атрибуты alt и title для SEO.

Используйте SVG-спрайты:
Если у вас много иконок, и вы хотите сохранить гибкость и производительность.
------------------------
5. SEO и доступность
Для SEO всегда добавляйте атрибуты alt и title, если SVG используется как изображение ().
Для встроенного SVG используйте ARIA-атрибуты, такие как aria-label или role="img", чтобы улучшить доступность.
------------------------
Итог
Для простоты и SEO: Используйте .
Для гибкости и анимации: Используйте встроенный SVG ().
Для баланса: Используйте SVG-спрайты с .

[Антон Антон]

Антон Вебсайтовский,

А как выводить спрайтами, подключив один файл, где много иконок.

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

так и выводить. Один раз включаешь инлайново файл с твоими иконками и из него используешь идентификаторы. В данном примере в твоем файле должен быть элемент
<symbol id="home-icon">...</symbol>
и он вставится в то место где ты потом указал

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

Это подход 3. С использованием готового файла с символами: используй vite-svg-loader (инлайнить svg нужно руками в виде компонента в корень приложения + при изменении набора иконок надо руками же переподготавливать файл)

Либо если есть набор файлов с отдельными иконками - то используй плагин vite-plugin-svg-sprite, который сам соберет иконки в один svg, в котором каждый исходный файл будет отдельным символом и заинлайнит его. При этом добавление иконок упрощено, а удаление вообще само (даже если они будут в исходниках - если они не используются, их не будет в итоговой сборке)

[Антон Вебсайтовский]

Антон Антон, Все же пришли к тому, что спрайтами лучший вариант )))
И как я понял, для этого, нужно использовать icons.svg, где будет куча иконок и мы вытягивать их можем.

Таким образом:

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

Но и то как у меня щас, тож я так понимаю можно подключить один файл и вытягивать нужные иконки.
Я если верно понял, то подгружаем так:

import MyIcon from './assets/icons/iconsall.svg'

И выводим так: (где #home-icon), имя иконки.

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

А или даже так можно выводить: (а он так каждый раз будет лесть и искать, это нагрузку не увеличит ?)

<svg class="icon">
  <use xlink:href="icons.svg#home-icon"></use>
</svg>

Сайт где я собираю иконки в пак, там есть для сохранения разные решения.
Вот думаю что поставить, чтобы сохранил в ...


Хотя смотрю он сохраняет, формат вроде, то что надо для спрайтов.

<symbol id="icon-ogo1l" viewBox="0 0 32 32">
<path d="M5.286 2.675c-1.254 0.422-2.125 1.267-2.534 2.458-0.269 0.742-0.243 1.984 0.051 2.611 0.448 0.986 11.942 20.992 12.237 21.299 0.192 0.192 0.486 0.32 0.858 0.358 0.512 0.064 0.627 0.026 0.96-0.294 0.218-0.205 1.126-1.638 2.035-3.187 0.896-1.549 2.33-4.019 3.187-5.504s2.778-4.787 4.275-7.334c1.485-2.56 2.79-4.915 2.893-5.222 0.307-0.909 0.243-2.163-0.141-2.995-0.358-0.781-1.062-1.574-1.651-1.882-1.011-0.538-1.254-0.55-11.584-0.55-9.19 0.013-9.971 0.026-10.586 0.243zM14.592 13.978c0 5.171-0.051 8.55-0.115 8.486-0.064-0.077-1.139-1.907-2.394-4.096-1.242-2.189-3.264-5.722-4.48-7.846-1.229-2.138-2.227-4.019-2.227-4.186 0-0.154 0.115-0.435 0.269-0.627l0.256-0.333h8.691v8.602zM26.355 5.709c0.371 0.461 0.346 1.114-0.064 1.83-0.192 0.32-0.64 1.101-1.011 1.741-2.496 4.275-5.248 8.998-5.363 9.216-0.525 0.96-2.419 4.16-2.458 4.16-0.026 0-0.051-3.891-0.051-8.64v-8.64h8.691l0.256 0.333z"></path>
</symbol>

Работает, и стили:

.icon {
width: 30px;
fill: #007bff;
}

[Антон Антон]

Антон Вебсайтовский,

Но и то как у меня щас, тож я так понимаю можно подключить один файл и вытягивать нужные иконки.
Я если верно понял, то подгружаем так:
import MyIcon from './assets/icons/iconsall.svg'

это надо сделать в корневом компоненте, и включить этот компонент в шаблон. импорт должен быть с параметром ?component, иначе это будет не компонент, а строка с путем до ассета.

И выводим так: (где #home-icon), имя иконки.

<svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

да

А или даже так можно выводить: (а он так каждый раз будет лесть и искать, это нагрузку не увеличит ?)

<svg class="icon">
  <use xlink:href="icons.svg#home-icon"></use>
</svg>

нет, это будет работать не во всех случаях (если в файле есть ссылки, например на градиенты или на сами символы, то они сломаются). теоретически можно попробовать использовать и так, icons.svg тогда должен находиться так же как и все остальные ассеты (картинки и т.п.). В таком случае импортировать как компонент и инлайнить не надо, плагины тоже никакие не нужны. Но помимо того, что сами иконки могут сломаться, ещё может быть задержка при запросе этого файла (он будет внешним относительно страницы).

он так каждый раз будет лесть и искать, это нагрузку не увеличит ?

Запрос в нормальных условиях будет один раз

[Антон Вебсайтовский]

Антон Антон, Понял, то есть, если на сайте иконок много, и на странице 20, то запрос будет один.
Да хочу в рамках vue3 сделать, чтобы все по феншуй было )

[Антон Антон]

Антон Вебсайтовский, я делаю набор svg, который собирается vite-plugin-svg-sprite, как в ответе и написал.

[Антон Вебсайтовский]

Антон Антон, ну разницы нет где собирать, главное формат данного пакета, чтобы подходил, и тогда будет выводить иконки.

Answer 2

[MaxRyazan]

попробуй этот пакет
https://www.npmjs.com/package/svgue

там два варианта рендера иконок - через axios, если он есть в твоём проекте, или, если нет - то по id svg картинки.

Comments

[Антон Вебсайтовский]

это все в рамках vue3? или же нет.

[MaxRyazan]

да, vue3

[Антон Вебсайтовский]

MaxRyazan, я одно понять не могу, почему такие сложности с внедрением таких простых элементов.

А данный модуль,как работает, там можно файл с иконками подключить, ну не где 1 иконка, а пакет целый и потом вытягивать нужные иконки и выводить.

[MaxRyazan]

там иконки берутся из папки, которую нужно указать.
Например, если у тебя иконки лежат в /public/icons, то при использовании компонента нужно пропсом прокинуть path="/icons".
затем, указать название иконки (например, если нужно отобразить иконку logo.svg, то прокидываем пропсом icon="logo".
затем, два пути рендеринга - либо с помощью axios, тогда нужно в конфиг прокинуть свой экземпляр axios, либо, если не через axios, то самой иконке выставить какой то id (например, id=myIcon) и пропсом прокинуть это название в компонент useId="myIcon"

Итого без axios:

<svgue mode="usingIds" path="/icons"  icon="logo"  useId="myIcon"  width="30px" height="30px" />

Итого с axios:

<svgue path="/icons"  icon="logo" mode="usingAxios" width="30px" height="30px" />

// твой main.ts file
import {createApp} from 'vue'
import App from './App.vue'
import {defineConfig} from "svgue";
import axios from "axios"; // or import your axios instance and pass it to the config.

const app = createApp(App)

defineConfig({
    path: '/assets/img/icons/',
    axiosInstance: axios.create()
}, app)

app.mount('#app')

[Антон Вебсайтовский]

MaxRyazan, а все понял, я пробовал метод vue-svg-sprite, но так и не вышло.
Значит, указываем папку и там каждая иконка должна отдельно лежать, а не в одном файле.
Хотя в этом есть смысл, скачал иконку и не надо запихивать в пакет иконок и потом все это сохранять, а сразу можно будет закинуть в папку.

Попробую данный метод, который советуешь.
Спасибо.

А в каком формате в файле должны быть иконки? да id есть.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="128" viewBox="0 0 752 128">
<svg id="icon-ogo1l" width="32" height="32" viewBox="0 0 32 32" x="0" y="0">
<path d="M5.286 2.675c-1.254 0.422-2.125 1.267-2.534 2.458-0.269 0.742-0.243 1.984 0.051 2.611 0.448 0.986 11.942 20.992 12.237 21.299 0.192 0.192 0.486 0.32 0.858 0.358 0.512 0.064 0.627 0.026 0.96-0.294 0.218-0.205 1.126-1.638 2.035-3.187 0.896-1.549 2.33-4.019 3.187-5.504s2.778-4.787 4.275-7.334c1.485-2.56 2.79-4.915 2.893-5.222 0.307-0.909 0.243-2.163-0.141-2.995-0.358-0.781-1.062-1.574-1.651-1.882-1.011-0.538-1.254-0.55-11.584-0.55-9.19 0.013-9.971 0.026-10.586 0.243zM14.592 13.978c0 5.171-0.051 8.55-0.115 8.486-0.064-0.077-1.139-1.907-2.394-4.096-1.242-2.189-3.264-5.722-4.48-7.846-1.229-2.138-2.227-4.019-2.227-4.186 0-0.154 0.115-0.435 0.269-0.627l0.256-0.333h8.691v8.602zM26.355 5.709c0.371 0.461 0.346 1.114-0.064 1.83-0.192 0.32-0.64 1.101-1.011 1.741-2.496 4.275-5.248 8.998-5.363 9.216-0.525 0.96-2.419 4.16-2.458 4.16-0.026 0-0.051-3.891-0.051-8.64v-8.64h8.691l0.256 0.333z"></path>
</svg>

[MaxRyazan]

вот эти три строки из иконки убери, они по идее лишние.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=

в какой папке иконки? если используешь vite, ложи в public/icons.
Ниже как должно у тебя работать

<svgue mode="usingIds" path="/icons"  icon="logo"  useId="icon-ogo1l" />