CODEWITHSUNDEEP
laraveltwitter-bootstrapvue.js
DatsunBing
DatsunBing

Reputation: 9076

How to use Bootstrap 4 icons in Laravel with VueJS

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?

Upvotes: 4

Views: 13246

Answers (6)

Pap. I. Faye
Pap. I. Faye

Reputation: 21

Using "bootstrap-icons": "^1.11.3" with vite integration and Laravel 10, in resources/css/app/css:

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

Upvotes: 0

Murat Cakmak
Murat Cakmak

Reputation: 329

I found answer :)

You can install vite-plugin-static-copy

npm i -D vite-plugin-static-copy

You should do similar code in vite.config.js

import { viteStaticCopy } from 'vite-plugin-static-copy' // <-- Import static-copy package
...

plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        viteStaticCopy({ // <-- Add this code block
            targets: [
                { //For build
                    src: 'node_modules/bootstrap-icons/font/fonts/*',
                    dest: 'assets/fonts'
                },
                { // For Dev
                    src: 'node_modules/bootstrap-icons/font/fonts/*',
                    dest: 'resources/sass/fonts'
                }
            ]
        })
    ],

after that you can run npm build or dev.

npm run dev
npm run build

Upvotes: 0

jurandou
jurandou

Reputation: 134

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.

Upvotes: 0

Alberto Su&#225;rez
Alberto Su&#225;rez

Reputation: 117

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/

Upvotes: 2

mili
mili

Reputation: 3802

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!!!

Upvotes: 15

Ankush Sood
Ankush Sood

Reputation: 421

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.

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

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.

Upvotes: 0

Related Questions