Как компактно вставлять svg с возможностью изменения его свойства?

Question

[SherbakovFirst]

Всем привет.
При вёртке частенько надо вставлять SVG. Иногда они бывают огромными. Разумеется мне надо взаимодействовать с fill или stroke, поэтому вставка через тэг img не подходит.
Какие есть способы вставлять SVG и иметь возможность его изменения? Кроме как создание компонентов под SVG

Answer 1

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

А в чем сложность "создания компонента под svg"? В простейшем случае там просто взять его и обернуть в template, добавить в него в нужные места атрибуты и сверху script setup с логикой добавить.

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

Answer 2

[MaxRyazan]

Смотря в каком контексте.
Последний раз я вставлял svg во vue компонент с помощью axios. Потом прекрасно можно взаимодействовать с ним - менять цвета и тп.

Выглядит примерно так - отправляешь axios запрос на путь к своей картинке и потом контейнеру, куда ты хочешь вставить svg добавляешь innerHtml равный ответу axios.
Получается асинхронно да, но тем не менее всё работает прекрасно.

const result = await localAxios.get(PATH)
container.innerHTML = result.data

PATH - путь до svg. Типа './public/assets/svg/logo.svg'
localAxios - инстанс экземпляра axios

Если вынести путь в пропсы, получится прекрасный переиспользуемый компонент.