remove bootstrap icons (causes bootstrap-vue-3.es.js huge build file size 1.2M)

[mariusa]

node_modules/bootstrap-vue-3/dist/bootstrap-vue-3.es.js has 1.2M and is included in project's vendor.js bundle. This is huge.

node_modules/bootstrap/dist/js/bootstrap.esm.min.js has 73k, so it's not bootstrap's fault.

Trying to find the cause.

[mariusa]

added stats PR.

bootstrap-icons/bootstrap-icons.svg has 1M

My projects are already including icons via CDN, as .css file has only 500k https://icons.getbootstrap.com/#install and is loaded later, after main app.

Like any other icon fonts, we're using them with <i class="..."></i>, not with b-icon Again, this is consistent with all other icon fonts. We can switch from bootstrap icons to any other icon font, while continuing to use bootstrap CSS/JS. They are not dependent.

Would you please remove bootstrap icons from this project? Having a 1.2M vendors.js file isn't acceptable.

Thanks!

[VividLemon]

I disagree with this. I think that they should be included, but perhaps more information on proper use could be added. In bootstrap-vue v2, one could drastically reduce the build size by importing icons directly. On many of my projects, I saw the project build size going to about 10% of what it was by importing icons directly. This is something you could not achieve if you were using other css frameworks. Vuetify allows you to use material design icons, but the project immediately imports the CDN from https://materialdesignicons.com/. This has it's advantages, but treeshaking out specific icons is not one of them. Perhaps a better alternative would be to implement automatic treeshaking to include icons or information on how to do it yourself. Edit: To clarify, the difference between the two would be one (in vue 2) import {IconPlugin} from 'bootstrap-vue' Vue.use(IconPlugin) && <b-icon icon="arrow-up" /> vs In the template where the icon is used import {BIconArrowUp} from 'bootstrap-vue' Then declaring it as a component and using it directly. I'm not sure if this changed in BV3, but I imagine not.

[mariusa]

Bootstrap doesn't force developers to use bootstrap-icons. One can happily use fontawesome or whatever (so many choices, all using <i class="framework icon" /> convention.

Why should this project force (by shoving it down my throat / build) bootstrap-icons? Let it be a separate npm, if desired, like bootstrap does.

[VividLemon]

I'll try to check it out and get a feel for what you're seeing. But I was just noting that I think the importing components directly was the preferred solution in V2 if you cared about size. Though making a drastic change like removing icons, would not be my call.

[Slluxx]

i think @mariusa is right. ive always used fontawesome over bootstrap icons and now i am "forced" to waste valuable bandwidth for something i am not even using

[jcputney]

I have to agree with @mariusa here as well. I've always used external icon libraries, and will never use Bootstrap icons, so this is just unnecessary bloat.

[mariusa]

In order to KISS, I'll remove bootstrap icons from this project. If one wants to optionally use bootstrap icons, one can do it similarly with any other icon font <i class="..."></i>. If some people prefer b-icon, then please make a new package, eg bootstrap-icons-vue, which interested people can install like any other library.

[comod]

Could you then please update the docs https://cdmoro.github.io/bootstrap-vue-3/components/Icon.html#usage ?

[aceofwings]

@comod Hi Comod I am working on refactoring Docs to be part of a subworkspace. Will need to talk to CDMoro with what is best to deploy.

[mariusa]

@VividLemon saw you started to include icons again. Would you please make sure that it doesn't add anything to the build for people not using that custom functionality? Other use other icon fonts. I personally use <i class="bi bi-gear"></i> which works great, no need for extra code to output this. Thanks

[aceofwings]

@mariusa we understand your concerns but the current direction will not involve including the entire sprite package as originally done thus limiting size to only chosen icons ( still in development).

[VividLemon]

It's a separate downloadable package