@ghs-hazard-pictograms/sprite

Installation

npm install @ghs-hazard-pictograms/sprite

Symbol ID format

Each pictogram is stored as an SVG <symbol> whose id is the GHS code lowercased, e.g. ghs01, ghs02, ghs09.

Usage

Reference the sprite file as an external URL. The browser caches the file across pages.

<svg width="64" height="64" role="img" aria-labelledby="icon-title">
  <title id="icon-title">Explosives</title>
  <use href="/sprites/ghs-hazard-pictograms.svg#ghs01"></use>
</svg>

Copy or serve node_modules/@ghs-hazard-pictograms/sprite/ghs-hazard-pictograms.svg from your public directory.

Inline the sprite at the top of the <body> to avoid an extra network request. Hidden via display:none.

<!-- Inline once, hidden -->
<div style="display:none">
  <!-- paste contents of ghs-hazard-pictograms.svg here -->
</div>

<!-- Reference anywhere on the page -->
<svg width="64" height="64" role="img" aria-labelledby="icon-title">
  <title id="icon-title">Flammable</title>
  <use href="#ghs02"></use>
</svg>

Inject the sprite into the document body using a React portal so it is available to all components.

import { createPortal } from 'react-dom';
import spriteUrl from '@ghs-hazard-pictograms/sprite/ghs-hazard-pictograms.svg?url';

export function SpriteProvider() {
  return createPortal(
    <div style={{ display: 'none' }}>
      <img src={spriteUrl} alt="" aria-hidden="true" />
    </div>,
    document.body,
  );
}

// Then anywhere in your tree:
// <svg width="64" height="64"><use href="#ghs01" /></svg>

Accessibility

SVG <use> elements do not inherit <title> or <desc> from the referenced <symbol> in all browsers. Always add a <title> directly inside the referencing <svg> and link it with aria-labelledby.

<svg width="64" height="64" role="img" aria-labelledby="ghs06-label">
  <title id="ghs06-label">Toxic</title>
  <use href="#ghs06"></use>
</svg>

For decorative icons omit the title and add aria-hidden="true" to the <svg>.

<svg width="24" height="24" aria-hidden="true">
  <use href="#ghs06"></use>
</svg>