Icon SVG transition
Change the default animation of an SVG icons.
Usage
Add the SVG of your choice with the transition class name.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-hidden="true" |
When an icon is used for only decorative purposes add this attribute to the icon's tag. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-spin |
Rotate icon infintely. |
.slb-spin - Rotate icon infintely.
Icon-svg\icon-transition.hbs
<div class="d-flex flex-column align-items-start">
<div class="icon-card icon-card--flex-none align-items-start">
<svg class="slb-icon slb-icon--lg [modifier class]" viewBox="0 0 512 512"><path d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"/></svg>
</div>
</div>
Source:
components/_icons.scss