Как импортировать svg во vue 3?
Как правильно импортировать svg в проект?
У меня есть таблица с данными, один из столбцёв содержит информацию о том как связаться (телефон, email и тд). Эти данные заполняются через селект и инпут. Нужно чтобы исходя из значения селекта в столбец рендерилась svg иконка. Как можно это реализовать. Был вариант через Object.assign:
remadeContacts() { return this.contacts ? this.contacts.map((contact) => { if (contact.selectValue === 'phone') { Object.assign(contact, { svg: PhoneSVG }); } return contact; }) : []; |
remadeContacts() { return this.contacts ? this.contacts.map((contact) => { if (contact.selectValue === 'phone') { Object.assign(contact, { svg: PhoneSVG }); } return contact; }) : [];
Но понял что через SVG компонент не получится реализовать.
Как нужно правильно импортировать svg, чтобы потом подставлять в template?
Заранее спасибо
Дополнительно:
1) Можно создать отдельный компонент с иконкой (или набором иконок) и импортировать его.
2) Можно использовать vue-svg-loader, Vite SVG loader или аналогичные библиотеки.
- YepBro Спасибо, первый вариант помог
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для импорта SVG файла во Vue 3 можно воспользоваться несколькими способами. Вот несколько из них:
1. **Использование компонента `VueInlineSVG`**:
Вы можете установить библиотеку `vue-inline-svg` с помощью npm:
```
npm install vue-inline-svg
```
Затем в вашем компоненте вы можете импортировать SVG файл и использовать его в шаблоне:
```html
import VueInlineSVG from 'vue-inline-svg';
export default {
components: {
VueInlineSVG
}
}
```
2. **Использование `Vue3Icon` из библиотеки `@heroicons/vue`**:
Вы можете установить библиотеку `@heroicons/vue` с помощью npm:
```
npm install @heroicons/vue
```
Затем в вашем компоненте вы можете импортировать SVG файл и использовать его в шаблоне:
```html
import { Vue3Icon } from '@heroicons/vue';
export default {
components: {
Vue3Icon
}
}
```
3. **Использование `VueComponent` из `@vue/compiler-sfc`**:
Если у вас есть SVG файл, вы можете сконвертировать его в Vue компонент с помощью `VueComponent` из `@vue/compiler-sfc`:
```javascript
import { VueComponent } from '@vue/compiler-sfc';
import { readFileSync } from 'fs';
const svg = readFileSync('./path/to/icon.svg', 'utf-8');
const { descriptor } = VueComponent({ source: svg });
export default descriptor;
```
Затем вы можете использовать этот компонент в вашем шаблоне.
Выберите подход, который лучше всего подходит для вашего проекта и начните импортировать SVG файлы во Vue 3.