@nice2dev/icons 1.3.2 → 1.3.3
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.
- package/CHANGELOG.md +83 -0
- package/dist/cjs/createIcon.js +0 -1
- package/dist/cjs/iconParts.js +33 -1
- package/dist/cjs/icons/actions.js +74 -61
- package/dist/cjs/icons/business.js +63 -27
- package/dist/cjs/icons/education.js +31 -11
- package/dist/cjs/icons/files.js +55 -17
- package/dist/cjs/icons/media.js +51 -20
- package/dist/cjs/icons/navigation.js +24 -7
- package/dist/cjs/icons/omniverk.js +2 -1
- package/dist/cjs/icons/realestate.js +45 -10
- package/dist/cjs/icons/science.js +10 -6
- package/dist/cjs/icons/shapes.js +30 -8
- package/dist/cjs/icons/social.js +3 -9
- package/dist/cjs/icons/travel.js +20 -4
- package/dist/cjs/icons/ui.js +41 -35
- package/dist/cjs/icons/weather.js +5 -4
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/createIcon.js +0 -1
- package/dist/esm/iconParts.js +33 -3
- package/dist/esm/icons/actions.js +76 -63
- package/dist/esm/icons/business.js +64 -28
- package/dist/esm/icons/education.js +31 -11
- package/dist/esm/icons/files.js +55 -17
- package/dist/esm/icons/media.js +51 -20
- package/dist/esm/icons/navigation.js +24 -7
- package/dist/esm/icons/omniverk.js +2 -1
- package/dist/esm/icons/realestate.js +45 -10
- package/dist/esm/icons/science.js +10 -6
- package/dist/esm/icons/shapes.js +30 -8
- package/dist/esm/icons/social.js +3 -9
- package/dist/esm/icons/travel.js +20 -4
- package/dist/esm/icons/ui.js +42 -36
- package/dist/esm/icons/weather.js +5 -4
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/iconParts.d.ts +13 -1
- package/dist/types/types.d.ts +4 -0
- package/package.json +2 -2
|
@@ -14,13 +14,26 @@ const NtdHouse = /* @__PURE__ */ createIcon({
|
|
|
14
14
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2L3 10v10a2 2 0 002 2h14a2 2 0 002-2V10L12 2z", fill: primaryColor }), jsx("path", { d: "M12 2L3 10v10a2 2 0 002 2h14a2 2 0 002-2V10L12 2z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M9 22V14h6v8", stroke: "white", strokeWidth: "1.5", fill: "white", opacity: "0.3" })] })),
|
|
15
15
|
},
|
|
16
16
|
});
|
|
17
|
+
// NtdApartment: filled, the windows and the door are drawn as in the outline — frames — in the
|
|
18
|
+
// accent colour (they were 50% white patches), the door kept inside the building. Duotone is fills
|
|
19
|
+
// only: the building primary, the windows and the door secondary; vivid puts the door in the
|
|
20
|
+
// accent colour.
|
|
21
|
+
const APARTMENT = { x: 4, y: 4, width: 16, height: 18, rx: 2 };
|
|
22
|
+
const APARTMENT_WINDOWS = [
|
|
23
|
+
{ x: 7, y: 7 },
|
|
24
|
+
{ x: 14, y: 7 },
|
|
25
|
+
{ x: 7, y: 13 },
|
|
26
|
+
{ x: 14, y: 13 },
|
|
27
|
+
];
|
|
28
|
+
const APARTMENT_DOOR = { x: 10, y: 18, width: 4, height: 4 };
|
|
17
29
|
const NtdApartment = /* @__PURE__ */ createIcon({
|
|
18
30
|
displayName: 'NtdApartment',
|
|
19
31
|
paths: {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
32
|
+
// the windows and the door filled in the accent colour, no frames (round 33)
|
|
33
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [APARTMENT_WINDOWS.map((w) => (jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), within(uid, 'door', jsx("rect", { ...APARTMENT }), jsx("rect", { ...APARTMENT_DOOR }))] })] })),
|
|
34
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", children: [jsx("rect", { ...APARTMENT }), APARTMENT_WINDOWS.map((w) => (jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsx("rect", { ...APARTMENT_DOOR })] })),
|
|
35
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxs("g", { fill: secondaryColor, children: [APARTMENT_WINDOWS.map((w) => (jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsx("rect", { ...APARTMENT_DOOR })] })] })),
|
|
36
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { ...APARTMENT, fill: primaryColor }), jsx("g", { fill: secondaryColor, children: APARTMENT_WINDOWS.map((w) => (jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))) }), jsx("rect", { ...APARTMENT_DOOR, fill: accentColor, opacity: accentOpacity })] })),
|
|
24
37
|
},
|
|
25
38
|
});
|
|
26
39
|
const NtdCondo = /* @__PURE__ */ createIcon({
|
|
@@ -112,16 +125,38 @@ const NtdBathroom = /* @__PURE__ */ createIcon({
|
|
|
112
125
|
});
|
|
113
126
|
// NtdGarage: the door is drawn as in the outline — frame and two slats — in the accent colour on
|
|
114
127
|
// the filled building (it was a 30% white patch with white lines), kept inside the building. The
|
|
115
|
-
// duotone is fills only: building primary, door secondary, its frame and slats primary.
|
|
128
|
+
// duotone is fills only: building primary, door secondary, its frame and slats primary. `sharp`
|
|
129
|
+
// has its own building, square at the bottom (the derived one kept the path's round corners).
|
|
116
130
|
const GARAGE = 'M12 2L2 8v12a2 2 0 002 2h16a2 2 0 002-2V8L12 2z';
|
|
117
|
-
const
|
|
131
|
+
const GARAGE_SHARP = 'M12 2L2 8v14h20V8L12 2z';
|
|
132
|
+
/**
|
|
133
|
+
* The door of the filled garage: no line closes it at the bottom, where the building ends, so the
|
|
134
|
+
* slats are spaced from the stroke for three panels of the same visible height (spaced evenly,
|
|
135
|
+
* the bottom panel showed taller).
|
|
136
|
+
*/
|
|
137
|
+
function garageDoor(strokeWidth) {
|
|
138
|
+
const panel = (10 - 2.5 * strokeWidth) / 3;
|
|
139
|
+
const first = 12 + strokeWidth + panel;
|
|
140
|
+
const second = first + strokeWidth + panel;
|
|
141
|
+
return `M5 22V12h14v10M5 ${first}h14M5 ${second}h14`;
|
|
142
|
+
}
|
|
143
|
+
/** The outline's door: closed at the bottom, so its slats sit at even thirds. */
|
|
144
|
+
const GARAGE_DOOR_CLOSED = 'M5 12h14v10H5zM5 15.33h14M5 18.67h14';
|
|
145
|
+
function garageFilled(building, { variant, primaryColor, accentColor, accentOpacity, strokeWidth, uid }) {
|
|
146
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: building, fill: primaryColor }), within(uid, 'door', jsx("path", { d: building }), jsx("path", {
|
|
147
|
+
// `wireframe` (thin lines, from this layer) draws the outline's door, whose slats it
|
|
148
|
+
// should match
|
|
149
|
+
d: variant === 'wireframe' ? GARAGE_DOOR_CLOSED : garageDoor(strokeWidth), stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] }));
|
|
150
|
+
}
|
|
118
151
|
const NtdGarage = /* @__PURE__ */ createIcon({
|
|
119
152
|
displayName: 'NtdGarage',
|
|
120
153
|
paths: {
|
|
121
|
-
solid: (
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
154
|
+
solid: (props) => garageFilled(GARAGE, props),
|
|
155
|
+
sharp: (props) => garageFilled(GARAGE_SHARP, props),
|
|
156
|
+
// the door is closed at the bottom here, so its slats sit at even thirds
|
|
157
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsx("rect", { x: "5", y: "12", width: "14", height: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 15.33h14M5 18.67h14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
158
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, fill: primaryColor }), jsx("rect", { x: "5", y: "12", width: "14", height: "10", fill: secondaryColor }), within(uid, 'door', jsx("path", { d: GARAGE }), jsx("path", { d: garageDoor(strokeWidth), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
159
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, fill: primaryColor }), within(uid, 'door', jsx("path", { d: GARAGE }), jsx("path", { d: garageDoor(strokeWidth), stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
125
160
|
},
|
|
126
161
|
});
|
|
127
162
|
const NtdPool = /* @__PURE__ */ createIcon({
|
|
@@ -62,15 +62,19 @@ const NtdDna = /* @__PURE__ */ createIcon({
|
|
|
62
62
|
CHEMISTRY
|
|
63
63
|
───────────────────────────────────────────────────────────────────────────── */
|
|
64
64
|
// The filled atom draws its orbits at 0.75 of the stroke width around a smaller nucleus: at 2 the
|
|
65
|
-
// three orbits and the nucleus ran together into one heavy blob in the middle. The nucleus is
|
|
66
|
-
//
|
|
65
|
+
// three orbits and the nucleus ran together into one heavy blob in the middle. The nucleus is
|
|
66
|
+
// primary when filled, secondary in duotone and vivid; vivid also gives the orbits a glow in the
|
|
67
|
+
// accent colour.
|
|
68
|
+
function atomOrbits(stroke, width, opacity) {
|
|
69
|
+
return (jsxs("g", { stroke: stroke, strokeWidth: width, opacity: opacity, fill: "none", children: [jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(-60 12 12)" })] }));
|
|
70
|
+
}
|
|
67
71
|
const NtdAtom = /* @__PURE__ */ createIcon({
|
|
68
72
|
displayName: 'NtdAtom',
|
|
69
73
|
paths: {
|
|
70
|
-
solid: ({ primaryColor,
|
|
71
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
72
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
73
|
-
vivid: ({ secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [
|
|
74
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: primaryColor }), atomOrbits(primaryColor, strokeWidth * 0.75)] })),
|
|
75
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), atomOrbits(primaryColor, strokeWidth)] })),
|
|
76
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [atomOrbits(primaryColor, strokeWidth * 0.75), jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: secondaryColor })] })),
|
|
77
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [atomOrbits(accentColor, strokeWidth * 1.75, accentOpacity), atomOrbits(primaryColor, strokeWidth * 0.75), jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: secondaryColor })] })),
|
|
74
78
|
},
|
|
75
79
|
});
|
|
76
80
|
const NtdMolecule = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/shapes.js
CHANGED
|
@@ -173,22 +173,44 @@ const NtdCornerDownRight = /* @__PURE__ */ createIcon({
|
|
|
173
173
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
174
174
|
},
|
|
175
175
|
});
|
|
176
|
+
// NtdMaximize / NtdMinimize: line glyphs, twice the stroke width in every variant but `outline`.
|
|
177
|
+
// A shaft that ran into its head's corner stuck out of it in `sharp` (its square cap passed the
|
|
178
|
+
// corner), so it stops 0.35 × the line width short of the corner on each axis — far enough for
|
|
179
|
+
// the cap to stay inside the head's arms, close enough to meet them.
|
|
180
|
+
/** The four strokes of the glyph: two corner heads and two shafts, `back` short of the corners. */
|
|
181
|
+
function maximizeLines(back) {
|
|
182
|
+
return `M15 3h6v6M9 21H3v-6M${21 - back} ${3 + back}L14 10M${3 + back} ${21 - back}L10 14`;
|
|
183
|
+
}
|
|
184
|
+
function minimizeLines(back) {
|
|
185
|
+
return `M4 14h6v6M20 10h-6V4M${10 - back} ${14 + back}L3 21M${14 + back} ${10 - back}L21 3`;
|
|
186
|
+
}
|
|
187
|
+
/** The two arrows of either glyph, each in one colour: [first head + shaft, second]. */
|
|
188
|
+
function splitLines(lines) {
|
|
189
|
+
const parts = lines.split('M').filter(Boolean);
|
|
190
|
+
return [`M${parts[0]}M${parts[2]}`, `M${parts[1]}M${parts[3]}`];
|
|
191
|
+
}
|
|
192
|
+
function cornerArrows(lines, first, second, strokeWidth) {
|
|
193
|
+
const width = strokeWidth * 2;
|
|
194
|
+
const [a, b] = splitLines(lines(width * 0.35));
|
|
195
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: a, stroke: first, strokeWidth: width, fill: "none" }), jsx("path", { d: b, stroke: second, strokeWidth: width, fill: "none" })] }));
|
|
196
|
+
}
|
|
176
197
|
const NtdMaximize = /* @__PURE__ */ createIcon({
|
|
177
198
|
displayName: 'NtdMaximize',
|
|
178
199
|
paths: {
|
|
179
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
180
|
-
outline: ({ primaryColor, strokeWidth }) => (
|
|
181
|
-
|
|
182
|
-
|
|
200
|
+
solid: ({ primaryColor, strokeWidth }) => cornerArrows(maximizeLines, primaryColor, primaryColor, strokeWidth),
|
|
201
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: maximizeLines(0), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
202
|
+
// one arrow per colour
|
|
203
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(maximizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
204
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(maximizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
183
205
|
},
|
|
184
206
|
});
|
|
185
207
|
const NtdMinimize = /* @__PURE__ */ createIcon({
|
|
186
208
|
displayName: 'NtdMinimize',
|
|
187
209
|
paths: {
|
|
188
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
189
|
-
outline: ({ primaryColor, strokeWidth }) => (
|
|
190
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
191
|
-
vivid: ({ primaryColor, secondaryColor
|
|
210
|
+
solid: ({ primaryColor, strokeWidth }) => cornerArrows(minimizeLines, primaryColor, primaryColor, strokeWidth),
|
|
211
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: minimizeLines(0), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
212
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(minimizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
213
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(minimizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
192
214
|
},
|
|
193
215
|
});
|
|
194
216
|
// NtdMove: the line variants stop the cross 2 short of each arrowhead's point — with the square
|
package/dist/esm/icons/social.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { bellIcon } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
const NtdAtSign = /* @__PURE__ */ createIcon({
|
|
5
6
|
displayName: 'NtdAtSign',
|
|
@@ -46,15 +47,8 @@ const NtdThumbsDown = /* @__PURE__ */ createIcon({
|
|
|
46
47
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z", fill: primaryColor }), jsx("path", { d: "M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z", fill: "white", opacity: "0.08" }), jsx("rect", { x: "17", y: "2", width: "4", height: "11", rx: "1", fill: secondaryColor })] })),
|
|
47
48
|
},
|
|
48
49
|
});
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
paths: {
|
|
52
|
-
solid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: primaryColor }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 4l1.5 1.5", stroke: secondaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 4l-1.5 1.5", stroke: secondaryColor, strokeWidth: strokeWidth })] })),
|
|
53
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 4l1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 4l-1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
54
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 4l1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: "M22 4l-1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
55
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: primaryColor }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: "white", opacity: "0.1" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("path", { d: "M2 4l1.5 1.5", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("path", { d: "M22 4l-1.5 1.5", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
56
|
-
},
|
|
57
|
-
});
|
|
50
|
+
// NtdBell's bell (iconParts' bellIcon) with ring marks
|
|
51
|
+
const NtdBellRing = /* @__PURE__ */ bellIcon('NtdBellRing', true);
|
|
58
52
|
const NtdMegaphone = /* @__PURE__ */ createIcon({
|
|
59
53
|
displayName: 'NtdMegaphone',
|
|
60
54
|
paths: {
|
package/dist/esm/icons/travel.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { within } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
5
6
|
TRANSPORTATION
|
|
@@ -40,13 +41,28 @@ const NtdCar = /* @__PURE__ */ createIcon({
|
|
|
40
41
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 11l2-5h10l2 5M3 14v4a1 1 0 001 1h2a1 1 0 001-1v-1h10v1a1 1 0 001 1h2a1 1 0 001-1v-4a2 2 0 00-2-2H5a2 2 0 00-2 2z", fill: primaryColor }), jsx("path", { d: "M5 11l2-5h10l2 5M3 14v4a1 1 0 001 1h2a1 1 0 001-1v-1h10v1a1 1 0 001 1h2a1 1 0 001-1v-4a2 2 0 00-2-2H5a2 2 0 00-2 2z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "7", cy: "15", r: "1.5", fill: "white", opacity: "0.5" }), jsx("circle", { cx: "17", cy: "15", r: "1.5", fill: "white", opacity: "0.5" })] })),
|
|
41
42
|
},
|
|
42
43
|
});
|
|
44
|
+
// NtdBus: a side view — the body with one long window, a passenger (NtdUser's head and shoulders)
|
|
45
|
+
// in it on the left, a stripe below, and wheels set in arches. Filled, the window, the stripe, the
|
|
46
|
+
// arches and the hubs are in the accent colour (fixed 50% white before) and the passenger primary.
|
|
47
|
+
const BUS_BODY = { x: 2, y: 4, width: 20, height: 13, rx: 2.5 };
|
|
48
|
+
const BUS_WINDOW = { x: 4, y: 6.5, width: 16, height: 4.5, rx: 1 };
|
|
49
|
+
/** The passenger, cut off by the window's bottom edge. */
|
|
50
|
+
const BUS_PASSENGER = 'M7 7.4a1.25 1.25 0 110 2.5 1.25 1.25 0 110-2.5zM4.9 11.6v-.3a1.9 1.9 0 011.9-1.9h.4a1.9 1.9 0 011.9 1.9v.3z';
|
|
51
|
+
const BUS_STRIPE = 'M2 13.5h20';
|
|
52
|
+
const BUS_WHEELS = 'M7 14.5a2.5 2.5 0 110 5 2.5 2.5 0 110-5zM17 14.5a2.5 2.5 0 110 5 2.5 2.5 0 110-5z';
|
|
53
|
+
const BUS_ARCHES = 'M7 13.7a3.3 3.3 0 110 6.6 3.3 3.3 0 110-6.6zM17 13.7a3.3 3.3 0 110 6.6 3.3 3.3 0 110-6.6z';
|
|
54
|
+
const BUS_HUBS = 'M7 16.1a.9.9 0 110 1.8.9.9 0 110-1.8zM17 16.1a.9.9 0 110 1.8.9.9 0 110-1.8z';
|
|
55
|
+
function busFilled({ primaryColor, uid }, glass, details, detailOpacity) {
|
|
56
|
+
return (jsxs(Fragment, { children: [jsx("rect", { ...BUS_BODY, fill: primaryColor }), within(uid, 'body', jsx("rect", { ...BUS_BODY }), jsxs("g", { opacity: detailOpacity, children: [jsx("path", { d: BUS_ARCHES, fill: details }), jsx("path", { d: BUS_STRIPE, stroke: details, strokeWidth: "1.2" })] })), jsx("rect", { ...BUS_WINDOW, fill: glass }), within(uid, 'window', jsx("rect", { ...BUS_WINDOW }), jsx("path", { d: BUS_PASSENGER, fill: primaryColor })), jsx("path", { d: BUS_WHEELS, fill: primaryColor }), jsx("path", { d: BUS_HUBS, fill: details, opacity: detailOpacity })] }));
|
|
57
|
+
}
|
|
43
58
|
const NtdBus = /* @__PURE__ */ createIcon({
|
|
44
59
|
displayName: 'NtdBus',
|
|
45
60
|
paths: {
|
|
46
|
-
solid: (
|
|
47
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", {
|
|
48
|
-
|
|
49
|
-
|
|
61
|
+
solid: (props) => busFilled(props, props.accentColor, props.accentColor, props.accentOpacity),
|
|
62
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BUS_PASSENGER, fill: primaryColor }), jsx("path", { d: "M4 13.5h16", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: BUS_WHEELS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
63
|
+
// fills only: the body and the passenger primary, the window and the details secondary
|
|
64
|
+
duotone: (props) => busFilled(props, props.secondaryColor, props.secondaryColor, 1),
|
|
65
|
+
vivid: (props) => busFilled(props, props.secondaryColor, props.accentColor, props.accentOpacity),
|
|
50
66
|
},
|
|
51
67
|
});
|
|
52
68
|
const NtdShip = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/ui.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
-
import { within } from '../iconParts.js';
|
|
3
|
+
import { bellIcon, within } from '../iconParts.js';
|
|
4
4
|
|
|
5
5
|
// NtdHome: walls 9 high under a 7.5 roof (they were 10.5 and read as a tower). The corners are
|
|
6
6
|
// square in every variant: the outline strokes join with miters, since the default round joins
|
|
@@ -27,21 +27,24 @@ const NtdUser = /* @__PURE__ */ createIcon({
|
|
|
27
27
|
paths: {
|
|
28
28
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: primaryColor })] })),
|
|
29
29
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
// fills only, like vivid: the head primary, the shoulders secondary
|
|
31
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: secondaryColor })] })),
|
|
32
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: secondaryColor })] })),
|
|
32
33
|
},
|
|
33
34
|
});
|
|
34
|
-
// NtdAdmin: NtdUser in a tie — the same head and shoulders, a knot at the collar and a blade
|
|
35
|
-
// the chest
|
|
35
|
+
// NtdAdmin: NtdUser in a tie — the same head and shoulders, a knot at the collar and a blade that
|
|
36
|
+
// runs down the chest to the bottom edge, cut off there (a whole short tie with its tip read
|
|
37
|
+
// comic).
|
|
36
38
|
const ADMIN_BODY = 'M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2';
|
|
37
|
-
const ADMIN_TIE = 'M10.
|
|
39
|
+
const ADMIN_TIE = 'M10.7 15.3h2.6l-.65 1.8 1.05 4.8h-3.4l1.05-4.8z';
|
|
38
40
|
const NtdAdmin = /* @__PURE__ */ createIcon({
|
|
39
41
|
displayName: 'NtdAdmin',
|
|
40
42
|
paths: {
|
|
41
43
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, fill: primaryColor }), jsx("path", { d: ADMIN_TIE, fill: accentColor, opacity: accentOpacity })] })),
|
|
42
44
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: ADMIN_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
// as NtdUser: fills only, the head (and the tie) primary, the shoulders secondary
|
|
46
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, fill: secondaryColor }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
|
|
47
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, fill: secondaryColor }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
|
|
45
48
|
},
|
|
46
49
|
});
|
|
47
50
|
const NtdUsers = /* @__PURE__ */ createIcon({
|
|
@@ -53,13 +56,16 @@ const NtdUsers = /* @__PURE__ */ createIcon({
|
|
|
53
56
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "9", cy: "7", r: "4", fill: primaryColor }), jsx("circle", { cx: "9", cy: "7", r: "4", fill: "white", opacity: "0.08" }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", fill: secondaryColor }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: "white", strokeWidth: "1", fill: "none" })] })),
|
|
54
57
|
},
|
|
55
58
|
});
|
|
59
|
+
// NtdHeart: duotone fills the heart primary inside a secondary outline (the other way round
|
|
60
|
+
// before); vivid splits it down the middle — primary left, secondary right — with an accent seam.
|
|
61
|
+
const HEART = 'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z';
|
|
56
62
|
const NtdHeart = /* @__PURE__ */ createIcon({
|
|
57
63
|
displayName: 'NtdHeart',
|
|
58
64
|
paths: {
|
|
59
65
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor })),
|
|
60
66
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
61
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
62
|
-
vivid: ({ primaryColor, secondaryColor
|
|
67
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsx("path", { d: HEART, fill: primaryColor, stroke: secondaryColor, strokeWidth: strokeWidth })),
|
|
68
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: HEART, fill: secondaryColor }), within(uid, 'left', jsx("rect", { x: "0", y: "0", width: "12", height: "24" }), jsx("path", { d: HEART, fill: primaryColor })), within(uid, 'seam', jsx("path", { d: HEART }), jsx("path", { d: "M12 2v21", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }))] })),
|
|
63
69
|
},
|
|
64
70
|
});
|
|
65
71
|
const NtdStar = /* @__PURE__ */ createIcon({
|
|
@@ -71,24 +77,18 @@ const NtdStar = /* @__PURE__ */ createIcon({
|
|
|
71
77
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: primaryColor }), jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: "white", opacity: "0.1" })] })),
|
|
72
78
|
},
|
|
73
79
|
});
|
|
74
|
-
const NtdBell = /* @__PURE__ */
|
|
75
|
-
displayName: 'NtdBell',
|
|
76
|
-
paths: {
|
|
77
|
-
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" })),
|
|
78
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
79
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
80
|
-
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: "white", opacity: "0.1" })] })),
|
|
81
|
-
},
|
|
82
|
-
});
|
|
80
|
+
const NtdBell = /* @__PURE__ */ bellIcon('NtdBell', false);
|
|
83
81
|
const NtdEye = /* @__PURE__ */ createIcon({
|
|
84
82
|
displayName: 'NtdEye',
|
|
85
83
|
paths: {
|
|
86
|
-
// the whole eye primary, the iris in the accent colour around a
|
|
87
|
-
//
|
|
88
|
-
|
|
84
|
+
// the whole eye primary, the iris a thin ring in the accent colour (r 4.5) around a large pupil
|
|
85
|
+
// (r 3.4) — primary here (the filled variants do not use secondary), secondary in duotone and
|
|
86
|
+
// vivid
|
|
87
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4.5", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "3.4", fill: primaryColor })] })),
|
|
89
88
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
90
|
-
|
|
91
|
-
|
|
89
|
+
// the eye primary, the ring in the accent colour, the pupil secondary
|
|
90
|
+
duotone: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4.5", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "3.4", fill: secondaryColor })] })),
|
|
91
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4.5", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "3.4", fill: secondaryColor })] })),
|
|
92
92
|
},
|
|
93
93
|
});
|
|
94
94
|
const NtdEyeOff = /* @__PURE__ */ createIcon({
|
|
@@ -157,18 +157,23 @@ const NtdClock = /* @__PURE__ */ createIcon({
|
|
|
157
157
|
},
|
|
158
158
|
});
|
|
159
159
|
// The binder rings are 1.6x the stroke wide; the header line is a cut across the page, kept
|
|
160
|
-
// inside it so it meets the sides flush (its round caps stuck out of both).
|
|
161
|
-
|
|
162
|
-
|
|
160
|
+
// inside it so it meets the sides flush (its round caps stuck out of both). Filled — solid and
|
|
161
|
+
// duotone alike — the header and the rings are secondary over a primary sheet, the line between
|
|
162
|
+
// them in the accent colour. The header is a plain band clipped to the page, so `sharp` and
|
|
163
|
+
// `rounded` (which re-shape the page's `<rect>`) square or round its top corners with the page's.
|
|
164
|
+
const CALENDAR_PAGE = { x: 3, y: 4, width: 18, height: 18, rx: 2 };
|
|
165
|
+
const CALENDAR_HEAD_BAND = 'M3 4h18v5.5H3z';
|
|
166
|
+
const CALENDAR_RINGS = 'M16 2v4M8 2v4';
|
|
167
|
+
function calendarFilled({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid, }) {
|
|
168
|
+
return (jsxs(Fragment, { children: [jsx("rect", { ...CALENDAR_PAGE, fill: primaryColor }), within(uid, 'header', jsx("rect", { ...CALENDAR_PAGE }), jsxs(Fragment, { children: [jsx("path", { d: CALENDAR_HEAD_BAND, fill: secondaryColor }), jsx("path", { d: "M3 9.5h18", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })), jsx("path", { d: CALENDAR_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth * 1.6 })] }));
|
|
169
|
+
}
|
|
163
170
|
const NtdCalendar = /* @__PURE__ */ createIcon({
|
|
164
171
|
displayName: 'NtdCalendar',
|
|
165
172
|
paths: {
|
|
166
|
-
solid:
|
|
167
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
duotone: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: CALENDAR_SHEET, fill: secondaryColor }), jsx("path", { d: CALENDAR_HEAD, fill: primaryColor }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), within(uid, 'header', jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }))] })),
|
|
171
|
-
vivid: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: secondaryColor, strokeWidth: "2.9" }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: secondaryColor, strokeWidth: "2.9" }), within(uid, 'header', jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: secondaryColor, strokeWidth: "1.5" }))] })),
|
|
173
|
+
solid: calendarFilled,
|
|
174
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CALENDAR_RINGS, stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("path", { d: "M3 9.5h18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
175
|
+
duotone: calendarFilled,
|
|
176
|
+
vivid: calendarFilled,
|
|
172
177
|
},
|
|
173
178
|
});
|
|
174
179
|
const NtdTag = /* @__PURE__ */ createIcon({
|
|
@@ -247,11 +252,12 @@ const NtdGlobe = /* @__PURE__ */ createIcon({
|
|
|
247
252
|
displayName: 'NtdGlobe',
|
|
248
253
|
paths: {
|
|
249
254
|
// a filled globe with its grid in the accent colour, kept inside the disc (it was the
|
|
250
|
-
// outline's rings, unfilled)
|
|
251
|
-
|
|
255
|
+
// outline's rings, unfilled). The grid is 1.5x the stroke in the filled variants, but stays
|
|
256
|
+
// at 0.75x in the cutout, which is drawn from this layer too.
|
|
257
|
+
solid: ({ variant, primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: accentColor, strokeWidth: strokeWidth * (variant === 'cutout' ? 0.75 : 1.5), opacity: accentOpacity, fill: "none" }))] })),
|
|
252
258
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
253
259
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
254
|
-
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: secondaryColor, strokeWidth: strokeWidth *
|
|
260
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: secondaryColor, strokeWidth: strokeWidth * 1.5, fill: "none" }))] })),
|
|
255
261
|
},
|
|
256
262
|
});
|
|
257
263
|
const NtdMap = /* @__PURE__ */ createIcon({
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { detailColor } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
const NtdSunrise = /* @__PURE__ */ createIcon({
|
|
5
6
|
displayName: 'NtdSunrise',
|
|
@@ -117,18 +118,18 @@ const NtdTree = /* @__PURE__ */ createIcon({
|
|
|
117
118
|
},
|
|
118
119
|
});
|
|
119
120
|
// NtdMountain: a snowcap that follows the slopes down to an edge with three uneven notches, like a
|
|
120
|
-
// price chart (it had two even ones). The snow is in the accent colour,
|
|
121
|
-
//
|
|
121
|
+
// price chart (it had two even ones). The snow is secondary — in the accent colour, which is the
|
|
122
|
+
// page colour by default, it did not show; the outline draws the snow line too.
|
|
122
123
|
const MOUNTAIN = 'M12 2L2 22h20L12 2z';
|
|
123
124
|
const MOUNTAIN_SNOW = 'M12 2L15 8L14 10.2L13.1 9.4L11.9 11L10.6 9.1L9.5 10.4L8.4 9.2Z';
|
|
124
125
|
const MOUNTAIN_SNOW_LINE = 'M8.4 9.2L9.5 10.4L10.6 9.1L11.9 11L13.1 9.4L14 10.2L15 8';
|
|
125
126
|
const NtdMountain = /* @__PURE__ */ createIcon({
|
|
126
127
|
displayName: 'NtdMountain',
|
|
127
128
|
paths: {
|
|
128
|
-
solid: (
|
|
129
|
+
solid: (props) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: props.primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: detailColor(props) })] })),
|
|
129
130
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MOUNTAIN_SNOW_LINE, stroke: primaryColor, strokeWidth: strokeWidth * 0.8, fill: "none" })] })),
|
|
130
131
|
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: secondaryColor })] })),
|
|
131
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d:
|
|
132
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: secondaryColor })] })),
|
|
132
133
|
},
|
|
133
134
|
});
|
|
134
135
|
const NtdWave = /* @__PURE__ */ createIcon({
|