Я использую
vite-plugin-svg-sprite с настройками
{
symbolId: 'icon-[name]-[hash]',
include: ['**/src/assets/icons/**/*.svg']
}
все, что лежит в src/assets/icons собирается в спрайт, по месту использования надо делать как-то так:
import iconSettings from 'assets/icons/settings.svg'
<svg xmlns="http://www.w3.org/2000/svg">
<use :href="`#${iconSettings}`"/>
</svg>
(я, конечно, использую компонент-обертку)
А вообще пути с "../../../../" - зло, надо настроить алиасы (jsconfig + vite.config.js или что там (например я чаще всего использую quasar и там это quasar.config.js). например у меня assets - это алиас на src/assets)