How to use Bootstrap 4 icons in Laravel with VueJS

Question

I have installed Bootstrap icons into a Laravel/VueJS application using NPM, according to the instructions here, https://icons.getbootstrap.com/. What is the next step?

If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?

And how do I use it in single file VueJS components?

Answer 1

I am able to install bootstrap icons version 1.5.0 to Laravel 8 project and using laravel mix, by following these steps.

run this to install bootstrap icons into your project

npm i bootstrap-icons

add this to resources\sass\app.scss

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

check webpack.mix.js file has this

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

run this to compile your change to public folder

npm run dev

then you can use icons anywhere in the page (either .blade or .vue file)

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

Happy coding!!!

Answer 2

There is an error in the answer of mili, because if

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

is included in resources\sass\app.scss then no @font-face directive is included in my app.css file when building with npm run dev. To make appear the directive I had to add the «css» extension so the correct @import would be:

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

But there is another problem, in this case a problem of the builder, that produces that the icons are not showed by the browser (instead appear an square meaning that the broswer could not render the svg icon). The builder generates the following directive in 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 does not find the files because url() does not understand the absolute path (in my development environment). If you add «..» before the two paths, then all works (the icons appear in the page):

    @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");
}

The problem is that every time that you run npm run dev for any other package, the ".." are automatically overwritten, so the icons are not seen any more.

I have seen other people out there with the same problem, but I do not know where should be notified the issue and the solution. I will try to find a feedback window in https://getbootstrap.com/