@ghs-hazard-pictograms/css 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +126 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# @ghs-hazard-pictograms/css
|
|
2
|
+
|
|
3
|
+
CSS sprite utilities for all GHS chemical hazard pictograms (GHS01–GHS09) and UN transport hazard class pictograms. Import a single stylesheet and use short class names to display any pictogram as a background image.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @ghs-hazard-pictograms/css @ghs-hazard-pictograms/assets
|
|
9
|
+
# or
|
|
10
|
+
yarn add @ghs-hazard-pictograms/css @ghs-hazard-pictograms/assets
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @ghs-hazard-pictograms/css @ghs-hazard-pictograms/assets
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
> **Note:** `@ghs-hazard-pictograms/assets` must be installed alongside this package because the CSS file references image files from it.
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
**1. Import the stylesheet** once in your application entry point:
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import '@ghs-hazard-pictograms/css/sprite.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or link it in HTML:
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<link rel="stylesheet" href="node_modules/@ghs-hazard-pictograms/css/sprite.css" />
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**2. Apply a class** to any block-level element sized with `width` and `height`:
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<div class="ghs-ghs01" style="width: 64px; height: 64px;" role="img" aria-label="Explosive"></div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
<div className="ghs-ghs01" style={{ width: 64, height: 64 }} role="img" aria-label="Explosive" />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## CSS class reference
|
|
42
|
+
|
|
43
|
+
### GHS chemical hazard pictograms
|
|
44
|
+
|
|
45
|
+
| Class | Pictogram |
|
|
46
|
+
|---|---|
|
|
47
|
+
| `.ghs-ghs01` | GHS01 Explosive |
|
|
48
|
+
| `.ghs-ghs02` | GHS02 Flammable |
|
|
49
|
+
| `.ghs-ghs03` | GHS03 Oxidizing |
|
|
50
|
+
| `.ghs-ghs04` | GHS04 Compressed Gas |
|
|
51
|
+
| `.ghs-ghs05` | GHS05 Corrosive |
|
|
52
|
+
| `.ghs-ghs06` | GHS06 Toxic |
|
|
53
|
+
| `.ghs-ghs07` | GHS07 Health Hazard / Hazardous to Ozone Layer |
|
|
54
|
+
| `.ghs-ghs08` | GHS08 Serious Health Hazard |
|
|
55
|
+
| `.ghs-ghs09` | GHS09 Hazardous to the Environment |
|
|
56
|
+
|
|
57
|
+
### UN transport hazard class pictograms
|
|
58
|
+
|
|
59
|
+
| Class | Pictogram |
|
|
60
|
+
|---|---|
|
|
61
|
+
| `.ghs-adr-1` | Divisions 1.1, 1.2, 1.3 — Explosives |
|
|
62
|
+
| `.ghs-adr-1-4` | Division 1.4 — Explosives |
|
|
63
|
+
| `.ghs-adr-1-5` | Division 1.5 — Explosives |
|
|
64
|
+
| `.ghs-adr-1-6` | Division 1.6 — Explosives |
|
|
65
|
+
| `.ghs-adr-2-1` | Division 2.1 — Flammable Gas |
|
|
66
|
+
| `.ghs-adr-2-2` | Division 2.2 — Non-Flammable Gas |
|
|
67
|
+
| `.ghs-adr-2-3` | Division 2.3 — Toxic Gas |
|
|
68
|
+
| `.ghs-adr-3` | Class 3 — Flammable Liquid |
|
|
69
|
+
| `.ghs-adr-5-1` | Division 5.1 — Oxidizing Substances |
|
|
70
|
+
| `.ghs-adr-5-2` | Division 5.2 — Organic Peroxides |
|
|
71
|
+
| `.ghs-adr-6-1` | Division 6.1 — Toxic Substances |
|
|
72
|
+
| `.ghs-adr-8` | Class 8 — Corrosive Substances |
|
|
73
|
+
| `.ghs-un-6-2` | Class 6.2 — Infectious Substances |
|
|
74
|
+
| `.ghs-un-7` | Class 7 — Radioactive Material |
|
|
75
|
+
| `.ghs-un-8` | Class 8 (UN) — Corrosive |
|
|
76
|
+
| `.ghs-un-9` | Class 9 — Miscellaneous Dangerous Goods |
|
|
77
|
+
|
|
78
|
+
## JavaScript / TypeScript API
|
|
79
|
+
|
|
80
|
+
In addition to the CSS file, this package exports helpers for looking up class names programmatically.
|
|
81
|
+
|
|
82
|
+
### `getCssClassName(id)`
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
import { getCssClassName } from '@ghs-hazard-pictograms/css';
|
|
86
|
+
|
|
87
|
+
const cls = getCssClassName('ghs01-explosive');
|
|
88
|
+
// → 'ghs-ghs01'
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Returns the CSS class name for a pictogram slug ID, or `undefined` if not found.
|
|
92
|
+
|
|
93
|
+
### `pictogramCssClasses`
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
import { pictogramCssClasses } from '@ghs-hazard-pictograms/css';
|
|
97
|
+
|
|
98
|
+
// { 'ghs01-explosive': 'ghs-ghs01', 'ghs02-flammable': 'ghs-ghs02', ... }
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
A read-only map of pictogram slug ID → CSS class name for all 27 pictograms.
|
|
102
|
+
|
|
103
|
+
## How the sprite works
|
|
104
|
+
|
|
105
|
+
Each CSS class sets `background-image` to the corresponding SVG from `@ghs-hazard-pictograms/assets`, along with:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
background-position: center;
|
|
109
|
+
background-repeat: no-repeat;
|
|
110
|
+
background-size: contain;
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
The element itself must have an explicit `width` and `height` — the stylesheet does not set dimensions so you stay in control of sizing.
|
|
114
|
+
|
|
115
|
+
## Related packages
|
|
116
|
+
|
|
117
|
+
| Package | Description |
|
|
118
|
+
|---|---|
|
|
119
|
+
| [`@ghs-hazard-pictograms/core`](https://www.npmjs.com/package/@ghs-hazard-pictograms/core) | Raw data, inline SVGs, and lookup helpers (framework-agnostic) |
|
|
120
|
+
| [`@ghs-hazard-pictograms/react`](https://www.npmjs.com/package/@ghs-hazard-pictograms/react) | Ready-to-use React components for each pictogram |
|
|
121
|
+
| [`@ghs-hazard-pictograms/assets`](https://www.npmjs.com/package/@ghs-hazard-pictograms/assets) | Static SVG/PNG/JPG/WebP image files (required peer) |
|
|
122
|
+
| [`@ghs-hazard-pictograms/sprite`](https://www.npmjs.com/package/@ghs-hazard-pictograms/sprite) | SVG `<symbol>` sprite for `<use href>` embedding |
|
|
123
|
+
|
|
124
|
+
## Source
|
|
125
|
+
|
|
126
|
+
[github.com/karlnorling/ghs-hazard-pictograms](https://github.com/karlnorling/ghs-hazard-pictograms)
|