IconWrapper

The IconWrapper component is used to easily define the behaviour of children Icon(s) through a set of exposed props.

Import

React

// with @dhl-official/react-library:
import { DhlIconWrapper } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlIconWrapper } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-icon-wrapper></dhl-icon-wrapper>

Vue.js

// with @dhl-official/vue-library:
import { DhlIconWrapper } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlIconWrapper } from "@dhl-official/ui-libraries/vue-library"

Code

React

import CalendarFridayEnglish from "@dhl-official/icons/calendar-friday-english.svg";

<DhlIconWrapper >
  <DhlIcon src={CalendarFridayEnglish}></DhlIcon>
</DhlIconWrapper>

Angular

<dhl-icon-wrapper >  
  <dhl-icon src="assets/calendar-friday-english.svg"></dhl-icon>
</dhl-icon-wrapper>

Vue.js

import CalendarFridayEnglish from "@dhl-official/icons/calendar-friday-english.svg";

<dhl-icon-wrapper>
  <dhl-icon :src="CalendarFridayEnglish"></dhl-icon>
</dhl-icon-wrapper>

Interactive Demo

Migrating from DUIL 1.0

• Rename animate to animation
• Rename speed to duration
• Update values of prop speed from SLOWER to "5x", SLOW to "4x", STANDARD to 3x", FAST to "2x"
• Add dataClassName

Readme

Properties

Property	Attribute	Description	Type	Default
animation	animation	An optional prop used to set the animation style of the icon-wrapper	"appearFromSide" \| "appearFromTop" \| "disappearFromBottom" \| "spin"	undefined
block	block	An optional prop used to indicate whether the element should behave as a block element	boolean	undefined
color	color	An optional prop, used to set the color of the component.	string	undefined
dataAriaHidden	data-aria-hidden	An optional prop used to indicate whether the element is exposed to an accessibility API.	string	"true"
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
duration	duration	An optional prop used to set the animation speed of the icon-wrapper	"0x" \| "1x" \| "2x" \| "3x" \| "4x" \| "5x"	DHL_ICON_WRAPPER.DURATION["3x"]
rotate	rotate	An optional prop used to set the icon-wrapper rotation	string	undefined
size	size	An optional size prop for the component.	"lg" \| "md" \| "sm" \| "xl"	DHL_ICON_WRAPPER.SIZE.SM
variant	variant	An optional prop to select a component design variant.	"error" \| "inverted" \| "primary" \| "secondary" \| "success" \| "warn"	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot intended for DhlIcon

Dependencies

Used by

• dhl-alert
• dhl-button
• dhl-checkbox
• dhl-counter
• dhl-dropdown
• dhl-global-validation
• dhl-illustrated-validation
• dhl-input-field
• dhl-input-group
• dhl-navbar
• dhl-stage-action-box
• dhl-tracking-bar
• dhl-validation-feedback-icon

Graph

---

Built by DHL User Interface Library Team!