@db-ux/core-icons

@db-ux/core-icons

We provide core-icons for DB Apps in this package. Because of legal concern some files are encrypted. To decrypt them you need to go to Marketingportal. Note: Deep links aren't working, you need to click the link again after login.

You will find two environment variables on the page:

• ASSET_PASSWORD
• ASSET_INIT_VECTOR

Before you install @db-ux/core-icons you need to create a .env file and add it to your .gitignore. Afterward, you add those two variables to the .env file.

ASSET_PASSWORD=core-icons
ASSET_INIT_VECTOR=core-icons

The postintall script inside @db-ux/core-icons will decrypt the files for you.

Note: You can use process.env. local or in CI/CD to pass the required environment variables to postinstall.

Install

Note: Read the disclaimer above :)

npm i @db-ux/core-icons

Usage plain svg

• You can copy assets from node_modules/@db-ux/core-icons/build/assets

Usage with @db-ui/components

Import

There are different ways to include the icons via a font-face. Therefore, you need to import the correct .css file. There are multiple files depending on the bundler you use:

• relative.css: No bundler
• absolute.css: No bundler
• rollup.css: vite, rollup
• webpack.css: webpack

JS/TS

// main.[js|ts]
import "@db-ux/core-icons/build/styles/rollup.css";

CSS

/* main.css */
@import "@db-ux/core-icons/build/styles/rollup.css";

Vite

You might need to add an additional resolve in vite.config.[js|ts]:

import * as path from "node:path";

export default defineConfig({
    ...
    resolve: {
        alias: {
            "@db-ux": path.resolve("node_modules/@db-ux"),
        },
    },
});

Overwrite default icons

To overwrite the default icons from @db-ui/components or @db-ui/foundations you need to import default-font.css:

JS/TS

// main.[js|ts]
import "@db-ux/core-icons/build/styles/default-font.css";

CSS

/* main.css */
@import "@db-ux/core-icons/build/styles/default-font.css";

TypeScript Autocomplete

To get TypeScript autocomplete you need to include the types:

{
  "compilerOptions": {
    ...,
    "types": [..., "@db-ux/core-icons"]
  },
  "include": [
    ...,
    "node_modules/@db-ux/core-icons/build/types/overwrite.d.ts"
  ]
}

If you have multiple overwrites you can also copy the overwrite.d.ts into your src folder and add additional types.

Use Font-Family

If you want to use the font family you can do it like this:

HTML

<button class="db-button" data-icon="my_icon" data-icon-variant="db-ux-core">
  Test
</button>

Angular

<db-button icon="my_icon" data-icon-variant="db-ux-core">Test</db-button>

React & Vue

<DBButton icon="my_icon" data-icon-variant="db-ux-core">
  Test
</DBButton>

You can add additional TypeScript support by including generated types to tsconfig.json:

React:
{
  "compilerOptions": ...,
  "include": [..., "node_modules/@db-ux/core-icons/build/types/react.d.ts"],
}

Vue:
{
  "compilerOptions": ...,
  "include": [..., "node_modules/@db-ux/core-icons/build/types/vue.d.ts"],
}

Deutsche Bahn brand

As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. Please have a look at our brand portal at https://marketingportal.extranet.deutschebahn.com/ for any further questions and whom to contact on any brand issues.

You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.

License

This project is licensed under special Apache-2.0, see the LICENCE file in this package.