@ghs-hazard-pictograms/css 1.0.2 → 1.0.5

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.
Files changed (9) hide show
  1. package/README.md +38 -36
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +23 -9
  4. package/dist/cjs/index.js.map +1 -1
  5. package/dist/esm/index.d.ts.map +1 -1
  6. package/dist/esm/index.js +23 -9
  7. package/dist/esm/index.js.map +1 -1
  8. package/package.json +37 -26
  9. package/sprite.css +52 -68
package/README.md CHANGED
@@ -42,38 +42,38 @@ Or link it in HTML:
42
42
 
43
43
  ### GHS chemical hazard pictograms
44
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 |
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
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 |
54
+ | `.ghs-ghs08` | GHS08 Serious Health Hazard |
55
+ | `.ghs-ghs09` | GHS09 Hazardous to the Environment |
56
56
 
57
57
  ### UN transport hazard class pictograms
58
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 |
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
77
 
78
78
  ## JavaScript / TypeScript API
79
79
 
@@ -114,13 +114,15 @@ The element itself must have an explicit `width` and `height` — the stylesheet
114
114
 
115
115
  ## Related packages
116
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 |
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
123
 
124
- ## Source
124
+ ## Links
125
125
 
126
- [github.com/karlnorling/ghs-hazard-pictograms](https://github.com/karlnorling/ghs-hazard-pictograms)
126
+ - **Docs:** [karlnorling.github.io/ghs-hazard-pictograms](https://karlnorling.github.io/ghs-hazard-pictograms/)
127
+ - **Source:** [github.com/karlnorling/ghs-hazard-pictograms](https://github.com/karlnorling/ghs-hazard-pictograms)
128
+ - **Issues:** [github.com/karlnorling/ghs-hazard-pictograms/issues](https://github.com/karlnorling/ghs-hazard-pictograms/issues)
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA8BH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA6CH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -15,19 +15,33 @@ const core_1 = require("@ghs-hazard-pictograms/core");
15
15
  // Helpers
16
16
  // ---------------------------------------------------------------------------
17
17
  /**
18
- * Derives the CSS class name for a given asset path by applying the same
19
- * sanitisation logic used in the sprite generator.
18
+ * Derives the short CSS class name for a given asset path.
20
19
  *
21
- * @param assetPath - Relative asset path, e.g. `"physical_hazards/ghs01/foo.svg"`.
20
+ * - GHS core pictograms: `ghs-ghsNN` (e.g. `ghs-ghs01`) — derived from the parent
21
+ * directory name which starts with the GHS code.
22
+ * - Transport pictograms: `ghs-{slug}` (e.g. `ghs-adr-1-4`, `ghs-un-8`) — derived
23
+ * from the SVG filename with common prefixes stripped.
24
+ *
25
+ * @param assetPath - Relative asset path, e.g. `"physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg"`.
22
26
  * @returns CSS class name string (prefixed with `ghs-`).
23
27
  */
24
28
  function cssClassForPath(assetPath) {
25
- return ('ghs-' +
26
- assetPath
27
- .replace(/[/\\?%*:|"<>]/g, '_')
28
- .replace(/\s/g, '')
29
- .toLowerCase()
30
- .replace(/\.svg$/, ''));
29
+ const parts = assetPath.replace(/\\/g, '/').split('/');
30
+ const parentDir = parts[parts.length - 2] ?? '';
31
+ const filename = (parts[parts.length - 1] ?? '').replace(/\.svg$/i, '');
32
+ // GHS core: parent directory starts with "ghsNN" (e.g. "ghs01_explosive")
33
+ const ghsMatch = parentDir.match(/^(ghs\d+)/i);
34
+ if (ghsMatch) {
35
+ return 'ghs-' + ghsMatch[1].toLowerCase();
36
+ }
37
+ // Transport: derive from filename, strip verbose UN prefix and sanitise
38
+ const slug = filename
39
+ .replace(/^UN_transport_pictogram_-_/i, 'un-')
40
+ .replace(/\(([^)]+)\)/g, '-$1')
41
+ .replace(/[^a-z0-9]+/gi, '-')
42
+ .replace(/^-+|-+$/g, '')
43
+ .toLowerCase();
44
+ return 'ghs-' + slug;
31
45
  }
32
46
  // ---------------------------------------------------------------------------
33
47
  // Exports
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,8CAAiD;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,CACL,MAAM;QACN,SAAS;aACN,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC;aAC9B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACU,QAAA,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,iBAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACI,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,2BAAmB,CAAC,EAAE,CAAC,CAAC;AAA9E,QAAA,eAAe,mBAA+D"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,sDAAyD;AAEzD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;GAUG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAExE,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,wEAAwE;IACxE,MAAM,IAAI,GAAG,QAAQ;SAClB,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC;SAC7C,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC;SAC9B,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC;SAC5B,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;SACvB,WAAW,EAAE,CAAC;IAEjB,OAAO,MAAM,GAAG,IAAI,CAAC;AACvB,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACU,QAAA,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,iBAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACI,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,2BAAmB,CAAC,EAAE,CAAC,CAAC;AAA9E,QAAA,eAAe,mBAA+D"}
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA8BH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA6CH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEhE,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAAoC,CAAC"}
package/dist/esm/index.js CHANGED
@@ -12,19 +12,33 @@ import { pictograms } from '@ghs-hazard-pictograms/core';
12
12
  // Helpers
13
13
  // ---------------------------------------------------------------------------
14
14
  /**
15
- * Derives the CSS class name for a given asset path by applying the same
16
- * sanitisation logic used in the sprite generator.
15
+ * Derives the short CSS class name for a given asset path.
17
16
  *
18
- * @param assetPath - Relative asset path, e.g. `"physical_hazards/ghs01/foo.svg"`.
17
+ * - GHS core pictograms: `ghs-ghsNN` (e.g. `ghs-ghs01`) — derived from the parent
18
+ * directory name which starts with the GHS code.
19
+ * - Transport pictograms: `ghs-{slug}` (e.g. `ghs-adr-1-4`, `ghs-un-8`) — derived
20
+ * from the SVG filename with common prefixes stripped.
21
+ *
22
+ * @param assetPath - Relative asset path, e.g. `"physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg"`.
19
23
  * @returns CSS class name string (prefixed with `ghs-`).
20
24
  */
21
25
  function cssClassForPath(assetPath) {
22
- return ('ghs-' +
23
- assetPath
24
- .replace(/[/\\?%*:|"<>]/g, '_')
25
- .replace(/\s/g, '')
26
- .toLowerCase()
27
- .replace(/\.svg$/, ''));
26
+ const parts = assetPath.replace(/\\/g, '/').split('/');
27
+ const parentDir = parts[parts.length - 2] ?? '';
28
+ const filename = (parts[parts.length - 1] ?? '').replace(/\.svg$/i, '');
29
+ // GHS core: parent directory starts with "ghsNN" (e.g. "ghs01_explosive")
30
+ const ghsMatch = parentDir.match(/^(ghs\d+)/i);
31
+ if (ghsMatch) {
32
+ return 'ghs-' + ghsMatch[1].toLowerCase();
33
+ }
34
+ // Transport: derive from filename, strip verbose UN prefix and sanitise
35
+ const slug = filename
36
+ .replace(/^UN_transport_pictogram_-_/i, 'un-')
37
+ .replace(/\(([^)]+)\)/g, '-$1')
38
+ .replace(/[^a-z0-9]+/gi, '-')
39
+ .replace(/^-+|-+$/g, '')
40
+ .toLowerCase();
41
+ return 'ghs-' + slug;
28
42
  }
29
43
  // ---------------------------------------------------------------------------
30
44
  // Exports
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,CACL,MAAM;QACN,SAAS;aACN,OAAO,CAAC,gBAAgB,EAAE,GAAG,CAAC;aAC9B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;aAClB,WAAW,EAAE;aACb,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;GAUG;AACH,SAAS,eAAe,CAAC,SAAiB;IACxC,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAExE,0EAA0E;IAC1E,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5C,CAAC;IAED,wEAAwE;IACxE,MAAM,IAAI,GAAG,QAAQ;SAClB,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC;SAC7C,OAAO,CAAC,cAAc,EAAE,KAAK,CAAC;SAC9B,OAAO,CAAC,cAAc,EAAE,GAAG,CAAC;SAC5B,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;SACvB,WAAW,EAAE,CAAC;IAEjB,OAAO,MAAM,GAAG,IAAI,CAAC;AACvB,CAAC;AAED,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqC,MAAM,CAAC,WAAW,CACrF,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAC7D,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAU,EAAsB,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,42 @@
1
1
  {
2
2
  "name": "@ghs-hazard-pictograms/css",
3
- "version": "1.0.2",
3
+ "version": "1.0.5",
4
4
  "description": "GHS hazard pictogram CSS sprite utilities",
5
+ "keywords": [
6
+ "adr",
7
+ "background-image",
8
+ "chemical",
9
+ "css",
10
+ "ghs",
11
+ "globally-harmonized-system",
12
+ "hazard",
13
+ "icons",
14
+ "pictogram",
15
+ "pictograms",
16
+ "safety",
17
+ "sprite",
18
+ "symbol",
19
+ "transport",
20
+ "un",
21
+ "utility",
22
+ "warning"
23
+ ],
24
+ "homepage": "https://karlnorling.github.io/ghs-hazard-pictograms/",
25
+ "bugs": {
26
+ "url": "https://github.com/karlnorling/ghs-hazard-pictograms/issues"
27
+ },
28
+ "license": "MIT",
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "https://github.com/karlnorling/ghs-hazard-pictograms",
32
+ "directory": "packages/@ghs-hazard-pictograms/css"
33
+ },
34
+ "files": [
35
+ "dist/",
36
+ "sprite.css",
37
+ "package.json",
38
+ "README.md"
39
+ ],
5
40
  "main": "./dist/cjs/index.js",
6
41
  "module": "./dist/esm/index.js",
7
42
  "types": "./dist/esm/index.d.ts",
@@ -13,34 +48,10 @@
13
48
  },
14
49
  "./sprite.css": "./sprite.css"
15
50
  },
16
- "files": [
17
- "dist/",
18
- "sprite.css",
19
- "README.md"
20
- ],
21
- "keywords": [
22
- "ghs",
23
- "hazard",
24
- "pictogram",
25
- "pictograms",
26
- "chemical",
27
- "safety",
28
- "warning",
29
- "symbol",
30
- "icons",
31
- "css",
32
- "sprite",
33
- "background-image",
34
- "utility",
35
- "transport",
36
- "un",
37
- "adr",
38
- "globally-harmonized-system"
39
- ],
40
51
  "scripts": {
41
52
  "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && node -e \"require('fs').writeFileSync('dist/cjs/package.json', JSON.stringify({type:'commonjs'})); require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({type:'module'}))\"",
42
53
  "test": "jest",
43
- "type-check": "tsc --noEmit -p tsconfig.cjs.json"
54
+ "type-check": "tsc --noEmit -p tsconfig.json"
44
55
  },
45
56
  "dependencies": {
46
57
  "@ghs-hazard-pictograms/core": "workspace:*"
package/sprite.css CHANGED
@@ -2,107 +2,97 @@
2
2
  Generated by 'yarn update'. Do not edit manually.
3
3
  Import this file and apply the class to a sized block element to display the pictogram. */
4
4
 
5
- /* Physical hazards */
6
-
7
- .ghs-ghs01 {
8
- background-image: url('../assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg');
5
+ .ghs-un-8 {
6
+ background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_8.svg');
9
7
  background-position: center;
10
8
  background-repeat: no-repeat;
11
9
  background-size: contain;
12
10
  }
13
11
 
14
- .ghs-ghs02 {
15
- background-image: url('../assets/assets/physical_hazards_pictograms/ghs02_flammable/GHS-pictogram-flamme.svg');
12
+ .ghs-un-6 {
13
+ background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_6.svg');
16
14
  background-position: center;
17
15
  background-repeat: no-repeat;
18
16
  background-size: contain;
19
17
  }
20
18
 
21
- .ghs-ghs03 {
22
- background-image: url('../assets/assets/physical_hazards_pictograms/ghs03_oxidizing/GHS-pictogram-rondflam.svg');
19
+ .ghs-un-5-2-black {
20
+ background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_5.2_(black).svg');
23
21
  background-position: center;
24
22
  background-repeat: no-repeat;
25
23
  background-size: contain;
26
24
  }
27
25
 
28
- .ghs-ghs04 {
29
- background-image: url('../assets/assets/physical_hazards_pictograms/ghs04_compressedgas/GHS-pictogram-bottle.svg');
26
+ .ghs-adr-5-1 {
27
+ background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/ADR_5.1.svg');
30
28
  background-position: center;
31
29
  background-repeat: no-repeat;
32
30
  background-size: contain;
33
31
  }
34
32
 
35
- .ghs-ghs05 {
36
- background-image: url('../assets/assets/physical_hazards_pictograms/ghs05_corrosive/GHS-pictogram-acid.svg');
33
+ .ghs-adr-9 {
34
+ background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_9.svg');
37
35
  background-position: center;
38
36
  background-repeat: no-repeat;
39
37
  background-size: contain;
40
38
  }
41
39
 
42
- /* Health hazards */
43
-
44
- .ghs-ghs06 {
45
- background-image: url('../assets/assets/health_hazards_pictograms/ghs06_toxic/GHS-pictogram-skull.svg');
40
+ .ghs-adr-7e {
41
+ background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7E.svg');
46
42
  background-position: center;
47
43
  background-repeat: no-repeat;
48
44
  background-size: contain;
49
45
  }
50
46
 
51
- .ghs-ghs07 {
52
- background-image: url('../assets/assets/health_hazards_pictograms/ghs07_healthhazard_hazardoustoozonelayer/GHS-pictogram-exclam.svg');
47
+ .ghs-adr-7c {
48
+ background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7C.svg');
53
49
  background-position: center;
54
50
  background-repeat: no-repeat;
55
51
  background-size: contain;
56
52
  }
57
53
 
58
- .ghs-ghs08 {
59
- background-image: url('../assets/assets/health_hazards_pictograms/ghs08_serioushealthhazard/GHS-pictogram-silhouette.svg');
54
+ .ghs-adr-7b {
55
+ background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7B.svg');
60
56
  background-position: center;
61
57
  background-repeat: no-repeat;
62
58
  background-size: contain;
63
59
  }
64
60
 
65
- /* Environmental hazards */
66
-
67
- .ghs-ghs09 {
68
- background-image: url('../assets/assets/environmental_hazards_pictograms/ghs09_hazardoustotheenvironment/GHS-pictogram-pollu.svg');
61
+ .ghs-adr-7a {
62
+ background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7A.svg');
69
63
  background-position: center;
70
64
  background-repeat: no-repeat;
71
65
  background-size: contain;
72
66
  }
73
67
 
74
- /* Transport: Class 1 — Explosives */
75
-
76
- .ghs-adr-1 {
77
- background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.svg');
68
+ .ghs-adr-6-2 {
69
+ background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_6.2.svg');
78
70
  background-position: center;
79
71
  background-repeat: no-repeat;
80
72
  background-size: contain;
81
73
  }
82
74
 
83
- .ghs-adr-1-4 {
84
- background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.4.svg');
75
+ .ghs-adr-3 {
76
+ background-image: url('../assets/assets/transport_pictograms/classes_3_and_4__flammable_liquids_and_solids/ADR_3.svg');
85
77
  background-position: center;
86
78
  background-repeat: no-repeat;
87
79
  background-size: contain;
88
80
  }
89
81
 
90
- .ghs-adr-1-5 {
91
- background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.5.svg');
82
+ .ghs-adr-2-3 {
83
+ background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.3.svg');
92
84
  background-position: center;
93
85
  background-repeat: no-repeat;
94
86
  background-size: contain;
95
87
  }
96
88
 
97
- .ghs-adr-1-6 {
98
- background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.6.svg');
89
+ .ghs-adr-2-2 {
90
+ background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.2.svg');
99
91
  background-position: center;
100
92
  background-repeat: no-repeat;
101
93
  background-size: contain;
102
94
  }
103
95
 
104
- /* Transport: Class 2 — Gases */
105
-
106
96
  .ghs-adr-2-1 {
107
97
  background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.1.svg');
108
98
  background-position: center;
@@ -110,98 +100,92 @@
110
100
  background-size: contain;
111
101
  }
112
102
 
113
- .ghs-adr-2-2 {
114
- background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.2.svg');
103
+ .ghs-adr-1 {
104
+ background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.svg');
115
105
  background-position: center;
116
106
  background-repeat: no-repeat;
117
107
  background-size: contain;
118
108
  }
119
109
 
120
- .ghs-adr-2-3 {
121
- background-image: url('../assets/assets/transport_pictograms/class_2__gases/ADR_2.3.svg');
110
+ .ghs-adr-1-6 {
111
+ background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.6.svg');
122
112
  background-position: center;
123
113
  background-repeat: no-repeat;
124
114
  background-size: contain;
125
115
  }
126
116
 
127
- /* Transport: Classes 3 & 4 — Flammable */
128
-
129
- .ghs-adr-3 {
130
- background-image: url('../assets/assets/transport_pictograms/classes_3_and_4__flammable_liquids_and_solids/ADR_3.svg');
117
+ .ghs-adr-1-5 {
118
+ background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.5.svg');
131
119
  background-position: center;
132
120
  background-repeat: no-repeat;
133
121
  background-size: contain;
134
122
  }
135
123
 
136
- /* Transport: Other GHS classes */
137
-
138
- .ghs-adr-5-1 {
139
- background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/ADR_5.1.svg');
124
+ .ghs-adr-1-4 {
125
+ background-image: url('../assets/assets/transport_pictograms/class_1__explosives/ADR_1.4.svg');
140
126
  background-position: center;
141
127
  background-repeat: no-repeat;
142
128
  background-size: contain;
143
129
  }
144
130
 
145
- .ghs-un-5-2-black {
146
- background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_5.2_(black).svg');
131
+ .ghs-ghs05 {
132
+ background-image: url('../assets/assets/physical_hazards_pictograms/ghs05_corrosive/GHS-pictogram-acid.svg');
147
133
  background-position: center;
148
134
  background-repeat: no-repeat;
149
135
  background-size: contain;
150
136
  }
151
137
 
152
- .ghs-un-6 {
153
- background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_6.svg');
138
+ .ghs-ghs04 {
139
+ background-image: url('../assets/assets/physical_hazards_pictograms/ghs04_compressedgas/GHS-pictogram-bottle.svg');
154
140
  background-position: center;
155
141
  background-repeat: no-repeat;
156
142
  background-size: contain;
157
143
  }
158
144
 
159
- .ghs-un-8 {
160
- background-image: url('../assets/assets/transport_pictograms/other_ghs_transport_classes/UN_transport_pictogram_-_8.svg');
145
+ .ghs-ghs03 {
146
+ background-image: url('../assets/assets/physical_hazards_pictograms/ghs03_oxidizing/GHS-pictogram-rondflam.svg');
161
147
  background-position: center;
162
148
  background-repeat: no-repeat;
163
149
  background-size: contain;
164
150
  }
165
151
 
166
- /* Transport: Non-GHS pictograms */
167
-
168
- .ghs-adr-6-2 {
169
- background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_6.2.svg');
152
+ .ghs-ghs02 {
153
+ background-image: url('../assets/assets/physical_hazards_pictograms/ghs02_flammable/GHS-pictogram-flamme.svg');
170
154
  background-position: center;
171
155
  background-repeat: no-repeat;
172
156
  background-size: contain;
173
157
  }
174
158
 
175
- .ghs-adr-7a {
176
- background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7A.svg');
159
+ .ghs-ghs01 {
160
+ background-image: url('../assets/assets/physical_hazards_pictograms/ghs01_explosive/GHS-pictogram-explos.svg');
177
161
  background-position: center;
178
162
  background-repeat: no-repeat;
179
163
  background-size: contain;
180
164
  }
181
165
 
182
- .ghs-adr-7b {
183
- background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7B.svg');
166
+ .ghs-ghs08 {
167
+ background-image: url('../assets/assets/health_hazards_pictograms/ghs08_serioushealthhazard/GHS-pictogram-silhouette.svg');
184
168
  background-position: center;
185
169
  background-repeat: no-repeat;
186
170
  background-size: contain;
187
171
  }
188
172
 
189
- .ghs-adr-7c {
190
- background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7C.svg');
173
+ .ghs-ghs07 {
174
+ background-image: url('../assets/assets/health_hazards_pictograms/ghs07_healthhazard_hazardoustoozonelayer/GHS-pictogram-exclam.svg');
191
175
  background-position: center;
192
176
  background-repeat: no-repeat;
193
177
  background-size: contain;
194
178
  }
195
179
 
196
- .ghs-adr-7e {
197
- background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_7E.svg');
180
+ .ghs-ghs06 {
181
+ background-image: url('../assets/assets/health_hazards_pictograms/ghs06_toxic/GHS-pictogram-skull.svg');
198
182
  background-position: center;
199
183
  background-repeat: no-repeat;
200
184
  background-size: contain;
201
185
  }
202
186
 
203
- .ghs-adr-9 {
204
- background-image: url('../assets/assets/transport_pictograms/non-ghs_transport_pictograms/ADR_9.svg');
187
+ .ghs-ghs09 {
188
+ background-image: url('../assets/assets/environmental_hazards_pictograms/ghs09_hazardoustotheenvironment/GHS-pictogram-pollu.svg');
205
189
  background-position: center;
206
190
  background-repeat: no-repeat;
207
191
  background-size: contain;