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?

user_1208168 · Answer

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)

Happy coding!!!

user_6441467 · Answer

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/

user_8932060 · Answer

Install Bootstrap in your Node.js powered apps with the npm package:

Copynpm install bootstrap require('bootstrap') will load all of Bootstrap’s jQuery plugins onto the jQuery object.

After that use npm install bootstrap-icons to install bootstrap icons onto your project and include it in your app.js from node-modules.

After that, if npm run dev runs successfully, Then add the SVG element in your Vue components.

For demo purposes

Q> 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?

Ans.> No, you need not to compile while using in blade provided you import all the bootstrap files such as js files and css files.

user_10309333 · Answer

For me the problem was fixed removing in the webpack on the sass instruction :

.options({ processCssUrls: false })

There is no need to declare a font face.

How to use Bootstrap 4 icons in Laravel with VueJS

4 Answers