Components

DynamicHeroIcon

Storybook

The DynamicHeroIcon component allows you to display dynamic icons, adding an attractive and custom visual layer in a faster way.

Imports

1import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'

Usage

Use the DynamicHeroIcon component as shown below:

The code snippet below shows how to use the DynamicHeroIcon component:

1import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
2  
3<DynamicHeroIcon icon="HomeIcon" width={30} className="text-blue-700" />

Icon

With the prop Icon, you can choose the required icon in a fast and simple way

1import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
2  
3<DynamicHeroIcon icon="BellIcon" width={30} className="text-blue-700" />

Width

With the prop width, you can choose the size of the chosen icon

1import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
2  
3<DynamicHeroIcon icon="BellIcon" width={50} className="text-blue-700" />

ClassName

With the prop className, you can choose the color of the chosen icon, among many other things

1import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
2  
3<DynamicHeroIcon icon="CheckCircleIcon" width={30} className="text-green-400" />

API Reference

You can import IconName like this import {IconName} from "dd360-ds/DynamicHeroIcon"