Skip to main content

Getting Started with code | ICONS

info

If utilizing a framework-specific package, there's no need for a separate installation.
The icon package is inherently bundled as a dependency within the framework-specific offering.

Icons​

The icons package is a framework-agnostic package that can be used in any project. It provides the full set of SVG icons as documented in the dhl-icon section.

Install​

npm install @dhl-official/icons
info

if you are developing an Angular application, you will need to update your angular.json file to include the icons in the assets array.
Follow the instruction you can find here

Usage​

Import the icon library the @dhl-official/icons package and assign the an icon to a constant for use in your project.

import icons from "@dhl-official/icons";
const airport = icons.airport;
//or 
const { airport } = icons;

Alternatively, use named imports:

import { Airport } from "@dhl-official/icons";

Or, import the icon from the specific location within the @dhl-official/icons package:

import Airport from "@dhl-official/icons/airport.svg";

migrating from @dhl-official-ui-libraries​

If you are migrating from the legacy @dhl-official/ui-libraries package, migrating from the legacy icon imports should be frictionless.

Refer to dhl-icon for more information on updating icon imports within your respective framework.