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 вариант, а не напрямую компонент)

Answer 2

[MaxRyazan]

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

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