@odx/icons 2.4.0 → 2.5.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 (18) 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-iconmap.scss +1 -1
  5. package/core/core-icons.css +29 -1
  6. package/core/core-icons.eot +0 -0
  7. package/core/core-icons.scss +29 -0
  8. package/core/core-icons.ttf +0 -0
  9. package/core/core-icons.woff +0 -0
  10. package/core/core-icons.woff2 +0 -0
  11. package/medical/medical-demo-poster.html +2 -2
  12. package/medical/medical-icons.css +28 -0
  13. package/medical/medical-icons.eot +0 -0
  14. package/medical/medical-icons.scss +29 -0
  15. package/package.json +1 -1
  16. package/safety/safety-demo-poster.html +2 -2
  17. package/safety/safety-icons.css +28 -0
  18. package/safety/safety-icons.scss +29 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [2.5.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.4.1...v2.5.0) (2023-08-28)
2
+
3
+
4
+ ### Features
5
+
6
+ * support icon transformations via data-icon-* attributes ([7f4c619](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/7f4c619160b03d205a135c6fde2d7711e18066b6))
7
+
8
+ ## [2.4.1](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.4.0...v2.4.1) (2023-08-27)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * **toolbox:** change codepoint ([3317ddb](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/3317ddb1138bf7307786a227c7a5f53d270d1f3f))
14
+
1
15
  # [2.4.0](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.3.1...v2.4.0) (2023-08-16)
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.0</title>
5
+ <title>@odx/icons 2.5.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.0
129
+ @odx/icons 2.5.0
130
130
  </h1>
131
131
  <input class="page-search" placeholder="Search icons ..." />
132
132
  <div class="icon-count">
package/core/core-iconmap.scss CHANGED
@@ -310,7 +310,7 @@ $glyphs: (
310
310
  sync-success-part1: "\f20a",
311
311
  sync-success-part2: "\f20b",
312
312
  tile-menu: "\f1fb",
313
- toolbox: "\f23f",
313
+ toolbox: "\f24a",
314
314
  training: "\f1fc",
315
315
  undo: "\f1fd",
316
316
  unlock: "\f1fe",
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
  }
@@ -1036,7 +1064,7 @@
1036
1064
  content: "\f1fb";
1037
1065
  }
1038
1066
  [data-icon-set=core][data-icon-name=toolbox]::before {
1039
- content: "\f23f";
1067
+ content: "\f24a";
1040
1068
  }
1041
1069
  [data-icon-set=core][data-icon-name=training]::before {
1042
1070
  content: "\f1fc";
package/core/core-icons.eot CHANGED
Binary file
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/core/core-icons.ttf CHANGED
Binary file
package/core/core-icons.woff CHANGED
Binary file
package/core/core-icons.woff2 CHANGED
Binary file
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.0</title>
5
+ <title>@odx/icons 2.5.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.0
129
+ @odx/icons 2.5.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.0",
3
+ "version": "2.5.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.0</title>
5
+ <title>@odx/icons 2.5.0</title>
6
6
  <link rel="stylesheet" type="text/css" href="safety-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.0
129
+ @odx/icons 2.5.0
130
130
  </h1>
131
131
  <input class="page-search" placeholder="Search icons ..." />
132
132
  <div class="icon-count">
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
  }
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");