Icon

An icon is a graphical representation of meaning.
Icons can be used to express actions, state, and even to categorize data.

This component extends the native <svg> element (works as a svg wrapper) and comes with built-in accessibility. By default, the component inherits the currentColor.

Simple Example

With @sonnat/icons

Check out the documentation of @sonnat/icons, to learn more about the package.

You can use this component with any other icon package that exports the svg paths.
@sonnat/icons exports both the paths (access via @sonnat/icons/paths) and also the svg icons. These svg icons exported from @sonnat/icons use the @sonnat/ui/Icon component to render the SVG path for each icon, and so they have a peer-dependency on the next release of the @sonnat/ui.

API

Learn more about the properties and the customization points.

Usage

import Icon from "@sonnat/ui/Icon";

//or
import { Icon } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Icon Properties
Name	Type	Default	Description
children	node	-	The content of the component.
size	number	"auto"	The size of the icon. If set to `"auto"`, the icon will get the parent's width and height.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
viewBox	string	"0 0 24 24"	The viewBox of the SVG. Allows you to redefine what the coordinates without units mean inside an SVG element.
title	string	-	Provides a human-readable title for the element that contains it. (W3 Doc: Equivalent Alternatives)
color	"inherit" \| "textPrimary" \| "textSecondary" \| "textHint" \| "textDisabled" \| "primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info"	-	The color of the icon.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.