@nice2dev/icons 1.3.1 → 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 +87 -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
package/dist/cjs/icons/media.js
CHANGED
|
@@ -85,32 +85,49 @@ const NtdCamera = /* @__PURE__ */ createIcon.createIcon({
|
|
|
85
85
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2v11z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2v11z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "4", fill: secondaryColor })] })),
|
|
86
86
|
},
|
|
87
87
|
});
|
|
88
|
+
const VIDEO_LENS = 'M17 9.5l5-3v11l-5-3';
|
|
88
89
|
const NtdVideo = /* @__PURE__ */ createIcon.createIcon({
|
|
89
90
|
displayName: 'NtdVideo',
|
|
90
91
|
paths: {
|
|
91
|
-
solid: ({ primaryColor
|
|
92
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d:
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", fill: primaryColor }), jsxRuntime.jsx("path", { d: VIDEO_LENS, fill: primaryColor, stroke: primaryColor })] })),
|
|
93
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: VIDEO_LENS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
94
|
+
// fills only, like vivid: the camera primary, the lens secondary
|
|
95
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", fill: primaryColor }), jsxRuntime.jsx("path", { d: VIDEO_LENS, fill: secondaryColor, stroke: secondaryColor })] })),
|
|
96
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", fill: primaryColor }), jsxRuntime.jsx("path", { d: VIDEO_LENS, fill: secondaryColor, stroke: secondaryColor })] })),
|
|
95
97
|
},
|
|
96
98
|
});
|
|
99
|
+
// NtdMicrophone / NtdMicrophoneOff: the stand is a line glyph, twice the stroke width in every
|
|
100
|
+
// variant but `outline`, and sits a little higher so its base keeps inside the box at that width.
|
|
101
|
+
// Duotone fills the capsule in secondary with no ring around it; vivid draws the stand in it.
|
|
102
|
+
const MIC_CAPSULE = { x: 9, y: 2, width: 6, height: 11, rx: 3 };
|
|
103
|
+
const MIC_STAND = 'M18.5 10v1a6.5 6.5 0 01-13 0v-1M12 17.5V21M8 21h8';
|
|
97
104
|
const NtdMicrophone = /* @__PURE__ */ createIcon.createIcon({
|
|
98
105
|
displayName: 'NtdMicrophone',
|
|
99
106
|
paths: {
|
|
100
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", {
|
|
101
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", {
|
|
102
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
103
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", {
|
|
107
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
108
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
109
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, fill: secondaryColor }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
110
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
104
111
|
},
|
|
105
112
|
});
|
|
113
|
+
/**
|
|
114
|
+
* The box without a band around NtdMicrophoneOff's slash (2,2 → 22,22): `gap` clear on each side
|
|
115
|
+
* of a slash `width` wide. The microphone is clipped to it, so the slash stands apart from it
|
|
116
|
+
* instead of merging with a stand of the same weight.
|
|
117
|
+
*/
|
|
118
|
+
function micSlashClip(width, gap) {
|
|
119
|
+
const o = (width / 2 + gap) / Math.SQRT2;
|
|
120
|
+
return `M0 0h24v24H0zM${ -2 + o} ${ -2 - o}L${26 + o} ${26 - o}L${26 - o} ${26 + o}L${ -2 - o} ${ -2 + o}z`;
|
|
121
|
+
}
|
|
122
|
+
const MIC_SLASH = 'M2 2l20 20';
|
|
106
123
|
/** A muted microphone: the microphone with a slash across it. */
|
|
107
124
|
const NtdMicrophoneOff = /* @__PURE__ */ createIcon.createIcon({
|
|
108
125
|
displayName: 'NtdMicrophoneOff',
|
|
109
126
|
paths: {
|
|
110
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
111
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
112
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
113
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
127
|
+
solid: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'mic', jsxRuntime.jsx("path", { d: micSlashClip(strokeWidth * 2, strokeWidth * 0.5), clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })), jsxRuntime.jsx("path", { d: MIC_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
128
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'mic', jsxRuntime.jsx("path", { d: micSlashClip(strokeWidth, strokeWidth * 0.5), clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })), jsxRuntime.jsx("path", { d: MIC_SLASH, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
129
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'mic', jsxRuntime.jsx("path", { d: micSlashClip(strokeWidth * 2, strokeWidth * 0.5), clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, fill: secondaryColor }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })), jsxRuntime.jsx("path", { d: MIC_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
130
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'mic', jsxRuntime.jsx("path", { d: micSlashClip(strokeWidth * 2, strokeWidth * 0.5), clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsxRuntime.jsx("path", { d: MIC_STAND, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })), jsxRuntime.jsx("path", { d: MIC_SLASH, stroke: secondaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
114
131
|
},
|
|
115
132
|
});
|
|
116
133
|
// NtdMusic: the note heads are tilted ellipses whose right edge is the stem's right edge, and the
|
|
@@ -165,13 +182,18 @@ const NtdPhone = /* @__PURE__ */ createIcon.createIcon({
|
|
|
165
182
|
},
|
|
166
183
|
});
|
|
167
184
|
// The tail leaves the bubble's bottom edge 4 units in from the left (it ran down the left side).
|
|
185
|
+
const CHAT = 'M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2h-8l-4 4v-4H5a2 2 0 01-2-2V5a2 2 0 012-2z';
|
|
186
|
+
const CHAT_BUBBLE = 'M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z';
|
|
187
|
+
/** The tail alone, reaching 1 under the bubble so the two colours meet without a seam. */
|
|
188
|
+
const CHAT_TAIL = 'M7 16v5l5-5z';
|
|
168
189
|
const NtdChat = /* @__PURE__ */ createIcon.createIcon({
|
|
169
190
|
displayName: 'NtdChat',
|
|
170
191
|
paths: {
|
|
171
|
-
solid: ({ primaryColor
|
|
172
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d:
|
|
173
|
-
|
|
174
|
-
|
|
192
|
+
solid: ({ primaryColor }) => jsxRuntime.jsx("path", { d: CHAT, fill: primaryColor }),
|
|
193
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: CHAT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
194
|
+
// fills only: the bubble primary, the tail secondary
|
|
195
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsxRuntime.jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
196
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsxRuntime.jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
175
197
|
},
|
|
176
198
|
});
|
|
177
199
|
/* NtdSend — the paper plane read ~20% oversized next to the rest of the set,
|
|
@@ -201,13 +223,22 @@ const NtdNotification = /* @__PURE__ */ createIcon.createIcon({
|
|
|
201
223
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "18", cy: "4", r: "3.5", fill: secondaryColor }), jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: "white", strokeWidth: "1" })] })),
|
|
202
224
|
},
|
|
203
225
|
});
|
|
226
|
+
// NtdWifi: three arcs round the dot (r 4.4 / 9.1 / 13.8 about 12,19.5, ±45°), 1.5 × the stroke
|
|
227
|
+
// width in every variant but `outline` — half again as heavy. Concentric, so the heavier arcs keep
|
|
228
|
+
// even gaps, and small enough that the outer one's square caps in `sharp` stay in the box.
|
|
229
|
+
// Duotone and vivid: the dot and the inner arc primary, the outer arcs secondary.
|
|
230
|
+
const WIFI_INNER = 'M8.89 16.39A4.4 4.4 0 0 1 15.11 16.39';
|
|
231
|
+
const WIFI_OUTER = 'M5.57 13.07A9.1 9.1 0 0 1 18.43 13.07M2.24 9.74A13.8 13.8 0 0 1 21.76 9.74';
|
|
232
|
+
function wifiFilled(near, far, strokeWidth) {
|
|
233
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: WIFI_OUTER, stroke: far, strokeWidth: strokeWidth * 1.5, fill: "none" }), jsxRuntime.jsx("path", { d: WIFI_INNER, stroke: near, strokeWidth: strokeWidth * 1.5, fill: "none" }), jsxRuntime.jsx("circle", { cx: "12", cy: "19.5", r: "1.5", fill: near })] }));
|
|
234
|
+
}
|
|
204
235
|
const NtdWifi = /* @__PURE__ */ createIcon.createIcon({
|
|
205
236
|
displayName: 'NtdWifi',
|
|
206
237
|
paths: {
|
|
207
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
208
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
209
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
210
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
238
|
+
solid: ({ primaryColor, strokeWidth }) => wifiFilled(primaryColor, primaryColor, strokeWidth),
|
|
239
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: `${WIFI_INNER}${WIFI_OUTER}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "12", cy: "19.5", r: "1", fill: primaryColor })] })),
|
|
240
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
241
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
211
242
|
},
|
|
212
243
|
});
|
|
213
244
|
const NtdBluetooth = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -80,8 +80,9 @@ const NtdMenu = /* @__PURE__ */ createIcon.createIcon({
|
|
|
80
80
|
paths: {
|
|
81
81
|
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: primaryColor })] })),
|
|
82
82
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
// the bars of solid, the middle one in secondary (the secondary underlay was drawn over)
|
|
84
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: primaryColor })] })),
|
|
85
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: primaryColor })] })),
|
|
85
86
|
},
|
|
86
87
|
});
|
|
87
88
|
// The filled cross is drawn as two strokes at twice the stroke width, like NtdCheck: it was a
|
|
@@ -91,8 +92,9 @@ const NtdClose = /* @__PURE__ */ createIcon.createIcon({
|
|
|
91
92
|
paths: {
|
|
92
93
|
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
|
|
93
94
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
94
|
-
|
|
95
|
-
|
|
95
|
+
// like NtdPlus: one stroke per colour, no backing disc; vivid adds the crossing in accent
|
|
96
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M6 6l12 12", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M18 6L6 18", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
97
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M6 6l12 12", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: "M18 6L6 18", stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("rect", { x: 12 - strokeWidth, y: 12 - strokeWidth, width: strokeWidth * 2, height: strokeWidth * 2, transform: "rotate(45 12 12)", fill: accentColor, opacity: accentOpacity })] })),
|
|
96
98
|
},
|
|
97
99
|
});
|
|
98
100
|
const NtdMoreHorizontal = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -122,13 +124,28 @@ const NtdExternalLink = /* @__PURE__ */ createIcon.createIcon({
|
|
|
122
124
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6", stroke: primaryColor, strokeWidth: "2" }), jsxRuntime.jsx("polyline", { points: "16,3 21,3 21,8", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("line", { x1: "21", y1: "3", x2: "12", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
123
125
|
},
|
|
124
126
|
});
|
|
127
|
+
// NtdRefresh: two arcs round 12,12 (r 7), each ending in a filled head — a line glyph twice the
|
|
128
|
+
// stroke width in every variant but `outline`. The tail stops inside its head, so no cap sticks
|
|
129
|
+
// out of it in `sharp` (the old tails ran into the heads' corners). Duotone and vivid: the top
|
|
130
|
+
// arrow primary, the bottom one secondary.
|
|
131
|
+
const REFRESH_TOP = {
|
|
132
|
+
tail: 'M5.82 8.71A7 7 0 0 1 18 8.39',
|
|
133
|
+
head: 'M22.25 7L20.75 13.96L14.34 10.86z',
|
|
134
|
+
};
|
|
135
|
+
const REFRESH_BOTTOM = {
|
|
136
|
+
tail: 'M18.18 15.29A7 7 0 0 1 6 15.61',
|
|
137
|
+
head: 'M1.75 17L3.25 10.04L9.66 13.14z',
|
|
138
|
+
};
|
|
139
|
+
function refreshArrows(top, bottom, strokeWidth) {
|
|
140
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: REFRESH_TOP.tail, stroke: top, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: REFRESH_TOP.head, fill: top }), jsxRuntime.jsx("path", { d: REFRESH_BOTTOM.tail, stroke: bottom, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: REFRESH_BOTTOM.head, fill: bottom })] }));
|
|
141
|
+
}
|
|
125
142
|
const NtdRefresh = /* @__PURE__ */ createIcon.createIcon({
|
|
126
143
|
displayName: 'NtdRefresh',
|
|
127
144
|
paths: {
|
|
128
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
145
|
+
solid: ({ primaryColor, strokeWidth }) => refreshArrows(primaryColor, primaryColor, strokeWidth),
|
|
129
146
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M4 4v5h5M20 20v-5h-5M20.49 9A9 9 0 005.64 5.64L4 9m16 6l-1.64 3.36A9 9 0 013.51 15", stroke: primaryColor, strokeWidth: strokeWidth })),
|
|
130
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
131
|
-
vivid: ({ primaryColor, secondaryColor
|
|
147
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => refreshArrows(primaryColor, secondaryColor, strokeWidth),
|
|
148
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => refreshArrows(primaryColor, secondaryColor, strokeWidth),
|
|
132
149
|
},
|
|
133
150
|
});
|
|
134
151
|
|
|
@@ -110,7 +110,8 @@ const NtdLab = /* @__PURE__ */ createIcon.createIcon({
|
|
|
110
110
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsxRuntime.jsx("path", { d: LAB_LIQUID, fill: accentColor, opacity: accentOpacity })] })),
|
|
111
111
|
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsxRuntime.jsx("path", { d: LAB_LIQUID, fill: secondaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("circle", { cx: "10.5", cy: "17.6", r: "0.9" }), jsxRuntime.jsx("circle", { cx: "13.6", cy: "18.7", r: "0.7" })] })] })),
|
|
112
112
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6.3", y1: "15.5", x2: "17.7", y2: "15.5", stroke: primaryColor, strokeWidth: "1.4" })] })),
|
|
113
|
-
|
|
113
|
+
// vivid without the bubbles: the flask primary, the liquid secondary, no outline
|
|
114
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsxRuntime.jsx("path", { d: LAB_LIQUID, fill: secondaryColor })] })),
|
|
114
115
|
},
|
|
115
116
|
});
|
|
116
117
|
|
|
@@ -16,13 +16,26 @@ const NtdHouse = /* @__PURE__ */ createIcon.createIcon({
|
|
|
16
16
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2L3 10v10a2 2 0 002 2h14a2 2 0 002-2V10L12 2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 2L3 10v10a2 2 0 002 2h14a2 2 0 002-2V10L12 2z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("path", { d: "M9 22V14h6v8", stroke: "white", strokeWidth: "1.5", fill: "white", opacity: "0.3" })] })),
|
|
17
17
|
},
|
|
18
18
|
});
|
|
19
|
+
// NtdApartment: filled, the windows and the door are drawn as in the outline — frames — in the
|
|
20
|
+
// accent colour (they were 50% white patches), the door kept inside the building. Duotone is fills
|
|
21
|
+
// only: the building primary, the windows and the door secondary; vivid puts the door in the
|
|
22
|
+
// accent colour.
|
|
23
|
+
const APARTMENT = { x: 4, y: 4, width: 16, height: 18, rx: 2 };
|
|
24
|
+
const APARTMENT_WINDOWS = [
|
|
25
|
+
{ x: 7, y: 7 },
|
|
26
|
+
{ x: 14, y: 7 },
|
|
27
|
+
{ x: 7, y: 13 },
|
|
28
|
+
{ x: 14, y: 13 },
|
|
29
|
+
];
|
|
30
|
+
const APARTMENT_DOOR = { x: 10, y: 18, width: 4, height: 4 };
|
|
19
31
|
const NtdApartment = /* @__PURE__ */ createIcon.createIcon({
|
|
20
32
|
displayName: 'NtdApartment',
|
|
21
33
|
paths: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
34
|
+
// the windows and the door filled in the accent colour, no frames (round 33)
|
|
35
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), iconParts.within(uid, 'door', jsxRuntime.jsx("rect", { ...APARTMENT }), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR }))] })] })),
|
|
36
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", children: [jsxRuntime.jsx("rect", { ...APARTMENT }), APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR })] })),
|
|
37
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: secondaryColor, children: [APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR })] })] })),
|
|
38
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...APARTMENT, fill: primaryColor }), jsxRuntime.jsx("g", { fill: secondaryColor, children: APARTMENT_WINDOWS.map((w) => (jsxRuntime.jsx("rect", { ...w, width: "3", height: "3", rx: "0.5" }, `${w.x}-${w.y}`))) }), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR, fill: accentColor, opacity: accentOpacity })] })),
|
|
26
39
|
},
|
|
27
40
|
});
|
|
28
41
|
const NtdCondo = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -114,16 +127,38 @@ const NtdBathroom = /* @__PURE__ */ createIcon.createIcon({
|
|
|
114
127
|
});
|
|
115
128
|
// NtdGarage: the door is drawn as in the outline — frame and two slats — in the accent colour on
|
|
116
129
|
// the filled building (it was a 30% white patch with white lines), kept inside the building. The
|
|
117
|
-
// duotone is fills only: building primary, door secondary, its frame and slats primary.
|
|
130
|
+
// duotone is fills only: building primary, door secondary, its frame and slats primary. `sharp`
|
|
131
|
+
// has its own building, square at the bottom (the derived one kept the path's round corners).
|
|
118
132
|
const GARAGE = 'M12 2L2 8v12a2 2 0 002 2h16a2 2 0 002-2V8L12 2z';
|
|
119
|
-
const
|
|
133
|
+
const GARAGE_SHARP = 'M12 2L2 8v14h20V8L12 2z';
|
|
134
|
+
/**
|
|
135
|
+
* The door of the filled garage: no line closes it at the bottom, where the building ends, so the
|
|
136
|
+
* slats are spaced from the stroke for three panels of the same visible height (spaced evenly,
|
|
137
|
+
* the bottom panel showed taller).
|
|
138
|
+
*/
|
|
139
|
+
function garageDoor(strokeWidth) {
|
|
140
|
+
const panel = (10 - 2.5 * strokeWidth) / 3;
|
|
141
|
+
const first = 12 + strokeWidth + panel;
|
|
142
|
+
const second = first + strokeWidth + panel;
|
|
143
|
+
return `M5 22V12h14v10M5 ${first}h14M5 ${second}h14`;
|
|
144
|
+
}
|
|
145
|
+
/** The outline's door: closed at the bottom, so its slats sit at even thirds. */
|
|
146
|
+
const GARAGE_DOOR_CLOSED = 'M5 12h14v10H5zM5 15.33h14M5 18.67h14';
|
|
147
|
+
function garageFilled(building, { variant, primaryColor, accentColor, accentOpacity, strokeWidth, uid }) {
|
|
148
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: building, fill: primaryColor }), iconParts.within(uid, 'door', jsxRuntime.jsx("path", { d: building }), jsxRuntime.jsx("path", {
|
|
149
|
+
// `wireframe` (thin lines, from this layer) draws the outline's door, whose slats it
|
|
150
|
+
// should match
|
|
151
|
+
d: variant === 'wireframe' ? GARAGE_DOOR_CLOSED : garageDoor(strokeWidth), stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] }));
|
|
152
|
+
}
|
|
120
153
|
const NtdGarage = /* @__PURE__ */ createIcon.createIcon({
|
|
121
154
|
displayName: 'NtdGarage',
|
|
122
155
|
paths: {
|
|
123
|
-
solid: (
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
156
|
+
solid: (props) => garageFilled(GARAGE, props),
|
|
157
|
+
sharp: (props) => garageFilled(GARAGE_SHARP, props),
|
|
158
|
+
// the door is closed at the bottom here, so its slats sit at even thirds
|
|
159
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsxRuntime.jsx("rect", { x: "5", y: "12", width: "14", height: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M5 15.33h14M5 18.67h14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
160
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, fill: primaryColor }), jsxRuntime.jsx("rect", { x: "5", y: "12", width: "14", height: "10", fill: secondaryColor }), iconParts.within(uid, 'door', jsxRuntime.jsx("path", { d: GARAGE }), jsxRuntime.jsx("path", { d: garageDoor(strokeWidth), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
161
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, fill: primaryColor }), iconParts.within(uid, 'door', jsxRuntime.jsx("path", { d: GARAGE }), jsxRuntime.jsx("path", { d: garageDoor(strokeWidth), stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
127
162
|
},
|
|
128
163
|
});
|
|
129
164
|
const NtdPool = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -64,15 +64,19 @@ const NtdDna = /* @__PURE__ */ createIcon.createIcon({
|
|
|
64
64
|
CHEMISTRY
|
|
65
65
|
───────────────────────────────────────────────────────────────────────────── */
|
|
66
66
|
// The filled atom draws its orbits at 0.75 of the stroke width around a smaller nucleus: at 2 the
|
|
67
|
-
// three orbits and the nucleus ran together into one heavy blob in the middle. The nucleus is
|
|
68
|
-
//
|
|
67
|
+
// three orbits and the nucleus ran together into one heavy blob in the middle. The nucleus is
|
|
68
|
+
// primary when filled, secondary in duotone and vivid; vivid also gives the orbits a glow in the
|
|
69
|
+
// accent colour.
|
|
70
|
+
function atomOrbits(stroke, width, opacity) {
|
|
71
|
+
return (jsxRuntime.jsxs("g", { stroke: stroke, strokeWidth: width, opacity: opacity, fill: "none", children: [jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(-60 12 12)" })] }));
|
|
72
|
+
}
|
|
69
73
|
const NtdAtom = /* @__PURE__ */ createIcon.createIcon({
|
|
70
74
|
displayName: 'NtdAtom',
|
|
71
75
|
paths: {
|
|
72
|
-
solid: ({ primaryColor,
|
|
73
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
74
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
75
|
-
vivid: ({ secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
76
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: primaryColor }), atomOrbits(primaryColor, strokeWidth * 0.75)] })),
|
|
77
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), atomOrbits(primaryColor, strokeWidth)] })),
|
|
78
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [atomOrbits(primaryColor, strokeWidth * 0.75), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: secondaryColor })] })),
|
|
79
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [atomOrbits(accentColor, strokeWidth * 1.75, accentOpacity), atomOrbits(primaryColor, strokeWidth * 0.75), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: secondaryColor })] })),
|
|
76
80
|
},
|
|
77
81
|
});
|
|
78
82
|
const NtdMolecule = /* @__PURE__ */ createIcon.createIcon({
|
package/dist/cjs/icons/shapes.js
CHANGED
|
@@ -175,22 +175,44 @@ const NtdCornerDownRight = /* @__PURE__ */ createIcon.createIcon({
|
|
|
175
175
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
176
176
|
},
|
|
177
177
|
});
|
|
178
|
+
// NtdMaximize / NtdMinimize: line glyphs, twice the stroke width in every variant but `outline`.
|
|
179
|
+
// A shaft that ran into its head's corner stuck out of it in `sharp` (its square cap passed the
|
|
180
|
+
// corner), so it stops 0.35 × the line width short of the corner on each axis — far enough for
|
|
181
|
+
// the cap to stay inside the head's arms, close enough to meet them.
|
|
182
|
+
/** The four strokes of the glyph: two corner heads and two shafts, `back` short of the corners. */
|
|
183
|
+
function maximizeLines(back) {
|
|
184
|
+
return `M15 3h6v6M9 21H3v-6M${21 - back} ${3 + back}L14 10M${3 + back} ${21 - back}L10 14`;
|
|
185
|
+
}
|
|
186
|
+
function minimizeLines(back) {
|
|
187
|
+
return `M4 14h6v6M20 10h-6V4M${10 - back} ${14 + back}L3 21M${14 + back} ${10 - back}L21 3`;
|
|
188
|
+
}
|
|
189
|
+
/** The two arrows of either glyph, each in one colour: [first head + shaft, second]. */
|
|
190
|
+
function splitLines(lines) {
|
|
191
|
+
const parts = lines.split('M').filter(Boolean);
|
|
192
|
+
return [`M${parts[0]}M${parts[2]}`, `M${parts[1]}M${parts[3]}`];
|
|
193
|
+
}
|
|
194
|
+
function cornerArrows(lines, first, second, strokeWidth) {
|
|
195
|
+
const width = strokeWidth * 2;
|
|
196
|
+
const [a, b] = splitLines(lines(width * 0.35));
|
|
197
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: a, stroke: first, strokeWidth: width, fill: "none" }), jsxRuntime.jsx("path", { d: b, stroke: second, strokeWidth: width, fill: "none" })] }));
|
|
198
|
+
}
|
|
178
199
|
const NtdMaximize = /* @__PURE__ */ createIcon.createIcon({
|
|
179
200
|
displayName: 'NtdMaximize',
|
|
180
201
|
paths: {
|
|
181
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
182
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
183
|
-
|
|
184
|
-
|
|
202
|
+
solid: ({ primaryColor, strokeWidth }) => cornerArrows(maximizeLines, primaryColor, primaryColor, strokeWidth),
|
|
203
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: maximizeLines(0), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
204
|
+
// one arrow per colour
|
|
205
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(maximizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
206
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(maximizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
185
207
|
},
|
|
186
208
|
});
|
|
187
209
|
const NtdMinimize = /* @__PURE__ */ createIcon.createIcon({
|
|
188
210
|
displayName: 'NtdMinimize',
|
|
189
211
|
paths: {
|
|
190
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
191
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
192
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
193
|
-
vivid: ({ primaryColor, secondaryColor
|
|
212
|
+
solid: ({ primaryColor, strokeWidth }) => cornerArrows(minimizeLines, primaryColor, primaryColor, strokeWidth),
|
|
213
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: minimizeLines(0), stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
214
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(minimizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
215
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => cornerArrows(minimizeLines, primaryColor, secondaryColor, strokeWidth),
|
|
194
216
|
},
|
|
195
217
|
});
|
|
196
218
|
// NtdMove: the line variants stop the cross 2 short of each arrowhead's point — with the square
|
package/dist/cjs/icons/social.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var createIcon = require('../createIcon.js');
|
|
5
|
+
var iconParts = require('../iconParts.js');
|
|
5
6
|
|
|
6
7
|
const NtdAtSign = /* @__PURE__ */ createIcon.createIcon({
|
|
7
8
|
displayName: 'NtdAtSign',
|
|
@@ -48,15 +49,8 @@ const NtdThumbsDown = /* @__PURE__ */ createIcon.createIcon({
|
|
|
48
49
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.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" }), jsxRuntime.jsx("rect", { x: "17", y: "2", width: "4", height: "11", rx: "1", fill: secondaryColor })] })),
|
|
49
50
|
},
|
|
50
51
|
});
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
paths: {
|
|
54
|
-
solid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M2 4l1.5 1.5", stroke: secondaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M22 4l-1.5 1.5", stroke: secondaryColor, strokeWidth: strokeWidth })] })),
|
|
55
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M2 4l1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M22 4l-1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
56
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M2 4l1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M22 4l-1.5 1.5", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
57
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("path", { d: "M2 4l1.5 1.5", stroke: "#3B82F6", strokeWidth: "1.5" }), jsxRuntime.jsx("path", { d: "M22 4l-1.5 1.5", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
58
|
-
},
|
|
59
|
-
});
|
|
52
|
+
// NtdBell's bell (iconParts' bellIcon) with ring marks
|
|
53
|
+
const NtdBellRing = /* @__PURE__ */ iconParts.bellIcon('NtdBellRing', true);
|
|
60
54
|
const NtdMegaphone = /* @__PURE__ */ createIcon.createIcon({
|
|
61
55
|
displayName: 'NtdMegaphone',
|
|
62
56
|
paths: {
|
package/dist/cjs/icons/travel.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var createIcon = require('../createIcon.js');
|
|
5
|
+
var iconParts = require('../iconParts.js');
|
|
5
6
|
|
|
6
7
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
7
8
|
TRANSPORTATION
|
|
@@ -42,13 +43,28 @@ const NtdCar = /* @__PURE__ */ createIcon.createIcon({
|
|
|
42
43
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 }), jsxRuntime.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" }), jsxRuntime.jsx("circle", { cx: "7", cy: "15", r: "1.5", fill: "white", opacity: "0.5" }), jsxRuntime.jsx("circle", { cx: "17", cy: "15", r: "1.5", fill: "white", opacity: "0.5" })] })),
|
|
43
44
|
},
|
|
44
45
|
});
|
|
46
|
+
// NtdBus: a side view — the body with one long window, a passenger (NtdUser's head and shoulders)
|
|
47
|
+
// in it on the left, a stripe below, and wheels set in arches. Filled, the window, the stripe, the
|
|
48
|
+
// arches and the hubs are in the accent colour (fixed 50% white before) and the passenger primary.
|
|
49
|
+
const BUS_BODY = { x: 2, y: 4, width: 20, height: 13, rx: 2.5 };
|
|
50
|
+
const BUS_WINDOW = { x: 4, y: 6.5, width: 16, height: 4.5, rx: 1 };
|
|
51
|
+
/** The passenger, cut off by the window's bottom edge. */
|
|
52
|
+
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';
|
|
53
|
+
const BUS_STRIPE = 'M2 13.5h20';
|
|
54
|
+
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';
|
|
55
|
+
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';
|
|
56
|
+
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';
|
|
57
|
+
function busFilled({ primaryColor, uid }, glass, details, detailOpacity) {
|
|
58
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, fill: primaryColor }), iconParts.within(uid, 'body', jsxRuntime.jsx("rect", { ...BUS_BODY }), jsxRuntime.jsxs("g", { opacity: detailOpacity, children: [jsxRuntime.jsx("path", { d: BUS_ARCHES, fill: details }), jsxRuntime.jsx("path", { d: BUS_STRIPE, stroke: details, strokeWidth: "1.2" })] })), jsxRuntime.jsx("rect", { ...BUS_WINDOW, fill: glass }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_PASSENGER, fill: primaryColor })), jsxRuntime.jsx("path", { d: BUS_WHEELS, fill: primaryColor }), jsxRuntime.jsx("path", { d: BUS_HUBS, fill: details, opacity: detailOpacity })] }));
|
|
59
|
+
}
|
|
45
60
|
const NtdBus = /* @__PURE__ */ createIcon.createIcon({
|
|
46
61
|
displayName: 'NtdBus',
|
|
47
62
|
paths: {
|
|
48
|
-
solid: (
|
|
49
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", {
|
|
50
|
-
|
|
51
|
-
|
|
63
|
+
solid: (props) => busFilled(props, props.accentColor, props.accentColor, props.accentOpacity),
|
|
64
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BUS_PASSENGER, fill: primaryColor }), jsxRuntime.jsx("path", { d: "M4 13.5h16", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: BUS_WHEELS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
65
|
+
// fills only: the body and the passenger primary, the window and the details secondary
|
|
66
|
+
duotone: (props) => busFilled(props, props.secondaryColor, props.secondaryColor, 1),
|
|
67
|
+
vivid: (props) => busFilled(props, props.secondaryColor, props.accentColor, props.accentOpacity),
|
|
52
68
|
},
|
|
53
69
|
});
|
|
54
70
|
const NtdShip = /* @__PURE__ */ createIcon.createIcon({
|