@acorex/styles 5.0.6 → 5.0.7

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 (19) hide show
  1. package/index.scss +2 -1
  2. package/package.json +1 -1
  3. package/src/base/index.scss +5 -1
  4. package/src/components/_badge.scss +6 -34
  5. package/src/components/_button.scss +8 -5
  6. package/src/components/_calendar.scss +78 -16
  7. package/src/components/_editor-container.scss +12 -11
  8. package/src/components/_tabs.scss +109 -79
  9. package/src/icons/Read Me.txt +7 -0
  10. package/src/icons/demo-files/demo.css +152 -0
  11. package/src/icons/demo-files/demo.js +30 -0
  12. package/src/icons/demo.html +416 -0
  13. package/src/icons/fonts/acorex-icon.svg +37 -0
  14. package/src/icons/fonts/acorex-icon.ttf +0 -0
  15. package/src/icons/fonts/acorex-icon.woff +0 -0
  16. package/src/icons/selection.json +1 -0
  17. package/src/icons/style.css +107 -0
  18. package/src/icons/style.scss +164 -0
  19. package/src/icons/variables.scss +31 -0
package/index.scss CHANGED
@@ -1,2 +1,3 @@
1
1
  @import "./src/base/index.scss";
2
- @import "./src/components/index.scss";
2
+ @import "./src/components/index.scss";
3
+ @import "./src/icons/style.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.6",
3
+ "version": "5.0.7",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -1,7 +1,11 @@
1
1
  @import "./colors";
2
+ [class*=" ax-ic-"],
3
+ [class^=ax-ic-] {
4
+ vertical-align: middle;
5
+ }
2
6
 
3
7
  :root {
4
8
  --ax-base-size: 8px;
5
9
  --ax-base-ratio: 5;
6
10
  @include colors();
7
- }
11
+ }
package/src/components/_badge.scss CHANGED
@@ -1,39 +1,11 @@
1
1
  @layer components {
2
2
  .ax-badge {
3
- @apply ax-flex ax-items-center ax-justify-center ax-max-w-max ax-py-1 ax-px-2 ax-rounded ax-cursor-pointer ax-text-sm ax-whitespace-nowrap;
4
- .ax-ic {
5
- @apply ax-text-sm ax-ms-1;
3
+ @apply ax-rounded ax-py-1 ax-px-2 ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm;
4
+ ax-prefix {
5
+ @apply ax-me-1.5
6
6
  }
7
- &.ax-badge-rounded-full {
8
- @apply ax-rounded-full;
9
- }
10
- &.ax-primary {
11
- @apply ax-bg-primary-100 ax-text-primary;
12
- }
13
- &.ax-secondary {
14
- @apply ax-bg-secondary-100 ax-text-secondary;
15
- }
16
- &.ax-warning {
17
- @apply ax-bg-warning-100 ax-text-warning;
18
- }
19
- &.ax-danger {
20
- @apply ax-bg-danger-100 ax-text-danger;
21
- }
22
- &.ax-success {
23
- @apply ax-bg-success-100 ax-text-success;
24
- }
25
- &.ax-info {
26
- @apply ax-bg-info-100 ax-text-info;
27
- }
28
- &.ax-light {
29
- @apply ax-bg-light-100 ax-text-light-fore;
30
- }
31
- &.ax-dark {
32
- @apply ax-bg-dark-100 ax-text-dark;
33
- }
34
- &.ax-sm {
35
- }
36
- &.ax-lg {
7
+ ax-suffix {
8
+ @apply ax-ms-1.5
37
9
  }
38
10
  }
39
- }
11
+ }
package/src/components/_button.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  ax-button {
4
4
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
5
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600;
6
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap;
7
7
  @include respond(mobile) {
8
8
  @apply ax-text-base;
9
9
  }
@@ -13,6 +13,9 @@
13
13
  ax-suffix {
14
14
  @apply ax-flex ax-flex-row ax-ps-2;
15
15
  }
16
+ .ax-badge {
17
+ @apply ax-text-xs;
18
+ }
16
19
  &:focus {
17
20
  @apply ax-outline-none ax-z-10;
18
21
  }
@@ -31,16 +34,16 @@
31
34
  }
32
35
  }
33
36
  &.ax-sm {
34
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
35
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - 10px) !important;
37
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
38
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
36
39
  @apply ax-text-sm;
37
40
  .ax-ic {
38
41
  @apply ax-text-sm;
39
42
  }
40
43
  }
41
44
  &.ax-lg {
42
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
43
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 10px) !important;
45
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
46
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
44
47
  @apply ax-text-lg;
45
48
  &.ax-button-icon {
46
49
  @apply ax-px-3;
package/src/components/_calendar.scss CHANGED
@@ -1,86 +1,130 @@
1
1
  @import "../variables/mixins";
2
+
2
3
  @layer components {
3
- .ax-calendar {
4
- @apply ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white;
4
+ ax-calendar {
5
+ @apply ax-block ax-border ax-border-solid ax-border-default ax-rounded ax-bg-white ax-select-none;
6
+
7
+ &.ax-state-disabled
8
+ {
9
+ .ax-calendar-slots
10
+ {
11
+ @apply ax-opacity-50 ax-cursor-default;
12
+ }
13
+ }
14
+
5
15
  .ax-calendar-header {
6
16
  @apply ax-grid ax-grid-cols-12 ax-py-1 ax-px-2 ax-border-b ax-border-default ax-border-solid;
17
+
7
18
  .ax-nav-button {
8
19
  @apply ax-col-span-8 ax-justify-start;
9
20
  }
21
+
10
22
  .ax-prev-button,
11
23
  .ax-next-button {
12
24
  @apply ax-col-span-2 ax-justify-center ax-ms-1;
13
25
  }
14
26
  }
27
+
15
28
  .ax-calendar-body {
16
29
  @apply ax-m-2;
17
- .ax-month-items,
18
- .ax-day-items {
19
- @apply ax-grid ax-grid-cols-7;
20
- }
21
- .ax-month-items {
22
- .ax-month-item {
23
- @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
24
- }
25
- }
26
- .ax-day-items {
27
- .ax-day-item {
30
+
31
+ .ax-calendar-slots {
32
+ @apply ax-grid;
33
+
34
+ &>div {
28
35
  @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-pointer ax-m-0.5 ax-rounded;
36
+
29
37
  &::before {
30
38
  content: '';
31
39
  padding-top: 100%;
32
40
  float: left;
33
41
  }
42
+
34
43
  &::after {
35
44
  content: '';
36
45
  display: block;
37
46
  clear: both;
38
47
  }
48
+
39
49
  &:hover {
40
50
  @apply ax-bg-light-100;
41
51
  }
52
+
53
+ &.ax-state-disabled {
54
+ @apply ax-text-gray-300 ax-cursor-default;
55
+ &:hover {
56
+ @apply ax-bg-transparent ax-text-gray-300;
57
+ }
58
+ // &::after {
59
+ // @apply ax-text-sm ax-cursor-not-allowed ax-text-danger-600;
60
+ // position: absolute;
61
+ // content: "\03a7";
62
+ // margin: auto;
63
+ // }
64
+ }
65
+
42
66
  &.ax-state-holiday {
43
67
  @apply ax-text-danger;
44
68
  &:hover {
45
69
  @apply ax-text-black;
46
70
  }
47
71
  }
72
+
48
73
  &.ax-state-today {
49
- @apply ax-bg-success ax-text-success-fore;
74
+ @apply ax-bg-opacity-50 ax-bg-primary-50 ax-text-primary;
75
+ &:hover {
76
+ @apply ax-text-primary;
77
+ }
78
+ }
79
+
80
+ &.ax-state-other {
81
+ @apply ax-opacity-50;
50
82
  }
83
+
51
84
  &.ax-state-selected {
52
- @apply ax-bg-primary ax-text-primary-fore;
85
+ @apply ax-bg-primary ax-text-primary-fore ax-opacity-100;
86
+
87
+ &:hover {
88
+ @apply ax-text-primary-fore;
89
+ }
53
90
  }
91
+
54
92
  &.ax-state-event {
55
93
  &::after {
56
94
  @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
57
95
  content: ''
58
96
  }
97
+
59
98
  &.ax-state-event-primary {
60
99
  &::after {
61
100
  @apply ax-bg-primary;
62
101
  }
63
102
  }
103
+
64
104
  &.ax-state-event-secondary {
65
105
  &::after {
66
106
  @apply ax-bg-secondary;
67
107
  }
68
108
  }
109
+
69
110
  &.ax-state-event-success {
70
111
  &::after {
71
112
  @apply ax-bg-success;
72
113
  }
73
114
  }
115
+
74
116
  &.ax-state-event-warning {
75
117
  &::after {
76
118
  @apply ax-bg-warning;
77
119
  }
78
120
  }
121
+
79
122
  &.ax-state-event-danger {
80
123
  &::after {
81
124
  @apply ax-bg-danger;
82
125
  }
83
126
  }
127
+
84
128
  &.ax-state-event-info {
85
129
  &::after {
86
130
  @apply ax-bg-info;
@@ -88,10 +132,28 @@
88
132
  }
89
133
  }
90
134
  }
135
+
136
+ &.ax-calendar-slots-day {
137
+ @apply ax-grid-cols-7;
138
+ }
139
+
140
+ &.ax-calendar-slots-year,
141
+ &.ax-calendar-slots-month {
142
+ @apply ax-grid-cols-4;
143
+ }
144
+ }
145
+
146
+ .ax-calendar-week {
147
+ @apply ax-grid ax-grid-cols-7 ax-my-2;
148
+
149
+ &>div {
150
+ @apply ax-text-sm ax-text-black ax-text-center ax-relative ax-flex ax-items-center ax-justify-center ax-cursor-text ax-m-0.5;
151
+ }
91
152
  }
92
153
  }
154
+
93
155
  .ax-calendar-footer {
94
- @apply ax-p-2 ax-bg-light-100;
156
+ @apply ax-flex ax-justify-center ax-p-2 ax-bg-light-100;
95
157
  }
96
158
  }
97
159
  }
package/src/components/_editor-container.scss CHANGED
@@ -26,16 +26,17 @@
26
26
  }
27
27
  }
28
28
  ax-button {
29
- @apply ax-rounded-none;
30
- &:focus {
31
- @apply ax-ring-0;
32
- }
33
- &.ax-button-icon {
34
- min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
35
- .ax-ic {
36
- @apply ax-text-base;
37
- }
29
+ height: 100% !important;
30
+ @apply ax-rounded-none;
31
+ &:focus {
32
+ @apply ax-ring-0;
33
+ }
34
+ &.ax-button-icon {
35
+ min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
36
+ .ax-ic {
37
+ @apply ax-text-base;
38
38
  }
39
+ }
39
40
  }
40
41
  .ax-suffix,
41
42
  .ax-prefix {
@@ -61,13 +62,13 @@
61
62
  }
62
63
  }
63
64
  &.ax-sm {
64
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
65
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
65
66
  .ax-input {
66
67
  @apply ax-text-xs;
67
68
  }
68
69
  }
69
70
  &.ax-lg {
70
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
71
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
71
72
  .ax-input {
72
73
  @apply ax-text-lg;
73
74
  }
package/src/components/_tabs.scss CHANGED
@@ -1,179 +1,209 @@
1
1
  @layer components {
2
- .ax-tabs {
3
- @apply ax-flex ax-p-0 ax-overflow-hidden;
4
- &.ax-tabs-full {
5
- .ax-tab-item-container,
6
- .ax-tab-item {
7
- @apply ax-flex-1;
8
- }
9
- }
10
- &.ax-tabs-min-width {
11
- .ax-tab-item {
12
- min-width: 250px;
13
- }
14
- }
15
- &>.ax-tab-controll {
16
- @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
17
- box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
18
- }
19
- .ax-tab-item-container {
20
- @apply ax-flex ax-overflow-x-auto;
21
- .ax-tab-item {
2
+ ax-tabs {
3
+ @apply ax-p-0 ax-overflow-y-hidden ax-overflow-x-auto ax-w-max ax-block;
4
+
5
+ .ax-items-wrapper {
6
+ @apply ax-flex;
7
+ ax-tab-item {
22
8
  @apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-font-medium ax-flex ax-items-center ax-justify-center;
23
9
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
24
10
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
11
+
25
12
  &.ax-state-disabled {
26
13
  background-color: rgb(var(--ax-color-disabled)) !important;
27
14
  color: rgb(var(--ax-color-disabled-fore)) !important;
28
15
  cursor: not-allowed !important;
29
16
  }
17
+
30
18
  &.ax-state-active {
31
19
  @apply ax-text-black;
32
20
  }
33
- .ax-ic {
34
- @apply ax-text-2xl;
35
- }
36
21
  }
37
22
  }
23
+
24
+ &.ax-tabs-fit {
25
+ .ax-items-wrapper
26
+ ax-tab-item {
27
+ @apply ax-flex-1;
28
+ }
29
+ }
30
+
31
+ &>.ax-tab-controll {
32
+ @apply ax-flex ax-items-center ax-justify-center ax-px-1 ax-cursor-pointer;
33
+ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
34
+ }
35
+
38
36
  &.ax-tabs-vertical {
39
- .ax-tab-item-container {
37
+ .ax-items-wrapper {
40
38
  @apply ax-flex-col
41
39
  }
40
+
42
41
  &.ax-tabs-default {
43
- .ax-tab-item-container {
44
- @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
45
- .ax-tab-item {
46
- @apply ax-bg-white ax-border-r ax-border-s-2 ax-border-solid ax-border-transparent;
47
- &:hover,
48
- &.ax-state-active {
49
- @apply ax-font-medium;
50
- border-inline-start-color: rgb(var(--ax-color-primary)) !important;
51
- }
42
+ @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
43
+
44
+ ax-tab-item {
45
+ @apply ax-bg-white ax-border-r ax-border-s-2 ax-border-solid ax-border-transparent;
46
+
47
+ &:hover,
48
+ &.ax-state-active {
49
+ @apply ax-font-medium;
50
+ border-inline-start-color: rgb(var(--ax-color-primary)) !important;
52
51
  }
53
52
  }
54
53
  }
55
- &.ax-tabs-underline {
56
- .ax-tab-item {
54
+
55
+ &.ax-tabs-start-line {
56
+ ax-tab-item {
57
57
  @apply ax-border-s-2 ax-border-solid ax-border-default;
58
+
59
+ &.ax-state-active {
60
+ @apply ax-border-primary ax-text-primary;
61
+
62
+ &:hover {
63
+ @apply ax-border-primary;
64
+ }
65
+ }
66
+
67
+ &:hover {
68
+ @apply ax-border-primary-300 ax-text-primary;
69
+ }
70
+ }
71
+ }
72
+
73
+ &.ax-tabs-end-line {
74
+ ax-tab-item {
75
+ @apply ax-border-e-2 ax-border-solid ax-border-default;
76
+
58
77
  &.ax-state-active {
59
78
  @apply ax-border-primary ax-text-primary;
79
+
60
80
  &:hover {
61
81
  @apply ax-border-primary;
62
82
  }
63
83
  }
84
+
64
85
  &:hover {
65
86
  @apply ax-border-primary-300 ax-text-primary;
66
87
  }
67
88
  }
68
89
  }
90
+
69
91
  &.ax-tabs-pills {
70
- .ax-tab-item {
92
+ ax-tab-item {
71
93
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
94
+
72
95
  &:hover {
73
96
  @apply ax-bg-light-300 ax-text-light-fore;
74
97
  }
98
+
75
99
  &.ax-state-active {
76
100
  @apply ax-bg-light-300 ax-text-light-fore;
77
101
  }
78
102
  }
79
103
  }
104
+
80
105
  &.ax-tabs-pills-color {
81
- .ax-tab-item {
106
+ ax-tab-item {
82
107
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
108
+
83
109
  &:hover {
84
110
  @apply ax-bg-primary-100 ax-text-primary;
85
111
  }
112
+
86
113
  &.ax-state-active {
87
114
  @apply ax-bg-primary-100 ax-text-primary;
88
115
  }
89
116
  }
90
117
  }
91
- &.ax-tabs-overline {
92
- .ax-tab-item {
118
+ }
119
+
120
+ &.ax-tabs-horizontal {
121
+ &.ax-tabs-default {
122
+ @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
123
+
124
+ ax-tab-item {
125
+ @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid;
126
+ border-bottom-color: transparent !important;
127
+
128
+ &:first-child {
129
+ @apply ax-rounded-l;
130
+ }
131
+
132
+ &:last-child {
133
+ @apply ax-rounded-r ax-border-r-0;
134
+ }
135
+
136
+ &:hover,
137
+ &.ax-state-active {
138
+ @apply ax-font-medium;
139
+ border-bottom-color: rgb(var(--ax-color-primary)) !important;
140
+ }
141
+ }
142
+ }
143
+
144
+ &.ax-tabs-start-line {
145
+ ax-tab-item {
93
146
  @apply ax-border-t-2 ax-border-solid ax-border-default;
147
+
94
148
  &.ax-state-active {
95
149
  @apply ax-border-primary ax-text-primary;
150
+
96
151
  &:hover {
97
152
  @apply ax-border-primary;
98
153
  }
99
154
  }
155
+
100
156
  &:hover {
101
157
  @apply ax-border-primary-300 ax-text-primary;
102
158
  }
103
159
  }
104
160
  }
105
- }
106
- &.ax-tabs-horizontal {
107
- &.ax-tabs-default {
108
- .ax-tab-item-container {
109
- @apply ax-border ax-border-solid ax-border-default ax-shadow-sm ax-rounded;
110
- .ax-tab-item {
111
- @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid;
112
- border-bottom-color: transparent !important;
113
- &:first-child {
114
- @apply ax-rounded-l;
115
- }
116
- &:last-child {
117
- @apply ax-rounded-r ax-border-r-0;
118
- }
119
- &:hover,
120
- &.ax-state-active {
121
- @apply ax-font-medium;
122
- border-bottom-color: rgb(var(--ax-color-primary)) !important;
123
- }
124
- }
125
- }
126
- }
127
- &.ax-tabs-underline {
128
- .ax-tab-item {
161
+
162
+ &.ax-tabs-end-line {
163
+ ax-tab-item {
129
164
  @apply ax-border-b-2 ax-border-solid ax-border-default;
165
+
130
166
  &.ax-state-active {
131
167
  @apply ax-border-primary ax-text-primary;
168
+
132
169
  &:hover {
133
170
  @apply ax-border-primary;
134
171
  }
135
172
  }
173
+
136
174
  &:hover {
137
175
  @apply ax-border-primary-300 ax-text-primary;
138
176
  }
139
177
  }
140
178
  }
179
+
141
180
  &.ax-tabs-pills {
142
- .ax-tab-item {
181
+ ax-tab-item {
143
182
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
183
+
144
184
  &:hover {
145
185
  @apply ax-bg-light-300 ax-text-light-fore;
146
186
  }
187
+
147
188
  &.ax-state-active {
148
189
  @apply ax-bg-light-300 ax-text-light-fore;
149
190
  }
150
191
  }
151
192
  }
193
+
152
194
  &.ax-tabs-pills-color {
153
- .ax-tab-item {
195
+ ax-tab-item {
154
196
  @apply ax-text-light-fore ax-mr-1 ax-rounded;
197
+
155
198
  &:hover {
156
199
  @apply ax-bg-primary-100 ax-text-primary;
157
200
  }
201
+
158
202
  &.ax-state-active {
159
203
  @apply ax-bg-primary-100 ax-text-primary;
160
204
  }
161
205
  }
162
206
  }
163
- &.ax-tabs-overline {
164
- .ax-tab-item {
165
- @apply ax-border-t-2 ax-border-solid ax-border-default;
166
- &.ax-state-active {
167
- @apply ax-border-primary ax-text-primary;
168
- &:hover {
169
- @apply ax-border-primary;
170
- }
171
- }
172
- &:hover {
173
- @apply ax-border-primary-300 ax-text-primary;
174
- }
175
- }
176
- }
177
207
  }
178
208
  }
179
209
  }
package/src/icons/Read Me.txt ADDED
@@ -0,0 +1,7 @@
1
+ Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2
+
3
+ To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
4
+
5
+ You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
6
+
7
+ You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.