我已经使用 NPM 将 Bootstrap 图标安装到 Laravel/VueJS 应用程序中，根据此处的说明，https://icons.getbootstrap.com/。下一步是什么？
如果我想在刀片模板中使用 svg 元素，我需要用 webpack 编译它吗？我是否将其导入到 css 文件中？
以及如何在单个文件的 VueJS 组件中使用它？
【问题讨论】：
标签： laravel twitter-bootstrap vue.js
我可以按照以下步骤将引导图标版本 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>
编码愉快！！！
【讨论】：
mili的回答有错误，因为如果
@import '~bootstrap-icons/font/bootstrap-icons';
包含在 resources\sass\app.scss 中，然后在使用 npm run dev 构建时，我的 app.css 文件中不包含 @font-face 指令。为了使指令出现，我必须添加 «css» 扩展名，以便正确的 @import 是：
@import '~bootstrap-icons/font/bootstrap-icons.css';
但是还有另一个问题，在这种情况下是构建器的问题，导致浏览器不显示图标（而是出现一个正方形，表示浏览器无法呈现 svg 图标）。构建器在 public/css/app.css
中生成以下指令 @font-face {
font-family: "bootstrap-icons";
src: url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
Laravel 找不到文件，因为 url() 不理解绝对路径（在我的开发环境中）。如果在两条路径之前添加«..»，则一切正常（图标出现在页面中）：
@font-face {
font-family: "bootstrap-icons";
src: url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
问题是每次您为任何其他包运行npm run dev 时，“..”都会自动被覆盖，因此不再显示图标。
我看到其他人有同样的问题，但我不知道应该在哪里通知问题和解决方案。我会尝试在 https://getbootstrap.com/
中找到反馈窗口【讨论】：
使用 npm 包在 Node.js 驱动的应用中安装 Bootstrap：
复制npm install bootstrap
require('bootstrap') 会将所有 Bootstrap 的 jQuery 插件加载到 jQuery 对象上。
之后，使用npm install bootstrap-icons 将引导图标安装到您的项目中，并将其从节点模块包含在您的 app.js 中。
之后，如果 npm run dev 运行成功，则在你的 Vue 组件中添加 SVG 元素。
<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 元素，我需要用 webpack 编译它吗？我是否将其导入到 css 文件中？
Ans.> 不，在blade中使用时不需要编译，只要你导入所有的引导文件，如js文件和css文件。
【讨论】：
对我来说，问题已在 webpack 中通过 sass 指令解决：
.options({ processCssUrls: false })
无需声明字体。
【讨论】：