Icon
A suite of object classes to allow for easy sizing of icons. These sizes are programatically generated using key/value pairs in $icon-sizes.
Source
Contributors
Table of contents
Base
Modifiers
Base
Standard
Responsive
Modifiers
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.
Disable Value
These modifiers allow you to disable the width or height values.
So for example, applying o-icon--height to 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.
Circle
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.
Flip
A suite of modifiers to rotate icons in 90deg sets.
Spin
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).