Как использовать Bootstrap 4 иконки в Laravel с VueJS

Question

Я установил Bootstrap значки в приложение Laravel / VueJS, используя NPM, в соответствии с инструкциями здесь, https://icons.getbootstrap.com/. Каков следующий шаг?

Если я хочу использовать элемент svg в шаблоне блейда, нужно ли его скомпилировать с помощью веб-пакета? Импортировать ли я его в css файл?

И как мне использовать его в одном файле VueJS компонентов?

Answer 1

Установите Bootstrap в ваших Node.js приложениях с пакетом npm:

Copy npm install bootstrap require ('bootstrap') загрузит все плагины Bootstrap jQuery на jQuery объект.

После этого используйте npm install bootstrap-icons, чтобы установить bootstrap значки в свой проект и включить его в свое приложение. js из узловых модулей.

После этого, если npm run dev запускается Успешно, затем добавьте элемент SVG в ваши Vue компоненты.

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>

Для демонстрационных целей

Q> Если я хочу использовать элемент svg в шаблоне блейда, нужно ли мне скомпилировать его с веб-пакетом? Импортировать ли я его в файл css?

Отв.> Нет, вам не нужно компилировать при использовании в блейде, если вы импортируете все файлы bootstrap, такие как js и css файлы.