To learn more about what problems we're solving with this utility, check our blog post about iconography.
In order to support tree-shaking and let you use any icon set - Icon has an svg property to pass a React component to it. Therefore, you can use it with any iconset available across the web as long as it returns icons as React components, or your bundle transforms svg imports into react nodes.
In most of the situations you would like to just use the Icon without defining its color manually. It will inherit the text color from its parent elements which makes it quite dynamic.
Color for the svg should be defined on the svg level by using currentColor value for its fill or stroke css properties. Example of an SVG component:
There are also cases when you don't want to introduce an additional wrapper just to set the color and in those situations you can pass color property directly to the icon. That will let you chose one of the foreground colors provided by the design tokens.
Icon supports multiple sizes: smaller, small (default), medium, large, larger and largest. These sizes cover use cases from icons for tiny interface elements to icons representing page level states.
By default, we're providing a squared bounding box for all icons. That way whenever you render multiple icons in a list, your content will stay visually aligned. Sometimes that's not the case though, and you would like to avoid that extra horizontal space on either side of the icon. For instance, we use that for Button or Link components in Arcade itself. To remove this extra space, you can use the autoWidth property that will keep only the vertical bounding box.
If passing just one component doesn't work for you - it's possible to use svg property as a slot.
Icons are used for decoration and are not focusable or clickable. If you need to perform an action on click, focus, etc. - make sure you're wrapping it with a component or html element that renders <a> or <button> tag. Most of the time you would want to use it with Button component.
|svg||ReactNode||-||true||Icon svg asset|
|size||smaller, small, medium, large, larger, largest||small||false|
|color||neutral-faded, primary, positive, critical||-||false|
|autoWidth||boolean||-||false||Make icon boundaries not squared?|
|className||string||-||false||className for the root element|
|attributes||object||-||false||Attributes for the root element|