CalDynamicIcon
A dynamic SVG icon component. Unlike typical icon components, this component specifically accepts children as content, which is rendered as text inside the SVG.
Updated in eds-core: 1.9.0
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { CalDynamicIcon } from '@adaptavant/eds-core';
Size
CalDynamicIcon is available in 5 sizes.24 is the default.
{/* size: 16 */}
<CalDynamicIcon size="16">10</CalDynamicIcon>
{/* size: 20 */}
<CalDynamicIcon size="20">10</CalDynamicIcon>
{/* size: 24 */}
<CalDynamicIcon size="24">10</CalDynamicIcon>
{/* size: 32 */}
<CalDynamicIcon size="32">10</CalDynamicIcon>
{/* size: 40 */}
<CalDynamicIcon size="40">10</CalDynamicIcon>
Variant
CalDynamicIcon is available in 2 variants.standard is the default.
{/* standard */}
<CalDynamicIcon variant="standard">10</CalDynamicIcon>
{/* filled */}
<CalDynamicIcon variant="filled">10</CalDynamicIcon>
API Reference
CalDynamicIcon
| Prop | Type | Description | Default |
|---|---|---|---|
size? | '16' | '20' | '24' | '32' |'40' | Size of the Icon. | '24' |
variant? | 'standard' | 'filled' | Specifies the visual style of the Icon. | standard |
aria-hidden? | boolean | A boolean attribute used for accessibility, often to hide the icon from assistive technologies. | _ |
id? | string | The unique identifier for the SVG element. | _ |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.