A suite of object classes to allow for easy sizing of icons. These sizes are programatically generated using key/value pairs in
A list of modifiers for the icon component, allowing you to change its appearance to fit a variety of roles and scenarios.
Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.
These modifiers allow you to disable the
So for example, applying
o-icon-huge mean the huge sizings only apply to the icon's height.
The benefit of this is it allows you to better size non-square icons, as long as they have their
viewbox attribute present to maintain aspect ratio.
In the example below, the first set of icons just uses default icon classes. For non-square icons like the arrow, the aspect ratio is automatically retained, but because of this, the icons aren't the same height, despite having the same array of classes.
The second adds the modifier to the non-sqaure arrow, which means both icons are exactly the same height.
By default, the icon will have the default square focus area which all elements share. This is why when the first icon is focused, the yellow area is square.
This approach means the focus area looks a little weird with circular icons, so the
o-icon--circle modifier was created. Try focusing the second icon and you will notice the focus area is now circular.
A suite of modifiers to rotate icons in 90deg sets.
Adds a spinning animation to the icon. This is particulary useful for things like loading icons, which need to be animating whilst the page is still loading (which animated SVGs won't do).