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

Payment method icons​

The package also ships the 40 payment method marks (Visa, Mastercard, PayPal, iDEAL, SEPA and so on) under a separate payments export. They are keyed by method name, in camelCase:

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

const visa = payments.visa;
const applePay = payments.applePay;

Unlike the icon set, payment marks keep their brand colours instead of inheriting currentColor, and they are drawn at a 46x32 ratio rather than on the square icon grid. Use them through the payment slots of dhl-input-field, dhl-select or dhl-dropdown, which size and align them for you:

<duil310-dhl-select
  variant="filled"
  label="Payment method"
  options={[
    { label: "Visa", value: "visa", paymentIcon: payments.visa },
    { label: "Mastercard", value: "mastercard", paymentIcon: payments.mastercard },
  ]}
/>

Named imports and direct file imports work the same way as for icons:

import { PaymentVisa } from "@dhl-official/icons";
// or
import PaymentVisa from "@dhl-official/icons/payment-visa.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.