Interactive testing environment for react-shared components
Current: Default
SVG icon component with theme support and transformation options.
Customize the Icon properties and see the changes in real-time.
All built-in icons available in the component.
button
digital-download
lock-solid
play
close
close-no-border
warning
arrow
chevron
avatar
media
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | 'button' | Icon identifier |
| scale | number | 1 | Scale transformation |
| xoffset | number | 0 | Horizontal offset in pixels |
| yoffset | number | 0 | Vertical offset in pixels |
| rotate | number | 0 | Rotation in degrees |
| className | string | undefined | Additional CSS classes |
| style | React.CSSProperties | undefined | Inline styles |
The component supports theme-specific icons. Themes can override default icons by providing custom SVG files in their configuration.
Icons use currentColor by default, inheriting the text color from their parent element. This makes them easy to style with CSS.
All transformations (scale, rotate, offset) are applied using CSS transforms, ensuring smooth rendering and performance.
If an icon name is not found, the component returns null. The 'button' icon has a built-in fallback arrow SVG.