Как импортировать svg во vue 3?

Question

[Esm322]

Как правильно импортировать svg в проект?
У меня есть таблица с данными, один из столбцёв содержит информацию о том как связаться (телефон, email и тд). Эти данные заполняются через селект и инпут. Нужно чтобы исходя из значения селекта в столбец рендерилась svg иконка. Как можно это реализовать. Был вариант через Object.assign:

remadeContacts() {
      return this.contacts ? this.contacts.map((contact) => {
        if (contact.selectValue === 'phone') {
          Object.assign(contact, { svg: PhoneSVG });
        }

        return contact;
      }) : [];

Но понял что через SVG компонент не получится реализовать.
Как нужно правильно импортировать svg, чтобы потом подставлять в template?
Заранее спасибо

Answer 1

[YepBro]

1) Можно создать отдельный компонент с иконкой (или набором иконок) и импортировать его.

2) Можно использовать vue-svg-loader, Vite SVG loader или аналогичные библиотеки.

Comments

[Esm322]

YepBro Спасибо, первый вариант помог