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#
An Icon will inherit its color from the font color of its parent elements in the browser.
You can override the color by styling the icon with the desired color using CSS 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 |