@iso-safety-signs/elements

Accessible Web Components (Custom Elements) for all ISO 7010 workplace safety signs — framework-agnostic, zero runtime dependencies.

Installation

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

Usage

Register all elements

import { defineCustomElements } from '@iso-safety-signs/elements';
defineCustomElements();

Then use the elements in HTML:

<!-- Generic element — render any sign by ID -->
<iso-sign sign-id="e001-emergency-exit" width="64"></iso-sign>

<!-- Named elements (generated by yarn generate) -->
<iso-e001-emergency-exit width="64"></iso-e001-emergency-exit>
<iso-w001-flammable-material width="64"></iso-w001-flammable-material>

Custom prefix

Avoid tag-name conflicts with other libraries by passing a custom prefix:

defineCustomElements('safety');
// Registers: safety-sign, safety-e001-emergency-exit, safety-w001-flammable-material, …

Attributes

All elements and <iso-sign> accept the same attributes:

| Attribute | Default | Description | | ------------- | -------------------- | -------------------------------------------------------------- | | sign-id | — | Sign slug ID (<iso-sign> only), e.g. "e001-emergency-exit" | | title | Sign name | Accessible title (<title> inside SVG) | | description | Sign description | Accessible description (<desc> inside SVG) | | width | SVG intrinsic width | Forwarded to the <svg> width attribute | | height | SVG intrinsic height | Forwarded to the <svg> height attribute |

All attributes are reactive — changing them re-renders the SVG.

Framework usage

React

// React treats unknown elements as HTML. Add a JSX type declaration if needed.
declare namespace JSX {
  interface IntrinsicElements {
    'iso-sign': React.HTMLAttributes<HTMLElement> & {
      'sign-id'?: string;
      width?: string | number;
      height?: string | number;
    };
  }
}

<iso-sign sign-id="e001-emergency-exit" width="64" />;

Vue 3

<template>
  <iso-sign sign-id="e001-emergency-exit" width="64" />
</template>

Accessibility

Each element renders with role="img" and aria-labelledby pointing to a <title> and <desc> injected inside the SVG. The host element gets display: contents so it is transparent to layout.

License

MIT © Karl Norling