@odx/icons 2.4.1 → 2.6.0

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 (20) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +20 -3
  3. package/core/core-demo-poster.html +2 -2
  4. package/core/core-icons.css +28 -0
  5. package/core/core-icons.scss +29 -0
  6. package/medical/medical-demo-poster.html +2 -2
  7. package/medical/medical-icons.css +28 -0
  8. package/medical/medical-icons.eot +0 -0
  9. package/medical/medical-icons.scss +29 -0
  10. package/package.json +1 -1
  11. package/safety/safety-demo-poster.html +10 -3
  12. package/safety/safety-iconmap.scss +1 -0
  13. package/safety/safety-icons.css +31 -0
  14. package/safety/safety-icons.eot +0 -0
  15. package/safety/safety-icons.scss +32 -0
  16. package/safety/safety-icons.ttf +0 -0
  17. package/safety/safety-icons.woff +0 -0
  18. package/safety/safety-icons.woff2 +0 -0
  19. package/safety/safety-metadata.json +4 -0
  20. package/safety/svg/equipment-change.svg +1 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [2.6.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.5.0...v2.6.0) (2023-08-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * **icons:** addition of safety eq-change ([8c37a53](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/8c37a53e4fb67ff506f6061d81a7be1df24f99c9))
7
+
8
+ # [2.5.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.4.1...v2.5.0) (2023-08-28)
9
+
10
+
11
+ ### Features
12
+
13
+ * support icon transformations via data-icon-* attributes ([7f4c619](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/7f4c619160b03d205a135c6fde2d7711e18066b6))
14
+
1
15
  ## [2.4.1](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.4.0...v2.4.1) (2023-08-27)
2
16
 
3
17
 
package/README.md CHANGED
@@ -14,9 +14,9 @@ npm install @odx/icons
14
14
 
15
15
  @odx/icons contains multiple icon sets for different types of applications:
16
16
 
17
- *core: Icons used across applications of all Dräger entities
18
- *medical: (Under consstruction) Icons for use in specific applications of the Dräger Medical division
19
- *safety: Icons for use in specific applications of the Dräger Safety division
17
+ - **core**: Icons used across applications of all Dräger entities
18
+ - **medical**: (Under consstruction) Icons for use in specific applications of the Dräger Medical division
19
+ - **safety**: Icons for use in specific applications of the Dräger Safety division
20
20
 
21
21
  Import one or more icon sets into your ``styles.scss``, for example:
22
22
 
@@ -44,6 +44,23 @@ Demo posters with all icons contained in the icon sets are part of this package.
44
44
 
45
45
  All icons are also available as SVG files in the package. Most SVGs contain elements that are colored in ``#f0f``. Those parts can be dynamically colored, while all other parts of the icons must stay in the color specified in the SVG file.
46
46
 
47
+ ### Transformations
48
+
49
+ The following icon transformations can be applied using `data-icon-*` attributes:
50
+
51
+ - **data-icon-flip=**
52
+ - "horizontal" - flips the icon on the X-axis
53
+ - "vertical" - flips the icon on the Y-axis
54
+ - "both" - flips the icon on both axis
55
+
56
+ - **data-icon-rotate=**
57
+ - "90deg" - rotates the icon by 90deg
58
+ - "180deg" - rotates the icon by 180deg
59
+ - "270deg" - rotates the icon by 270deg
60
+ - "custom" - a custom rotation angle can be set via the local CSS variable `--odx-icon-rotation`
61
+
62
+
63
+
47
64
  [npm-icon]: https://nodei.co/npm/@odx/icons.svg?downloads=true
48
65
  [npm-url]: https://npmjs.org/package/@odx/icons
49
66
  [semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
package/core/core-demo-poster.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html>
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>@odx/icons 2.4.1</title>
5
+ <title>@odx/icons 2.6.0</title>
6
6
  <link rel="stylesheet" type="text/css" href="core-icons.css" media="screen" />
7
7
  <style>
8
8
  * {
@@ -126,7 +126,7 @@
126
126
  />
127
127
  </svg>
128
128
  <h1 class="page-title">
129
- @odx/icons 2.4.1
129
+ @odx/icons 2.6.0
130
130
  </h1>
131
131
  <input class="page-search" placeholder="Search icons ..." />
132
132
  <div class="icon-count">
package/core/core-icons.css CHANGED
@@ -46,6 +46,34 @@
46
46
  left: 0;
47
47
  }
48
48
 
49
+ .odx-icon[data-icon-rotate] {
50
+ transform: rotate(var(--odx-icon-rotation));
51
+ }
52
+
53
+ .odx-icon[data-icon-rotate="90deg"] {
54
+ --odx-icon-rotation: 90deg;
55
+ }
56
+
57
+ .odx-icon[data-icon-rotate="180deg"] {
58
+ --odx-icon-rotation: 180deg;
59
+ }
60
+
61
+ .odx-icon[data-icon-rotate="270deg"] {
62
+ --odx-icon-rotation: 270deg;
63
+ }
64
+
65
+ .odx-icon[data-icon-flip=horizontal] {
66
+ transform: scaleX(-1);
67
+ }
68
+
69
+ .odx-icon[data-icon-flip=vertical] {
70
+ transform: scaleY(-1);
71
+ }
72
+
73
+ .odx-icon[data-icon-flip=both] {
74
+ transform: scale(-1);
75
+ }
76
+
49
77
  [data-icon-set=core][data-icon-name=aggregation]::before {
50
78
  content: "\f11d";
51
79
  }
package/core/core-icons.scss CHANGED
@@ -52,6 +52,35 @@
52
52
  left: 0;
53
53
  }
54
54
 
55
+
56
+ .odx-icon[data-icon-rotate] {
57
+ transform: rotate(var(--odx-icon-rotation));
58
+ }
59
+
60
+ .odx-icon[data-icon-rotate="90deg"] {
61
+ --odx-icon-rotation: 90deg;
62
+ }
63
+
64
+ .odx-icon[data-icon-rotate="180deg"] {
65
+ --odx-icon-rotation: 180deg;
66
+ }
67
+
68
+ .odx-icon[data-icon-rotate="270deg"] {
69
+ --odx-icon-rotation: 270deg;
70
+ }
71
+
72
+ .odx-icon[data-icon-flip="horizontal"] {
73
+ transform: scaleX(-1);
74
+ }
75
+
76
+ .odx-icon[data-icon-flip="vertical"] {
77
+ transform: scaleY(-1);
78
+ }
79
+
80
+ .odx-icon[data-icon-flip="both"] {
81
+ transform: scale(-1);
82
+ }
83
+
55
84
  [data-icon-set="core"] {
56
85
  &[data-icon-name="aggregation"]::before {
57
86
  content: utils.get-icon-glyph("aggregation");
package/medical/medical-demo-poster.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html>
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>@odx/icons 2.4.1</title>
5
+ <title>@odx/icons 2.6.0</title>
6
6
  <link rel="stylesheet" type="text/css" href="medical-icons.css" media="screen" />
7
7
  <style>
8
8
  * {
@@ -126,7 +126,7 @@
126
126
  />
127
127
  </svg>
128
128
  <h1 class="page-title">
129
- @odx/icons 2.4.1
129
+ @odx/icons 2.6.0
130
130
  </h1>
131
131
  <input class="page-search" placeholder="Search icons ..." />
132
132
  <div class="icon-count">
package/medical/medical-icons.css CHANGED
@@ -46,6 +46,34 @@
46
46
  left: 0;
47
47
  }
48
48
 
49
+ .odx-icon[data-icon-rotate] {
50
+ transform: rotate(var(--odx-icon-rotation));
51
+ }
52
+
53
+ .odx-icon[data-icon-rotate="90deg"] {
54
+ --odx-icon-rotation: 90deg;
55
+ }
56
+
57
+ .odx-icon[data-icon-rotate="180deg"] {
58
+ --odx-icon-rotation: 180deg;
59
+ }
60
+
61
+ .odx-icon[data-icon-rotate="270deg"] {
62
+ --odx-icon-rotation: 270deg;
63
+ }
64
+
65
+ .odx-icon[data-icon-flip=horizontal] {
66
+ transform: scaleX(-1);
67
+ }
68
+
69
+ .odx-icon[data-icon-flip=vertical] {
70
+ transform: scaleY(-1);
71
+ }
72
+
73
+ .odx-icon[data-icon-flip=both] {
74
+ transform: scale(-1);
75
+ }
76
+
49
77
  [data-icon-set=medical][data-icon-name=placeholder]::before {
50
78
  content: "\f101";
51
79
  }
package/medical/medical-icons.eot CHANGED
Binary file
package/medical/medical-icons.scss CHANGED
@@ -52,6 +52,35 @@
52
52
  left: 0;
53
53
  }
54
54
 
55
+
56
+ .odx-icon[data-icon-rotate] {
57
+ transform: rotate(var(--odx-icon-rotation));
58
+ }
59
+
60
+ .odx-icon[data-icon-rotate="90deg"] {
61
+ --odx-icon-rotation: 90deg;
62
+ }
63
+
64
+ .odx-icon[data-icon-rotate="180deg"] {
65
+ --odx-icon-rotation: 180deg;
66
+ }
67
+
68
+ .odx-icon[data-icon-rotate="270deg"] {
69
+ --odx-icon-rotation: 270deg;
70
+ }
71
+
72
+ .odx-icon[data-icon-flip="horizontal"] {
73
+ transform: scaleX(-1);
74
+ }
75
+
76
+ .odx-icon[data-icon-flip="vertical"] {
77
+ transform: scaleY(-1);
78
+ }
79
+
80
+ .odx-icon[data-icon-flip="both"] {
81
+ transform: scale(-1);
82
+ }
83
+
55
84
  [data-icon-set="medical"] {
56
85
  &[data-icon-name="placeholder"]::before {
57
86
  content: utils.get-icon-glyph("placeholder");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/icons",
3
- "version": "2.4.1",
3
+ "version": "2.6.0",
4
4
  "author": "Drägerwerk AG & Co. KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
package/safety/safety-demo-poster.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <html>
3
3
  <head>
4
4
  <meta charset="utf-8">
5
- <title>@odx/icons 2.4.1</title>
5
+ <title>@odx/icons 2.6.0</title>
6
6
  <link rel="stylesheet" type="text/css" href="safety-icons.css" media="screen" />
7
7
  <style>
8
8
  * {
@@ -126,11 +126,11 @@
126
126
  />
127
127
  </svg>
128
128
  <h1 class="page-title">
129
- @odx/icons 2.4.1
129
+ @odx/icons 2.6.0
130
130
  </h1>
131
131
  <input class="page-search" placeholder="Search icons ..." />
132
132
  <div class="icon-count">
133
- Iconset: <strong>safety</strong> (831 icons)
133
+ Iconset: <strong>safety</strong> (832 icons)
134
134
  </div>
135
135
  </header>
136
136
  <main class="icons" id="icons">
@@ -1282,6 +1282,13 @@
1282
1282
  <span class="icon-name">drugcheck</span>
1283
1283
  <span class="icon-alias">
1284
1284
  </div>
1285
+ <div class="icons__item">
1286
+ <i class="odx-icon" data-icon-set="safety" data-icon-name="equipment-change">
1287
+ <span></span>
1288
+ </i>
1289
+ <span class="icon-name">equipment-change</span>
1290
+ <span class="icon-alias">
1291
+ </div>
1285
1292
  <div class="icons__item">
1286
1293
  <i class="odx-icon" data-icon-set="safety" data-icon-name="equipment-fire">
1287
1294
  <span></span>
package/safety/safety-iconmap.scss CHANGED
@@ -211,6 +211,7 @@ $glyphs: (
211
211
  docking-station-4: "\eb11",
212
212
  docking-station-8: "\eb12",
213
213
  drugcheck: "\f1a6",
214
+ equipment-change: "\f1a5",
214
215
  equipment-fire: "\f10d",
215
216
  erase: "\eb1c",
216
217
  error-extra-information: "\f1a9",
package/safety/safety-icons.css CHANGED
@@ -46,6 +46,34 @@
46
46
  left: 0;
47
47
  }
48
48
 
49
+ .odx-icon[data-icon-rotate] {
50
+ transform: rotate(var(--odx-icon-rotation));
51
+ }
52
+
53
+ .odx-icon[data-icon-rotate="90deg"] {
54
+ --odx-icon-rotation: 90deg;
55
+ }
56
+
57
+ .odx-icon[data-icon-rotate="180deg"] {
58
+ --odx-icon-rotation: 180deg;
59
+ }
60
+
61
+ .odx-icon[data-icon-rotate="270deg"] {
62
+ --odx-icon-rotation: 270deg;
63
+ }
64
+
65
+ .odx-icon[data-icon-flip=horizontal] {
66
+ transform: scaleX(-1);
67
+ }
68
+
69
+ .odx-icon[data-icon-flip=vertical] {
70
+ transform: scaleY(-1);
71
+ }
72
+
73
+ .odx-icon[data-icon-flip=both] {
74
+ transform: scale(-1);
75
+ }
76
+
49
77
  [data-icon-set=safety][data-icon-name=absorber-absent]::before {
50
78
  content: "\f150";
51
79
  }
@@ -736,6 +764,9 @@
736
764
  [data-icon-set=safety][data-icon-name=drugcheck]::before {
737
765
  content: "\f1a6";
738
766
  }
767
+ [data-icon-set=safety][data-icon-name=equipment-change]::before {
768
+ content: "\f1a5";
769
+ }
739
770
  [data-icon-set=safety][data-icon-name=equipment-fire]::before {
740
771
  content: "\f10d";
741
772
  }
package/safety/safety-icons.eot CHANGED
Binary file
package/safety/safety-icons.scss CHANGED
@@ -52,6 +52,35 @@
52
52
  left: 0;
53
53
  }
54
54
 
55
+
56
+ .odx-icon[data-icon-rotate] {
57
+ transform: rotate(var(--odx-icon-rotation));
58
+ }
59
+
60
+ .odx-icon[data-icon-rotate="90deg"] {
61
+ --odx-icon-rotation: 90deg;
62
+ }
63
+
64
+ .odx-icon[data-icon-rotate="180deg"] {
65
+ --odx-icon-rotation: 180deg;
66
+ }
67
+
68
+ .odx-icon[data-icon-rotate="270deg"] {
69
+ --odx-icon-rotation: 270deg;
70
+ }
71
+
72
+ .odx-icon[data-icon-flip="horizontal"] {
73
+ transform: scaleX(-1);
74
+ }
75
+
76
+ .odx-icon[data-icon-flip="vertical"] {
77
+ transform: scaleY(-1);
78
+ }
79
+
80
+ .odx-icon[data-icon-flip="both"] {
81
+ transform: scale(-1);
82
+ }
83
+
55
84
  [data-icon-set="safety"] {
56
85
  &[data-icon-name="absorber-absent"]::before {
57
86
  content: utils.get-icon-glyph("absorber-absent");
@@ -743,6 +772,9 @@
743
772
  &[data-icon-name="drugcheck"]::before {
744
773
  content: utils.get-icon-glyph("drugcheck");
745
774
  }
775
+ &[data-icon-name="equipment-change"]::before {
776
+ content: utils.get-icon-glyph("equipment-change");
777
+ }
746
778
  &[data-icon-name="equipment-fire"]::before {
747
779
  content: utils.get-icon-glyph("equipment-fire");
748
780
  }
package/safety/safety-icons.ttf CHANGED
Binary file
package/safety/safety-icons.woff CHANGED
Binary file
package/safety/safety-icons.woff2 CHANGED
Binary file
package/safety/safety-metadata.json CHANGED
@@ -655,6 +655,10 @@
655
655
  "name": "drugcheck",
656
656
  "set": "safety"
657
657
  },
658
+ {
659
+ "name": "equipment-change",
660
+ "set": "safety"
661
+ },
658
662
  {
659
663
  "name": "equipment-fire",
660
664
  "set": "safety"
package/safety/svg/equipment-change.svg ADDED
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg id="uuid-84be51f3-dcca-4e2c-a47d-2763fa111893" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m29.95,22.66c-.37-2.9-2.7-5.24-5.6-5.6-4.25-.54-7.83,3.04-7.29,7.29.37,2.9,2.7,5.24,5.6,5.6,4.25.54,7.83-3.04,7.29-7.29h0Zm-6.45,5.35c-1.25,0-2.35-.52-3.16-1.34l-1.34,1.34v-4h4l-1.4,1.4c.49.49,1.16.8,1.9.8,1.32,0,2.41-.95,2.65-2.2h1.8c-.25,2.25-2.14,4-4.45,4h0Zm4.5-5h-4l1.4-1.4c-.49-.49-1.16-.8-1.9-.8-1.32,0-2.41.95-2.65,2.2h-1.8c.25-2.25,2.14-4,4.45-4,1.25,0,2.35.52,3.16,1.34l1.34-1.34v4h0Zm-11.61-14.91c-1-.44-2.12-.75-3.31-.93-.09-.49-.51-.86-1.03-.86h-2.1c-.52,0-.94.37-1.03.86-1.19.17-2.3.49-3.31.93-.99.44-1.61,1.44-1.61,2.52v6.73c0,1.28.7,2.49,1.85,3.07.56.28,1.16.52,1.78.71-.08-.29-.13-.59-.13-.91,0-.65.19-1.25.5-1.77-.67-.17-1.31-.38-1.86-.65-.46-.22-.74-.67-.74-1.15v-5.54h0c0-.13.02-.25.06-.37.04-.12.09-.23.16-.33.14-.21.35-.37.6-.48.33-.13.68-.25,1.05-.36,1.11-.31,2.38-.49,3.74-.49s2.63.18,3.74.49c.37.1.72.22,1.05.36.25.1.46.27.6.48.07.1.13.22.16.33s.06.24.06.37h0v5.54c0,.48-.28.92-.74,1.15-.33.16-.69.3-1.06.43-.25.09-.53.15-.8.22.31.52.5,1.12.5,1.77,0,.32-.06.61-.13.91.63-.19,1.22-.43,1.78-.71,1.15-.58,1.85-1.79,1.85-3.07v-6.73c0-1.08-.62-2.08-1.61-2.52h0Zm-7.07,6.89c.17-.61.72-1.02,1.35-1.02h.66c.63,0,1.18.42,1.35,1.02l.76,2.77.14.08c.71-.16,1.39-.37,1.98-.66.21-.1.34-.3.34-.52v-5.54c0-.23-.15-.44-.38-.54-1.27-.51-2.88-.8-4.52-.8s-3.25.28-4.52.8c-.23.09-.38.3-.38.54v5.54c0,.22.13.42.34.52.59.29,1.27.5,1.98.66l.14-.08.76-2.77h0Zm1.68,2.45c-1.55,0-2.8,1.25-2.8,2.78s1.25,2.78,2.8,2.78,2.8-1.25,2.8-2.78-1.25-2.78-2.8-2.78Zm0,4.41c-.64,0-1.17-.52-1.17-1.16s.52-1.16,1.17-1.16,1.17.52,1.17,1.16-.52,1.16-1.17,1.16Zm18.22-9.73h-.22v-3.28c0-1.56-1.34-2.83-3-2.83h-2v.94h2c1.1,0,2,.84,2,1.88v3.28h-.22l-.78,3.6v1.3h3v-1.3l-.78-3.6h0Zm-3.22,4.1v-6.45c0-1.02-.8-1.84-1.78-1.84h-.89v-3.68h-5.33v.92l3.56.29v.8l-3.56.29v.46h3.56v.92h-.89c-.98,0-1.78.82-1.78,1.84v7.41h0c1.23-.94,2.75-1.5,4.39-1.5.96,0,1.88.19,2.72.53h0Z" style="fill:#f0f;"/></svg>