SVG Icon
Icons provide visual context to represent actions. The Icon component is a helper wrapping SVG icons.
You can find all available icons in the Icons page.
Import#
import { SvgIcon } from '@volue/wave-react';
Examples#
Basic#
Simply provide an iconName to render the desired icon from our set.
Sizes#
By default an Icon will inherit its size from the parent element's text size.
Use size prop to pick one of the predefined sizes: small, medium, large, and xLarge
Color#
By default, an Icon will inherit its color from the font color of its parent element.
You can override the color by using the color prop as shown below.
Stroke thickness#
You can control the thickness of the icon stroke using strokeWidth props. In certain context you may want the icons to appear either thinner or thicker.
Custom icons#
You can also display your custom SVG icon. Leave out the iconName prop and send in the path to your SVG icon in the pathData prop.
You need to use a square icon (e.g. 24x24) for the styling to work properly. Size can be customized using svgSize prop.
Accessibility#
If your icon is not purely decorative, you may want to provide title prop, so screen readers can give meaning to the icon.
API Reference#
Prop | Type | Default |
|---|---|---|
as | enum | div |
css | StitchesCss | No default value |
iconName | IconToken | No default value |
size | enum | No default value |
pathData | string | string[] | No default value |
svgSize | number | No default value |
strokeWidth | number | No default value |
title | string | No default value |
color | ColorToken | No default value |