Common Code

You can install these components via npm:

npm i @dbp-toolkit/common

Icon Web Component

For valid icon names see: LineIcons

 <dbp-icon color="orange" name="menu-down"></dbp-icon>

Exposed CSS variables

Variables like --dbp-override-icon-<icon-name> can be used to override the icons.

Example CSS: html { --dbp-override-icon-cloud: url(/icons/cloud.svg); }

Translated Web Component

You can use this web component to show translated html.

<dbp-translated subscribe="lang">
    <div slot="de">
        Dieser Text ist Deutsch und wird Englisch werden wenn man die Sprache auf Englisch stellt.
    </div>
    <div slot="en">
        This text is English and will be German if the language is changed to German.
    </div>
</dbp-translated>

The English or German text will be shown according to the lang attribute.