@odx/icons 2.4.1 → 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 (13) hide show
  1. package/CHANGELOG.md +7 -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 +2 -2
  12. package/safety/safety-icons.css +28 -0
  13. package/safety/safety-icons.scss +29 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
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
+
1
8
  ## [2.4.1](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v2.4.0...v2.4.1) (2023-08-27)
2
9
 
3
10
 
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.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.1
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-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.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.1
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.1",
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.1</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.1
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");