As with scaling, backgrounds and borders are not affected. Shifting is applied after any rotation transforms. Both props accept values that are in units of 1/16em (relative to the icon's current font size).įor clarity in the example, we’ve added a background color on the icon so you can see the effect. For shift-h, positive values will move the icon to the right, while negative values will move it left. To move icons on the horizontal and/or vertical axis, use the shift-h and shift-v props with any arbitrary numeric value, including decimals.įor shift-v, positive values will move the icon upwards, while negative values will move the icon downwards. Shifting affects icon location without changing or moving the svg container. If you need to have the background and/or border scale with the icon, use the font-scale prop instead. i.e icon 'alert-circle-fill' is exported as BIconAlertCircleFill, icon 'x' is exported as BIconX, and icon 'x-square-fill' is exported as BIconXSquareFill. To change the color of the icon, refer to the Variants section, and to change the size of the icon refer to the Sizing section.Īll icons are exported with the name in PascalCase, prefixed with BIcon. Icons inherit the current font color and font size from their parent container element. Bootstrap Icons v1.5.0 were added in BootstrapVue v2.22.0.īootstrapVue icons are not automatically installed when using BootstrapVue in your project, you must explicitly include them.Bootstrap Icons v1.4.1 were added in BootstrapVue v2.22.0.Bootstrap Icons v1.4.0 were added in BootstrapVue v2.22.0.Bootstrap Icons v1.3.0 were added in BootstrapVue v2.22.0.Bootstrap Icons v1.2.0 were added in BootstrapVue v2.21.0.Bootstrap Icons v1.1.0 were added in BootstrapVue v2.19.0.Bootstrap Icons v1.0.0 were added in BootstrapVue v2.17.0.Bootstrap Icons v1.0.0-alpha5 were added in BootstrapVue v2.16.0.

Bootstrap Icons v1.0.0-alpha4 were added in BootstrapVue v2.15.0.Bootstrap Icons v1.0.0-alpha3 were added in BootstrapVue v2.8.0.Bootstrap Icons were introduced to BootstrapVue in release v2.2.0.You do not need bootstrap-icons as a dependency.

Icons are opt-in, meaning that they explicitly need to be imported in order to be used. While they are built for Bootstrap, they will work in any project.īootstrapVue icon components are built from bootstrap-icons v1.5.0 source SVGs. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation.

Heart outline svg