@nice2dev/icons 1.3.2 → 1.3.4
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 +122 -0
- package/README.md +12 -4
- package/dist/cjs/createIcon.js +4 -2
- package/dist/cjs/figmaExport.js +1 -0
- package/dist/cjs/iconParts.js +34 -1
- package/dist/cjs/icons/actions.js +85 -64
- package/dist/cjs/icons/business.js +65 -28
- package/dist/cjs/icons/education.js +37 -13
- package/dist/cjs/icons/files.js +58 -18
- package/dist/cjs/icons/index.js +1 -0
- package/dist/cjs/icons/media.js +87 -30
- package/dist/cjs/icons/navigation.js +26 -7
- package/dist/cjs/icons/omniverk.js +2 -1
- package/dist/cjs/icons/realestate.js +48 -10
- package/dist/cjs/icons/science.js +10 -6
- package/dist/cjs/icons/shapes.js +46 -12
- package/dist/cjs/icons/social.js +3 -9
- package/dist/cjs/icons/travel.js +21 -4
- package/dist/cjs/icons/ui.js +80 -39
- package/dist/cjs/icons/weather.js +5 -4
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/createIcon.js +4 -2
- package/dist/esm/figmaExport.js +1 -0
- package/dist/esm/iconParts.js +34 -3
- package/dist/esm/icons/actions.js +87 -66
- package/dist/esm/icons/business.js +65 -28
- package/dist/esm/icons/education.js +37 -13
- package/dist/esm/icons/files.js +58 -18
- package/dist/esm/icons/index.js +1 -1
- package/dist/esm/icons/media.js +87 -30
- package/dist/esm/icons/navigation.js +26 -7
- package/dist/esm/icons/omniverk.js +2 -1
- package/dist/esm/icons/realestate.js +48 -10
- package/dist/esm/icons/science.js +10 -6
- package/dist/esm/icons/shapes.js +46 -12
- package/dist/esm/icons/social.js +3 -9
- package/dist/esm/icons/travel.js +21 -4
- package/dist/esm/icons/ui.js +81 -41
- package/dist/esm/icons/weather.js +5 -4
- package/dist/esm/index.js +1 -1
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/iconParts.d.ts +14 -1
- package/dist/types/icons/index.d.ts +1 -1
- package/dist/types/icons/ui.d.ts +1 -0
- package/dist/types/types.d.ts +12 -3
- package/package.json +2 -2
package/dist/cjs/icons/media.js
CHANGED
|
@@ -85,48 +85,78 @@ 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
|
|
117
134
|
// stems end where that edge is vertical, so stem and head meet without a step (the heads stuck
|
|
118
135
|
// out right of the stems). The outline heads are the filled ones moved in by half a stroke, so
|
|
119
|
-
// their stroke meets the stem the same way.
|
|
136
|
+
// their stroke meets the stem the same way. Every variant but `outline` draws the stems and the
|
|
137
|
+
// beam twice the stroke width; the stems move left by the extra half width, so their right edge
|
|
138
|
+
// stays on the heads' (9.3 and 21.3), and the beam drops half a unit to keep a mitred corner in
|
|
139
|
+
// the box.
|
|
120
140
|
const MUSIC_STEMS = 'M8.3 17.22V5l12-2v12.22';
|
|
141
|
+
/** The stems and the beam for a line `width` wide; `sharp` stops them half a width higher. */
|
|
142
|
+
function musicStems(width, sharp = false) {
|
|
143
|
+
const left = 9.3 - width / 2;
|
|
144
|
+
const right = 21.3 - width / 2;
|
|
145
|
+
const end = sharp ? width / 2 : 0;
|
|
146
|
+
return `M${left} ${17.22 - end}V5.5L${right} 3.5V${15.22 - end}`;
|
|
147
|
+
}
|
|
148
|
+
function musicFilled(stems, heads, strokeWidth, sharp = false) {
|
|
149
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: musicStems(strokeWidth * 2, sharp), stroke: stems, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)", fill: heads[0] }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)", fill: heads[1] })] }));
|
|
150
|
+
}
|
|
121
151
|
const NtdMusic = /* @__PURE__ */ createIcon.createIcon({
|
|
122
152
|
displayName: 'NtdMusic',
|
|
123
153
|
paths: {
|
|
124
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
125
|
-
// the
|
|
126
|
-
sharp: ({ primaryColor, strokeWidth }) => (
|
|
154
|
+
solid: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth),
|
|
155
|
+
// the square caps of `sharp` then end at the heads' edge
|
|
156
|
+
sharp: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth, true),
|
|
127
157
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: MUSIC_STEMS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", children: [jsxRuntime.jsx("ellipse", { cx: "5.97", cy: "18", rx: "2.5", ry: "1.3", transform: "rotate(-24 5.97 18)" }), jsxRuntime.jsx("ellipse", { cx: "17.97", cy: "16", rx: "2.5", ry: "1.3", transform: "rotate(-24 17.97 16)" })] })] })),
|
|
128
|
-
duotone: ({ primaryColor,
|
|
129
|
-
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (
|
|
158
|
+
duotone: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth),
|
|
159
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, secondaryColor], strokeWidth),
|
|
130
160
|
},
|
|
131
161
|
});
|
|
132
162
|
// The flap is a cut through the envelope, kept inside it: its ends meet the sides flush (the
|
|
@@ -165,13 +195,18 @@ const NtdPhone = /* @__PURE__ */ createIcon.createIcon({
|
|
|
165
195
|
},
|
|
166
196
|
});
|
|
167
197
|
// The tail leaves the bubble's bottom edge 4 units in from the left (it ran down the left side).
|
|
198
|
+
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';
|
|
199
|
+
const CHAT_BUBBLE = 'M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z';
|
|
200
|
+
/** The tail alone, reaching 1 under the bubble so the two colours meet without a seam. */
|
|
201
|
+
const CHAT_TAIL = 'M7 16v5l5-5z';
|
|
168
202
|
const NtdChat = /* @__PURE__ */ createIcon.createIcon({
|
|
169
203
|
displayName: 'NtdChat',
|
|
170
204
|
paths: {
|
|
171
|
-
solid: ({ primaryColor
|
|
172
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d:
|
|
173
|
-
|
|
174
|
-
|
|
205
|
+
solid: ({ primaryColor }) => jsxRuntime.jsx("path", { d: CHAT, fill: primaryColor }),
|
|
206
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: CHAT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
207
|
+
// fills only: the bubble primary, the tail secondary
|
|
208
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsxRuntime.jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
209
|
+
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
210
|
},
|
|
176
211
|
});
|
|
177
212
|
/* NtdSend — the paper plane read ~20% oversized next to the rest of the set,
|
|
@@ -201,13 +236,23 @@ const NtdNotification = /* @__PURE__ */ createIcon.createIcon({
|
|
|
201
236
|
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
237
|
},
|
|
203
238
|
});
|
|
239
|
+
// NtdWifi: three arcs round the dot (r 5.2 / 9.5 / 13.8 about 12,19.5, ±45°), 1.5 × the stroke
|
|
240
|
+
// width in every variant but `outline` — half again as heavy. Concentric, so the heavier arcs keep
|
|
241
|
+
// even gaps, and small enough that the outer one's square caps in `sharp` stay in the box. The
|
|
242
|
+
// inner arc sits further from the dot (it was r 4.4) and the arcs closer together, the outer one
|
|
243
|
+
// where it was. Duotone and vivid: the dot and the inner arc primary, the outer arcs secondary.
|
|
244
|
+
const WIFI_INNER = 'M8.32 15.82A5.2 5.2 0 0 1 15.68 15.82';
|
|
245
|
+
const WIFI_OUTER = 'M5.28 12.78A9.5 9.5 0 0 1 18.72 12.78M2.24 9.74A13.8 13.8 0 0 1 21.76 9.74';
|
|
246
|
+
function wifiFilled(near, far, strokeWidth) {
|
|
247
|
+
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 })] }));
|
|
248
|
+
}
|
|
204
249
|
const NtdWifi = /* @__PURE__ */ createIcon.createIcon({
|
|
205
250
|
displayName: 'NtdWifi',
|
|
206
251
|
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 }) => (
|
|
252
|
+
solid: ({ primaryColor, strokeWidth }) => wifiFilled(primaryColor, primaryColor, strokeWidth),
|
|
253
|
+
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 })] })),
|
|
254
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
255
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
211
256
|
},
|
|
212
257
|
});
|
|
213
258
|
const NtdBluetooth = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -229,13 +274,25 @@ const NtdPalette = /* @__PURE__ */ createIcon.createIcon({
|
|
|
229
274
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 3a9 9 0 100 18h1a2 2 0 000-4h-1a2 2 0 110-4h1a3 3 0 103-3 3 3 0 01-3-3V6a3 3 0 00-1-3z", fill: primaryColor, opacity: "0.25" }), jsxRuntime.jsx("path", { d: "M12 3a9 9 0 100 18h1a2 2 0 000-4h-1a2 2 0 110-4h1a3 3 0 103-3 3 3 0 01-3-3V6a3 3 0 00-1-3z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "7", cy: "9", r: "1.2", fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "10", cy: "7", r: "1.2", fill: "#8B5CF6" }), jsxRuntime.jsx("circle", { cx: "7", cy: "13", r: "1.2", fill: "#EF4444" })] })),
|
|
230
275
|
},
|
|
231
276
|
});
|
|
277
|
+
// NtdBrush: a paintbrush lying at 45° — a tapering handle with a round end, the metal ferrule, and
|
|
278
|
+
// the bristles swelling out of it to a point at the bottom left (it was a pencil-like wedge with a
|
|
279
|
+
// blob). Filled, the ferrule is set off from the handle and the bristles by two accent cuts.
|
|
280
|
+
// Duotone, fills only: the handle and the ferrule primary, the bristles secondary; vivid puts the
|
|
281
|
+
// ferrule in the accent colour.
|
|
282
|
+
const BRUSH_HANDLE = 'M19.35 2.81A1.3 1.3 0 0 1 21.19 4.65L13.91 12.49L11.51 10.09Z';
|
|
283
|
+
const BRUSH_FERRULE = 'M11.08 9.67L14.33 12.92L11.36 15.89L8.11 12.64Z';
|
|
284
|
+
const BRUSH_BRISTLES = 'M8.11 12.64L11.36 15.89C9.95 18.43 7.76 20.49 2.81 21.19C3.51 16.24 5.57 14.05 8.11 12.64Z';
|
|
285
|
+
const BRUSH_CUTS = 'M10.37 8.96L15.04 13.63M7.4 11.93L12.07 16.6';
|
|
286
|
+
function brushFilled(handle, ferrule, bristles, ferruleOpacity = 1) {
|
|
287
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BRUSH_HANDLE, fill: handle }), jsxRuntime.jsx("path", { d: BRUSH_FERRULE, fill: ferrule, opacity: ferruleOpacity }), jsxRuntime.jsx("path", { d: BRUSH_BRISTLES, fill: bristles })] }));
|
|
288
|
+
}
|
|
232
289
|
const NtdBrush = /* @__PURE__ */ createIcon.createIcon({
|
|
233
290
|
displayName: 'NtdBrush',
|
|
234
291
|
paths: {
|
|
235
|
-
solid: ({ primaryColor,
|
|
236
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d:
|
|
237
|
-
duotone: ({ primaryColor, secondaryColor
|
|
238
|
-
vivid: ({ primaryColor, secondaryColor
|
|
292
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [brushFilled(primaryColor, primaryColor, primaryColor), iconParts.within(uid, 'brush', jsxRuntime.jsx("path", { d: `${BRUSH_HANDLE}${BRUSH_FERRULE}${BRUSH_BRISTLES}` }), jsxRuntime.jsx("path", { d: BRUSH_CUTS, stroke: accentColor, strokeWidth: "1", opacity: accentOpacity }))] })),
|
|
293
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${BRUSH_HANDLE}${BRUSH_FERRULE}${BRUSH_BRISTLES}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
294
|
+
duotone: ({ primaryColor, secondaryColor }) => brushFilled(primaryColor, primaryColor, secondaryColor),
|
|
295
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => brushFilled(primaryColor, accentColor, secondaryColor, accentOpacity),
|
|
239
296
|
},
|
|
240
297
|
});
|
|
241
298
|
const NtdPenTool = /* @__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,30 @@ 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). Each head (7.2 wide, 4.2 long)
|
|
130
|
+
// points along the chord to the start of the other arrow's tail, with a clear gap before it — the
|
|
131
|
+
// bigger heads pointed past the tails and nearly touched them. Duotone and vivid: the top arrow
|
|
132
|
+
// primary, the bottom one secondary.
|
|
133
|
+
const REFRESH_TOP = {
|
|
134
|
+
tail: 'M6.34 7.89A7 7 0 0 1 17.98 8.37',
|
|
135
|
+
head: 'M14.59 8.46L17.89 12.9L21.77 8.96z',
|
|
136
|
+
};
|
|
137
|
+
const REFRESH_BOTTOM = {
|
|
138
|
+
tail: 'M17.66 16.11A7 7 0 0 1 6.02 15.63',
|
|
139
|
+
head: 'M9.41 15.54L6.11 11.1L2.23 15.04z',
|
|
140
|
+
};
|
|
141
|
+
function refreshArrows(top, bottom, strokeWidth) {
|
|
142
|
+
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 })] }));
|
|
143
|
+
}
|
|
125
144
|
const NtdRefresh = /* @__PURE__ */ createIcon.createIcon({
|
|
126
145
|
displayName: 'NtdRefresh',
|
|
127
146
|
paths: {
|
|
128
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
147
|
+
solid: ({ primaryColor, strokeWidth }) => refreshArrows(primaryColor, primaryColor, strokeWidth),
|
|
129
148
|
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
|
|
149
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => refreshArrows(primaryColor, secondaryColor, strokeWidth),
|
|
150
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => refreshArrows(primaryColor, secondaryColor, strokeWidth),
|
|
132
151
|
},
|
|
133
152
|
});
|
|
134
153
|
|
|
@@ -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,29 @@ 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 };
|
|
31
|
+
/** The door of the solid variants: it stops short of the ground, leaving a thin primary sill. */
|
|
32
|
+
const APARTMENT_DOOR_SILL = { ...APARTMENT_DOOR, height: 3.25 };
|
|
19
33
|
const NtdApartment = /* @__PURE__ */ createIcon.createIcon({
|
|
20
34
|
displayName: 'NtdApartment',
|
|
21
35
|
paths: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
36
|
+
// the windows and the door filled in the accent colour, no frames (round 33), a sill under the
|
|
37
|
+
// door (round 34)
|
|
38
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (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}`))), jsxRuntime.jsx("rect", { ...APARTMENT_DOOR_SILL })] })] })),
|
|
39
|
+
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 })] })),
|
|
40
|
+
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 })] })] })),
|
|
41
|
+
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
42
|
},
|
|
27
43
|
});
|
|
28
44
|
const NtdCondo = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -114,16 +130,38 @@ const NtdBathroom = /* @__PURE__ */ createIcon.createIcon({
|
|
|
114
130
|
});
|
|
115
131
|
// NtdGarage: the door is drawn as in the outline — frame and two slats — in the accent colour on
|
|
116
132
|
// 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.
|
|
133
|
+
// duotone is fills only: building primary, door secondary, its frame and slats primary. `sharp`
|
|
134
|
+
// has its own building, square at the bottom (the derived one kept the path's round corners).
|
|
118
135
|
const GARAGE = 'M12 2L2 8v12a2 2 0 002 2h16a2 2 0 002-2V8L12 2z';
|
|
119
|
-
const
|
|
136
|
+
const GARAGE_SHARP = 'M12 2L2 8v14h20V8L12 2z';
|
|
137
|
+
/**
|
|
138
|
+
* The door of the filled garage: no line closes it at the bottom, where the building ends, so the
|
|
139
|
+
* slats are spaced from the stroke for three panels of the same visible height (spaced evenly,
|
|
140
|
+
* the bottom panel showed taller).
|
|
141
|
+
*/
|
|
142
|
+
function garageDoor(strokeWidth) {
|
|
143
|
+
const panel = (10 - 2.5 * strokeWidth) / 3;
|
|
144
|
+
const first = 12 + strokeWidth + panel;
|
|
145
|
+
const second = first + strokeWidth + panel;
|
|
146
|
+
return `M5 22V12h14v10M5 ${first}h14M5 ${second}h14`;
|
|
147
|
+
}
|
|
148
|
+
/** The outline's door: closed at the bottom, so its slats sit at even thirds. */
|
|
149
|
+
const GARAGE_DOOR_CLOSED = 'M5 12h14v10H5zM5 15.33h14M5 18.67h14';
|
|
150
|
+
function garageFilled(building, { variant, primaryColor, accentColor, accentOpacity, strokeWidth, uid }) {
|
|
151
|
+
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", {
|
|
152
|
+
// `wireframe` (thin lines, from this layer) draws the outline's door, whose slats it
|
|
153
|
+
// should match
|
|
154
|
+
d: variant === 'wireframe' ? GARAGE_DOOR_CLOSED : garageDoor(strokeWidth), stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] }));
|
|
155
|
+
}
|
|
120
156
|
const NtdGarage = /* @__PURE__ */ createIcon.createIcon({
|
|
121
157
|
displayName: 'NtdGarage',
|
|
122
158
|
paths: {
|
|
123
|
-
solid: (
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
159
|
+
solid: (props) => garageFilled(GARAGE, props),
|
|
160
|
+
sharp: (props) => garageFilled(GARAGE_SHARP, props),
|
|
161
|
+
// the door is closed at the bottom here, so its slats sit at even thirds
|
|
162
|
+
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 })] })),
|
|
163
|
+
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" }))] })),
|
|
164
|
+
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
165
|
},
|
|
128
166
|
});
|
|
129
167
|
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
|
|
@@ -218,13 +240,25 @@ const NtdMove = /* @__PURE__ */ createIcon.createIcon({
|
|
|
218
240
|
vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: primaryColor }), jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: "white", opacity: "0.1" })] })),
|
|
219
241
|
},
|
|
220
242
|
});
|
|
243
|
+
// NtdRepeat: two hooked arrows, a line glyph twice the stroke width in every variant but `outline`
|
|
244
|
+
// — redrawn tighter (shafts at y 6 and 18, heads 3 long) so the heavier lines stay in the box. As
|
|
245
|
+
// in NtdMaximize, each shaft stops 0.35 × the line width short of its head's point, so the square
|
|
246
|
+
// cap of `sharp` stays inside the head (it stuck out of both points). Duotone and vivid: one arrow
|
|
247
|
+
// primary, the other secondary (vivid had a fixed #3B82F6 head).
|
|
248
|
+
const REPEAT_HEADS = ['M17 3L20 6L17 9', 'M7 21L4 18L7 15'];
|
|
249
|
+
const REPEAT_OUTLINE = 'M17 1l4 4-4 4M3 11V9a4 4 0 014-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 01-4 4H3';
|
|
250
|
+
function repeatArrows(first, second, strokeWidth) {
|
|
251
|
+
const width = strokeWidth * 2;
|
|
252
|
+
const back = width * 0.35;
|
|
253
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: `${REPEAT_HEADS[0]}M4 10V9a3 3 0 013-3H${20 - back}`, stroke: first, strokeWidth: width, fill: "none" }), jsxRuntime.jsx("path", { d: `${REPEAT_HEADS[1]}M20 14v1a3 3 0 01-3 3H${4 + back}`, stroke: second, strokeWidth: width, fill: "none" })] }));
|
|
254
|
+
}
|
|
221
255
|
const NtdRepeat = /* @__PURE__ */ createIcon.createIcon({
|
|
222
256
|
displayName: 'NtdRepeat',
|
|
223
257
|
paths: {
|
|
224
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
225
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
226
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
227
|
-
vivid: ({ primaryColor, secondaryColor
|
|
258
|
+
solid: ({ primaryColor, strokeWidth }) => repeatArrows(primaryColor, primaryColor, strokeWidth),
|
|
259
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: REPEAT_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
260
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => repeatArrows(primaryColor, secondaryColor, strokeWidth),
|
|
261
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => repeatArrows(primaryColor, secondaryColor, strokeWidth),
|
|
228
262
|
},
|
|
229
263
|
});
|
|
230
264
|
const NtdShuffle = /* @__PURE__ */ createIcon.createIcon({
|