@ghs-hazard-pictograms/assets

Static image assets for all GHS chemical hazard pictograms (GHS01–GHS09) and UN transport hazard class pictograms. Every pictogram is provided as an optimised SVG plus raster exports at five sizes in PNG, JPEG, and WebP.

This package is a collection of static files with no JavaScript runtime. It is consumed by @ghs-hazard-pictograms/css and can be used directly in any project that needs the raw image files.

Installation

npm install @ghs-hazard-pictograms/assets
# or
yarn add @ghs-hazard-pictograms/assets
# or
pnpm add @ghs-hazard-pictograms/assets

File formats and sizes

| Format | Sizes (px²) | |---|---| | SVG | — (vector, resolution-independent) | | PNG | 240, 512, 768, 1024, 2048 | | JPEG | 240, 512, 768, 1024, 2048 | | WebP | 240, 512, 768, 1024, 2048 |

Directory structure

assets/
  physical_hazards_pictograms/
    ghs01_explosive/
      GHS-pictogram-explos.svg
      GHS-pictogram-explos-240.png
      GHS-pictogram-explos-512.png
      ...
    ghs02_flammable/
    ghs03_oxidizing/
    ghs04_compressed_gas/
    ghs05_corrosive/
  health_hazards_pictograms/
    ghs06_toxic/
    ghs07_health_hazard/
    ghs08_serious_health_hazard/
  environmental_hazards_pictograms/
    ghs09_hazardous_to_environment/
  transport_pictograms/
    ADR_1.svg          (Divisions 1.1–1.3)
    ADR_1.4.svg
    ADR_1.5.svg
    ADR_1.6.svg
    ADR_2.1.svg
    ADR_2.2.svg
    ADR_2.3.svg
    ADR_3.svg
    ADR_5.1.svg
    ADR_5.2.svg
    ADR_6.1.svg
    ADR_8.svg
    UN_transport_pictogram_-_6.2.svg
    UN_transport_pictogram_-_7.svg
    UN_transport_pictogram_-_8.svg
    UN_transport_pictogram_-_9.svg
    ...

Usage

In a bundler (webpack, Vite, etc.)

import explosiveSvg from '@ghs-hazard-pictograms/assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg';

const img = document.createElement('img');
img.src = explosiveSvg;

In HTML

<img
  src="node_modules/@ghs-hazard-pictograms/assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg"
  width="64"
  height="64"
  alt="GHS01 Explosive"
/>

With a CDN

If your bundler copies node_modules assets to a public directory, reference them via the resolved path. For example with Vite's public/ copy or a CDN that hosts your node_modules:

<img src="/assets/ghs-hazard-pictograms/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos-512.png" />

Looking up asset paths via @ghs-hazard-pictograms/core

If you need to resolve asset paths programmatically:

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

const p = getPictogram('ghs01-explosive')!;
console.log(p.assets.svg);          // relative SVG path
console.log(p.assets.png[512]);     // relative path to 512px PNG
console.log(p.assets.webp[1024]);   // relative path to 1024px WebP

Related packages

| Package | Description | |---|---| | @ghs-hazard-pictograms/core | Raw data, inline SVGs, and lookup helpers (framework-agnostic) | | @ghs-hazard-pictograms/react | Ready-to-use React components (inline SVG, no external files needed) | | @ghs-hazard-pictograms/css | CSS sprite sheet that references these asset files | | @ghs-hazard-pictograms/sprite | SVG <symbol> sprite for <use href> embedding |

Links

• Docs: karlnorling.github.io/ghs-hazard-pictograms
• Source: github.com/karlnorling/ghs-hazard-pictograms
• Issues: github.com/karlnorling/ghs-hazard-pictograms/issues