@odx/icons

Install

npm install @odx/icons

Use

@odx/icons contains multiple icon sets for different types of applications:

• core: Icons used across applications of all Dräger entities
• medical: (Under consstruction) Icons for use in specific applications of the Dräger Medical division
• safety: Icons for use in specific applications of the Dräger Safety division
• uib-legacy: Icons for applications of the Dräger Safety division where usage of ODX core icons is not yet possible due to regulatory reasons.

Import one or more icon sets into your styles.scss, for example:

@import 'node_modules/@odx/icons/core/font.css';
@import 'node_modules/@odx/icons/medical/font.css';
@import 'node_modules/@odx/icons/safety/font.css';
@import 'node_modules/@odx/icons/uib-legacy/font.css';

In you HTML template you can now include icons as easy as:

<i class="odx-icon" data-icon-set="core" data-icon-name="placeholder">
  <span></span>
</i>

<i class="odx-icon" data-icon-set="safety" data-icon-name="add">
  <span></span>
</i>

The <span> elements are needed to display multicolor icons correctly.

Demo posters with all icons contained in the icon sets are part of this package.

All icons are also available as SVG files in the package. Most SVGs contain elements that are colored in #f0f. Those parts can be dynamically colored, while all other parts of the icons must stay in the color specified in the SVG file.

Transformations

The following icon transformations can be applied using data-icon-* attributes:

• data-icon-flip=

  • "horizontal" - flips the icon on the X-axis
  • "vertical" - flips the icon on the Y-axis
  • "both" - flips the icon on both axis

• data-icon-rotate=

  • "90deg" - rotates the icon by 90deg
  • "180deg" - rotates the icon by 180deg
  • "270deg" - rotates the icon by 270deg
  • "custom" - a custom rotation angle can be set via the local CSS variable --odx-icon-rotation

ODX Iconpicker

All icons can also be accessed using the ODX Iconpicker (requires authentication)