The position of an icon may require adjustment based on the characters it neighbours. By default, icons are optimized to sit alongside capital letters. If required, the alignY prop can set to lowercase — typically for use in the middle or at the end of a sentence.
Braid aims to provide an icon set that caters to the majority of use cases spanning across many products. However, there may be a need to have product-specific icons outside of the library. For this use case consumers can use the IconRenderer component.
Uses the render prop pattern to provide the required classes to style and align a custom icon.
To make the alignment of icons and typography as seemless as possible, IconRenderer supports inline sizing. As a result, it must be used inside either a Text or Heading component.
For example, here is a custom circle alongside a Heading:
The Braid icon set is designed using only a single colour (black), and then configured to adopt the colour of either their parent component or the specified tone prop.
If the custom icon should inherit its colour, this can be done using the currentColor value.
EXAMPLE: Setting “fill=currentColor” on custom icon inside “brandAccent” Text
When using custom icons, it is important to consider their purpose to the end user. Are they being used as an image? Or are they purely decorative?
If they are decorative only, then it is recommended they be hidden from screen readers by applying the aria-hidden attribute as in the following example:
However, if they provide value or context, then they should be titled correctly as though they were an image. Below is an example of how to correctly title an icon as an image: