@ghs-hazard-pictograms/react

Installation

npm install @ghs-hazard-pictograms/react

Named components

Every pictogram is available as a named React component. The component name is the pictogram ID converted to PascalCase.

import { Ghs01ExplosivesExplodingBomb } from '@ghs-hazard-pictograms/react';

export default function App() {
  return <Ghs01ExplosivesExplodingBomb width={64} height={64} title="Explosives" />;
}

Component names follow the pattern Ghs{nn}{Category}{Name}, e.g.:

Pictogram ID	Component name
ghs01-explosives-exploding-bomb	Ghs01ExplosivesExplodingBomb
ghs02-flammable-flame	Ghs02FlammableFlame
ghs06-toxic-skull-crossbones	Ghs06ToxicSkullCrossbones

PictogramById

Use PictogramById when the pictogram is determined at runtime.

import { PictogramById } from '@ghs-hazard-pictograms/react';

export default function HazardIcon({ id }: { id: string }) {
  return <PictogramById id={id} width={64} height={64} />;
}

Props

Named component props

Prop	Type	Required	Default	Description
width	number	No	24	Width of the SVG in pixels
height	number	No	24	Height of the SVG in pixels
title	string	No	pictogram name	Accessible title rendered as <title>
description	string	No	—	Accessible description rendered as <desc>

PictogramById additional prop

Prop	Type	Required	Description
id	string	Yes	Pictogram ID, e.g. ghs01-explosives-exploding-bomb

TypeScript

All components and props are fully typed. Import the shared Pictogram type from @ghs-hazard-pictograms/core if you need to work with pictogram data alongside the components.

import type { Pictogram } from '@ghs-hazard-pictograms/core';

Accessibility

Each component renders an inline SVG. When title is provided a <title> element is injected and the SVG gains aria-labelledby pointing to that title. When description is also provided a <desc> element is added and included in aria-labelledby.

If the pictogram is purely decorative, pass aria-hidden="true" as a prop to suppress it from the accessibility tree.

<Ghs01ExplosivesExplodingBomb aria-hidden="true" width={24} />