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

Figma LibraryView in StorybookView in PlayroomAPI Reference

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>
View in Playroom

Variant​

CalDynamicIcon is available in 2 variants.standard is the default.

{/* standard */}
<CalDynamicIcon variant="standard">10</CalDynamicIcon>

{/* filled */}
<CalDynamicIcon variant="filled">10</CalDynamicIcon>
View in Playroom

API Reference​

CalDynamicIcon

PropDefaultDescription
size?'24''16' | '20' | '24' | '32' | '40'
Size of the Icon.
variant?standard'standard' | 'filled'
Specifies the visual style of the Icon.
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.