Socket
Socket
Sign inDemoInstall

@odx/icons

Package Overview
Dependencies
0
Maintainers
0
Versions
68
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@odx/icons


Version published
Weekly downloads
1.2K
decreased by-30.92%
Maintainers
0
Created
Weekly downloads
 

Readme

Source

@odx/icons

NPM

semantic-release

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)

FAQs

Last updated on 05 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc