IconWrapper

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

Import

React
Angular
Vue.js

// 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"

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

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

// 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
Angular
Vue.js

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

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

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

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"`
`dataAriaLabel`	`data-aria-label`	An optional prop used to define the accessible name of the component.	`string`	`undefined`
`dataClassName`	`data-class-name`	An optional class name prop for the component.	`string`	`undefined`
`dataRole`	`data-role`	An optional prop defining the role attribute of the component.	`string`	`"presentation"`
`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" \| "infinite"`	`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" \| "note" \| "primary" \| "secondary" \| "success" \| "sustainability" \| "warning"`	`undefined`

Slots

Slot	Description
`"unnamed"`	unnamed children slot intended for DhlIcon

Dependencies

Used by

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Migrating from DUIL 1.0​

Readme​

Properties​

Slots​

Dependencies​

Used by​

Graph​