Icon Rotate
A group of class names to rotate and flip an SVG icon.
Usage
Add the modifier class to any SVG icon.
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-icon--rotate-45 |
Rotate 45 degrees clockwise. |
slb-icon--rotate-90 |
Rotate 90 degrees clockwise. |
slb-icon--rotate-135 |
Rotate 135 degrees clockwise. |
slb-icon--rotate-180 |
Rotate 180 degrees clockwise. |
slb-icon--rotate-225 |
Rotate 225 degrees clockwise. |
slb-icon--rotate-270 |
Rotate 270 degrees clockwise. |
slb-icon--rotate-315 |
Rotate 315 degrees clockwise. |
slb-icon--flip |
Mirror icon vertically and horizontally. |
slb-icon--flip-horizontal |
Mirror icon horizontally. |
slb-icon--flip-vertical |
Mirror icon vertically. |
.slb-icon - Default icon.
.slb-icon--rotate-45 - Rotate 45 degrees clockwise.
.slb-icon--rotate-90 - Rotate 90 degrees clockwise.
.slb-icon--rotate-135 - Rotate 135 degrees clockwise.
.slb-icon--rotate-180 - Rotate 180 degrees clockwise.
.slb-icon--rotate-225 - Rotate 225 degrees clockwise.
.slb-icon--rotate-270 - Rotate 270 degrees clockwise.
.slb-icon--rotate-315 - Rotate 315 degrees clockwise.
.slb-icon--flip - Mirror icon vertically and horizontally.
.slb-icon--flip-horizontal - Mirror icon horizontally.
.slb-icon--flip-vertical - Mirror icon vertically.