如何在 Laravel 中通过 VueJS 使用 Bootstrap 4 图标

Question

我已根据此处的说明使用 NPM 将 Bootstrap 图标安装到 Laravel/VueJS 应用程序中，https://icons.getbootstrap.com/。你下一步怎么做？

如果我想在blade模板中使用svg元素，我需要使用webpack编译它吗？我是否将其导入到 css 文件中？

如何在单文件 VueJS 组件中使用它？

Answer 1

我可以按照以下步骤将 bootstrap 图标版本 1.5.0 安装到 Laravel 8 项目并使用 laravel mix。

运行此命令将引导程序图标安装到您的项目中

npm i bootstrap-icons

将其添加到resources\sass\app.scss

@import '~bootstrap-icons/font/bootstrap-icons';

检查webpack.mix.js文件有这个

mix.sass('resources/sass/app.scss', 'public/css')

运行此命令将您的更改编译到公共文件夹

npm run dev

然后您可以在页面中的任何位置使用图标（.blade 或 .vue 文件）

<i class="bi-alarm"></i>

快乐编码！