@iso-safety-signs/css

CSS background-image sprite for all ISO 7010 workplace safety signs — class-based display, no JavaScript required.

Installation

npm install @iso-safety-signs/css
# or
yarn add @iso-safety-signs/css

Setup

Import the stylesheet once in your entry point:

import '@iso-safety-signs/css/sprite.css';

@import '@iso-safety-signs/css/sprite.css';

Usage

Apply a class to any block element with explicit dimensions:

<span
  class="iso-e001"
  style="display:inline-block; width:64px; height:64px"
  role="img"
  aria-label="Emergency exit"
></span>

<span
  class="iso-w001"
  style="display:inline-block; width:64px; height:64px"
  role="img"
  aria-label="Flammable material"
></span>

Programmatic class lookup

import { getCssClassName } from '@iso-safety-signs/css';

const cls = getCssClassName('e001-emergency-exit'); // → 'iso-e001'
element.className = cls;

Class name pattern

CSS class names follow the pattern iso-{code} where {code} is the lowercase ISO 7010 code:

| Sign | CSS class | | ----------------------------- | ---------- | | E001 Emergency exit | iso-e001 | | E002 Emergency exit — left | iso-e002 | | W001 Flammable material | iso-w001 | | P001 No smoking | iso-p001 | | M001 General mandatory action | iso-m001 | | F001 Fire extinguisher | iso-f001 |

Accessibility

CSS background-images are not exposed to the accessibility tree. Always pair the element with role="img" and aria-label:

<span
  class="iso-e001"
  style="display:inline-block; width:64px; height:64px"
  role="img"
  aria-label="Emergency exit"
  title="Emergency exit"
></span>

License

MIT © Karl Norling