supports the same variant, font-size, animation and transformation props available on individual icons.
#ICON PLUS SVG TV#
The cylon animation gets its name from the "eye" of the Cylons from the original 1978 Battlestar Galactica TV series.Ĭombine icons together via the use of the component and the stacked prop on individual icons ( or ) to create complex icons:.See the reduced motion section of our accessibility documentation for additional details. The BootstrapVue defined animation effects of this component is dependent on the prefers-reduced-motion media query.Animation durations can be configured via SASS SCSS variables.With the cylon animations, the left-right movement (or up-down movement) extends past the icon's bounding box by +/- 25%, so you may need to adjust padding or margins to compensate for your use case.The animation prop translates to the class name b-icon-animation- and pass the custom animation name to the animation prop. The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. Cylon animation: Vertical cylon animation: Fade animation: Spinning animation: Reverse spinning animation: Pulsing spin animation: Reversed pulsing spin animation: Throb animation: Īs the animations are CSS based, they are applied after any SVG transforms have taken place: To use the animation, set the animation prop to one of the animation names above. 'throb' scales the icon in and out 2.12.0+.'spin-reverse-pulse' spins the icon counter-clockwise, but in a pulsed step style.'spin-pulse' spins the icon clockwise, but in a pulsed step style.'spin-reverse' smoothly spins the icon counter-clockwise.'spin' smoothly spins the icon clockwise.'fade' fades the icon in and out 2.12.0+.'cylon-vertical' slides the icon up-down.Animated iconsīootstrapVue includes the following built-in animations for icons: If you need to shift the border/background with the icon, use Bootstrap's margin spacing utility classes. 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.
0 kommentar(er)
