@nice2dev/icons 1.3.7 → 1.3.9
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 +90 -0
- package/README.md +33 -16
- package/dist/cjs/NiceIconPicker.js +289 -92
- package/dist/cjs/NiceIconStacker.js +137 -108
- package/dist/cjs/client.js +6 -0
- package/dist/cjs/createIcon.js +17 -4
- package/dist/cjs/iconHtml.js +122 -0
- package/dist/cjs/iconParts.js +24 -2
- package/dist/cjs/iconStack.js +76 -5
- package/dist/cjs/icons/accessibility.js +9 -8
- package/dist/cjs/icons/actions.js +38 -35
- package/dist/cjs/icons/ai.js +12 -11
- package/dist/cjs/icons/brand.js +2 -2
- package/dist/cjs/icons/business.js +14 -16
- package/dist/cjs/icons/devtech.js +17 -15
- package/dist/cjs/icons/ecommerce.js +7 -12
- package/dist/cjs/icons/education.js +14 -16
- package/dist/cjs/icons/files.js +46 -22
- package/dist/cjs/icons/fintech.js +2 -11
- package/dist/cjs/icons/food.js +12 -8
- package/dist/cjs/icons/fun.js +11 -11
- package/dist/cjs/icons/gaming.js +20 -13
- package/dist/cjs/icons/health.js +9 -12
- package/dist/cjs/icons/index.js +1 -0
- package/dist/cjs/icons/input.js +31 -21
- package/dist/cjs/icons/legal.js +11 -11
- package/dist/cjs/icons/media.js +24 -15
- package/dist/cjs/icons/navigation.js +16 -13
- package/dist/cjs/icons/omniverk.js +2 -7
- package/dist/cjs/icons/realestate.js +14 -14
- package/dist/cjs/icons/saas.js +0 -10
- package/dist/cjs/icons/science.js +12 -12
- package/dist/cjs/icons/shapes.js +20 -17
- package/dist/cjs/icons/smarthome.js +0 -11
- package/dist/cjs/icons/social.js +7 -6
- package/dist/cjs/icons/sports.js +5 -6
- package/dist/cjs/icons/sustainability.js +12 -11
- package/dist/cjs/icons/travel.js +9 -9
- package/dist/cjs/icons/ui.js +55 -31
- package/dist/cjs/icons/weather.js +8 -13
- package/dist/cjs/index.js +7 -0
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/resolver.js +1 -0
- package/dist/cjs/stacking.js +38 -11
- package/dist/esm/NiceIconPicker.js +292 -95
- package/dist/esm/NiceIconStacker.js +141 -112
- package/dist/esm/client.js +2 -1
- package/dist/esm/createIcon.js +18 -5
- package/dist/esm/iconHtml.js +117 -0
- package/dist/esm/iconParts.js +24 -3
- package/dist/esm/iconStack.js +74 -6
- package/dist/esm/icons/accessibility.js +9 -8
- package/dist/esm/icons/actions.js +39 -36
- package/dist/esm/icons/ai.js +12 -11
- package/dist/esm/icons/brand.js +2 -2
- package/dist/esm/icons/business.js +15 -17
- package/dist/esm/icons/devtech.js +17 -15
- package/dist/esm/icons/ecommerce.js +7 -12
- package/dist/esm/icons/education.js +14 -16
- package/dist/esm/icons/files.js +47 -23
- package/dist/esm/icons/fintech.js +2 -11
- package/dist/esm/icons/food.js +12 -8
- package/dist/esm/icons/fun.js +11 -11
- package/dist/esm/icons/gaming.js +21 -14
- package/dist/esm/icons/health.js +9 -12
- package/dist/esm/icons/index.js +1 -1
- package/dist/esm/icons/input.js +31 -21
- package/dist/esm/icons/legal.js +12 -12
- package/dist/esm/icons/media.js +25 -16
- package/dist/esm/icons/navigation.js +16 -13
- package/dist/esm/icons/omniverk.js +2 -7
- package/dist/esm/icons/realestate.js +15 -15
- package/dist/esm/icons/saas.js +0 -10
- package/dist/esm/icons/science.js +12 -12
- package/dist/esm/icons/shapes.js +20 -17
- package/dist/esm/icons/smarthome.js +0 -11
- package/dist/esm/icons/social.js +8 -7
- package/dist/esm/icons/sports.js +6 -7
- package/dist/esm/icons/sustainability.js +12 -11
- package/dist/esm/icons/travel.js +10 -10
- package/dist/esm/icons/ui.js +56 -33
- package/dist/esm/icons/weather.js +9 -14
- package/dist/esm/index.js +3 -2
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/resolver.js +1 -0
- package/dist/esm/stacking.js +36 -12
- package/dist/types/NiceIconPicker.d.ts +66 -20
- package/dist/types/NiceIconStacker.d.ts +30 -9
- package/dist/types/client.d.ts +4 -2
- package/dist/types/createIcon.d.ts +16 -2
- package/dist/types/iconHtml.d.ts +44 -0
- package/dist/types/iconParts.d.ts +8 -2
- package/dist/types/iconStack.d.ts +30 -3
- package/dist/types/icons/index.d.ts +1 -1
- package/dist/types/icons/ui.d.ts +1 -0
- package/dist/types/index.d.ts +4 -2
- package/dist/types/stacking.d.ts +25 -5
- package/dist/types/types.d.ts +11 -7
- package/package.json +2 -2
package/dist/esm/iconStack.js
CHANGED
|
@@ -14,6 +14,74 @@ function stackParentId(layers, layer) {
|
|
|
14
14
|
function stackChildrenOf(layers, id) {
|
|
15
15
|
return layers.filter((l) => l !== layers[0] && stackParentId(layers, l) === id);
|
|
16
16
|
}
|
|
17
|
+
/** An icon's name as people read it: the export name without `Ntd` — `NtdAlertBell` → `AlertBell`. */
|
|
18
|
+
function iconDisplayName(name) {
|
|
19
|
+
return name.replace(/^Ntd(?=[A-Z0-9])/, '');
|
|
20
|
+
}
|
|
21
|
+
/** A short id no layer of the stack has yet: `'1'`, `'2'`… (1.3.9 — it was the icon name and a timestamp). */
|
|
22
|
+
function nextStackLayerId(layers) {
|
|
23
|
+
const taken = new Set(layers.map((l) => l.id));
|
|
24
|
+
let n = layers.length + 1;
|
|
25
|
+
while (taken.has(String(n))) {
|
|
26
|
+
n += 1;
|
|
27
|
+
}
|
|
28
|
+
return String(n);
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Puts an icon on the stack (1.3.9): into layer `into` (the base when absent or unknown), or as the
|
|
32
|
+
* base of an empty stack. Returns the new layers and the new layer's id.
|
|
33
|
+
*/
|
|
34
|
+
function addStackLayer(layers, icon, into) {
|
|
35
|
+
const id = nextStackLayerId(layers);
|
|
36
|
+
const parent = layers.find((l) => l.id === into);
|
|
37
|
+
const layer = {
|
|
38
|
+
id,
|
|
39
|
+
icon: icon.icon,
|
|
40
|
+
...(icon.variant ? { variant: icon.variant } : {}),
|
|
41
|
+
...(parent && parent !== layers[0] ? { parent: parent.id } : {}),
|
|
42
|
+
};
|
|
43
|
+
return { layers: [...layers, layer], id };
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Takes a layer off the stack (1.3.9; NiceIconStacker's own until then): what sat in it moves up
|
|
47
|
+
* into its parent, and a removed base hands over to its first child.
|
|
48
|
+
*/
|
|
49
|
+
function removeStackLayer(layers, id) {
|
|
50
|
+
const base = layers[0];
|
|
51
|
+
if (!base) {
|
|
52
|
+
return [];
|
|
53
|
+
}
|
|
54
|
+
if (id !== base.id) {
|
|
55
|
+
const gone = layers.find((l) => l.id === id);
|
|
56
|
+
const up = gone ? stackParentId(layers, gone) : undefined;
|
|
57
|
+
return layers
|
|
58
|
+
.filter((l) => l.id !== id)
|
|
59
|
+
.map((l) => (l.parent === id ? { ...l, parent: up === base.id ? undefined : up } : l));
|
|
60
|
+
}
|
|
61
|
+
const [heir, ...siblings] = stackChildrenOf(layers, base.id);
|
|
62
|
+
if (!heir) {
|
|
63
|
+
return [];
|
|
64
|
+
}
|
|
65
|
+
const newBase = {
|
|
66
|
+
...heir,
|
|
67
|
+
parent: undefined,
|
|
68
|
+
align: undefined,
|
|
69
|
+
size: undefined,
|
|
70
|
+
rotation: undefined,
|
|
71
|
+
offsetX: undefined,
|
|
72
|
+
offsetY: undefined,
|
|
73
|
+
};
|
|
74
|
+
return [
|
|
75
|
+
newBase,
|
|
76
|
+
...layers
|
|
77
|
+
.filter((l) => l.id !== base.id && l.id !== heir.id)
|
|
78
|
+
.map((l) => siblings.includes(l)
|
|
79
|
+
? { ...l, parent: heir.id }
|
|
80
|
+
: l.parent === heir.id
|
|
81
|
+
? { ...l, parent: undefined }
|
|
82
|
+
: l),
|
|
83
|
+
];
|
|
84
|
+
}
|
|
17
85
|
const COLOR_PROPS = ['primaryColor', 'secondaryColor', 'accentColor', 'textColor'];
|
|
18
86
|
/** The stack as JSX: every layer wrapping the layers that sit in it, text innermost. */
|
|
19
87
|
function niceIconStackCode(layers) {
|
|
@@ -23,11 +91,11 @@ function niceIconStackCode(layers) {
|
|
|
23
91
|
}
|
|
24
92
|
const bound = layers.filter((l) => isValidTextBinding(l.textBinding));
|
|
25
93
|
const write = (layer, parent, indent) => {
|
|
26
|
-
var _a;
|
|
27
94
|
const attrs = [
|
|
28
|
-
|
|
95
|
+
// the parent's own spot is the default (1.3.8), so only another position is written
|
|
96
|
+
parent && layer.align && layer.align !== 'perfect' ? `stackAlign="${layer.align}"` : '',
|
|
29
97
|
parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
|
|
30
|
-
parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
|
|
98
|
+
parent && layer.rotation !== undefined ? `stackRotation={${layer.rotation}}` : '',
|
|
31
99
|
parent && layer.offsetX ? `stackOffsetX={${layer.offsetX}}` : '',
|
|
32
100
|
parent && layer.offsetY ? `stackOffsetY={${layer.offsetY}}` : '',
|
|
33
101
|
layer.variant && layer.variant !== (parent === null || parent === void 0 ? void 0 : parent.variant) ? `variant="${layer.variant}"` : '',
|
|
@@ -59,7 +127,7 @@ function niceIconStackCode(layers) {
|
|
|
59
127
|
function renderIconStack(layers, icons, { baseProps, values } = {}) {
|
|
60
128
|
const resolve = (name) => (typeof icons === 'function' ? icons(name) : icons[name]);
|
|
61
129
|
const draw = (layer, parent) => {
|
|
62
|
-
var _a
|
|
130
|
+
var _a;
|
|
63
131
|
const Icon = resolve(layer.icon);
|
|
64
132
|
if (!Icon) {
|
|
65
133
|
return null;
|
|
@@ -85,7 +153,7 @@ function renderIconStack(layers, icons, { baseProps, values } = {}) {
|
|
|
85
153
|
inner,
|
|
86
154
|
text));
|
|
87
155
|
}
|
|
88
|
-
return (createElement(Icon, { ...own, key: layer.id, stackAlign:
|
|
156
|
+
return (createElement(Icon, { ...own, key: layer.id, stackAlign: layer.align, stackSize: layer.size, stackRotation: layer.rotation, stackOffsetX: layer.offsetX, stackOffsetY: layer.offsetY, variant: layer.variant !== parent.variant ? layer.variant : undefined },
|
|
89
157
|
inner,
|
|
90
158
|
text));
|
|
91
159
|
};
|
|
@@ -103,4 +171,4 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
103
171
|
NiceIconStack.displayName = 'NiceIconStack';
|
|
104
172
|
}
|
|
105
173
|
|
|
106
|
-
export { NiceIconStack, isValidTextBinding, niceIconStackCode, renderIconStack, stackChildrenOf, stackParentId };
|
|
174
|
+
export { NiceIconStack, addStackLayer, iconDisplayName, isValidTextBinding, niceIconStackCode, removeStackLayer, renderIconStack, stackChildrenOf, stackParentId };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { swapDuotone } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
5
6
|
UNIVERSAL ACCESS
|
|
@@ -47,7 +48,7 @@ const NtdDeaf = /* @__PURE__ */ createIcon({
|
|
|
47
48
|
paths: {
|
|
48
49
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round" })] })),
|
|
49
50
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
|
|
50
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "10", r: "6", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
|
|
51
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "10", r: "6", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] }))),
|
|
51
52
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M10 5a5 5 0 015 5c0 2-1 3-2 4s-2 2-2 4v2", stroke: primaryColor, strokeWidth: "2", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M7 8a3 3 0 013-3", stroke: secondaryColor, strokeWidth: "1.8", fill: "none", strokeLinecap: "round" }), jsx("path", { d: "M4 4l16 16", stroke: "#3B82F6", strokeWidth: "1.5", strokeLinecap: "round" })] })),
|
|
52
53
|
},
|
|
53
54
|
});
|
|
@@ -56,7 +57,7 @@ const NtdSignLanguage = /* @__PURE__ */ createIcon({
|
|
|
56
57
|
paths: {
|
|
57
58
|
solid: ({ primaryColor }) => (jsx(Fragment, { children: jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: primaryColor }) })),
|
|
58
59
|
outline: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) })),
|
|
59
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] })),
|
|
60
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] }))),
|
|
60
61
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: primaryColor }), jsx("path", { d: "M8 13V7a2 2 0 014 0v2M12 9V6a2 2 0 014 0v3M16 9V7a2 2 0 014 0v6c0 4-3 7-7 7h-1c-3 0-6-2-6-5v-2a2 2 0 014 0v1", fill: "white", opacity: "0.1" })] })),
|
|
61
62
|
},
|
|
62
63
|
});
|
|
@@ -74,7 +75,7 @@ const NtdAudioDescription = /* @__PURE__ */ createIcon({
|
|
|
74
75
|
paths: {
|
|
75
76
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("text", { x: "7", y: "15", fill: "white", fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
|
|
76
77
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
|
|
77
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] })),
|
|
78
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "7", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "AD" })] }))),
|
|
78
79
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.1" })] })),
|
|
79
80
|
},
|
|
80
81
|
});
|
|
@@ -83,7 +84,7 @@ const NtdClosedCaptions = /* @__PURE__ */ createIcon({
|
|
|
83
84
|
paths: {
|
|
84
85
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("text", { x: "6", y: "15", fill: "white", fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
|
|
85
86
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
|
|
86
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] })),
|
|
87
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("text", { x: "6", y: "15", fill: primaryColor, fontSize: "8", fontWeight: "bold", fontFamily: "system-ui", children: "CC" })] }))),
|
|
87
88
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", fill: "white", opacity: "0.1" })] })),
|
|
88
89
|
},
|
|
89
90
|
});
|
|
@@ -95,7 +96,7 @@ const NtdDyslexia = /* @__PURE__ */ createIcon({
|
|
|
95
96
|
paths: {
|
|
96
97
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: primaryColor }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
|
|
97
98
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] })),
|
|
98
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] })),
|
|
99
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: primaryColor, strokeWidth: "1.5", strokeLinecap: "round" })] }))),
|
|
99
100
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M8 7h8M8 11h6M8 15h4", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" }), jsx("path", { d: "M16 15l-2 2M14 15l2 2", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
|
|
100
101
|
},
|
|
101
102
|
});
|
|
@@ -104,7 +105,7 @@ const NtdEasyRead = /* @__PURE__ */ createIcon({
|
|
|
104
105
|
paths: {
|
|
105
106
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: primaryColor }), jsx("path", { d: "M6 8h5v5H6zM13 8h5M13 11h4M6 16h12M6 19h8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })] })),
|
|
106
107
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "8", width: "5", height: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
|
|
107
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "8", width: "5", height: "5", fill: primaryColor }), jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] })),
|
|
108
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "8", width: "5", height: "5", fill: primaryColor }), jsx("path", { d: "M13 8h5M13 11h4M6 16h12M6 19h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" })] }))),
|
|
108
109
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("path", { d: "M6 8h5v5H6zM13 8h5M13 11h4M6 16h12M6 19h8", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" })] })),
|
|
109
110
|
},
|
|
110
111
|
});
|
|
@@ -116,7 +117,7 @@ const NtdScreenReader = /* @__PURE__ */ createIcon({
|
|
|
116
117
|
paths: {
|
|
117
118
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: primaryColor }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: "2", strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: "white" }), jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
|
|
118
119
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: primaryColor, strokeWidth: "1", fill: "none" })] })),
|
|
119
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: primaryColor })] })),
|
|
120
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: primaryColor })] }))),
|
|
120
121
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: primaryColor }), jsx("rect", { x: "4", y: "2", width: "16", height: "14", rx: "2", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "16", cy: "7", r: "1.5", fill: "white" }), jsx("path", { d: "M8 18h8M10 18v2M14 18v2M8 20h8", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { d: "M8 7h2M8 10h4M8 13h6", stroke: "white", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { d: "M14 7c0-1.5 1-2.5 2-2.5s2 1 2 2.5", stroke: "white", strokeWidth: "1", fill: "none" })] })),
|
|
121
122
|
},
|
|
122
123
|
});
|
|
@@ -134,7 +135,7 @@ const NtdAssistiveTech = /* @__PURE__ */ createIcon({
|
|
|
134
135
|
paths: {
|
|
135
136
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white" })] })),
|
|
136
137
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
137
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
|
|
138
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] }))),
|
|
138
139
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: "white" }), jsx("path", { d: "M12 6v2M12 16v2M6 12h2M16 12h2", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
|
|
139
140
|
},
|
|
140
141
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
-
import { within, detailColor } from '../iconParts.js';
|
|
3
|
+
import { swapDuotone, within, detailColor } from '../iconParts.js';
|
|
4
4
|
|
|
5
5
|
/** The magnifier's lens (r 8 about 11,11) and its handle. */
|
|
6
6
|
const LENS = 'M11 19a8 8 0 100-16 8 8 0 000 16z';
|
|
@@ -8,7 +8,8 @@ const LENS_HANDLE = 'M21 21l-4.35-4.35';
|
|
|
8
8
|
/**
|
|
9
9
|
* The magnifier of NtdSearch, NtdZoomIn and NtdZoomOut, so the three share one lens and handle;
|
|
10
10
|
* `glyph` is drawn inside the lens. A line glyph: twice the stroke width in every variant but
|
|
11
|
-
* `outline`. Duotone
|
|
11
|
+
* `outline`. Duotone and vivid draw the handle and the glyph in secondary; duotone fills the lens
|
|
12
|
+
* primary under them (1.3.8: the larger area primary — it was a secondary tint under primary lines).
|
|
12
13
|
*/
|
|
13
14
|
function lensIcon(displayName, glyph = '') {
|
|
14
15
|
return createIcon({
|
|
@@ -16,7 +17,7 @@ function lensIcon(displayName, glyph = '') {
|
|
|
16
17
|
paths: {
|
|
17
18
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
|
|
18
19
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${LENS_HANDLE}${LENS}${glyph}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
19
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
20
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: LENS, fill: primaryColor, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: `${LENS_HANDLE}${glyph}`, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
20
21
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: LENS, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: `${LENS_HANDLE}${glyph}`, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
21
22
|
},
|
|
22
23
|
});
|
|
@@ -30,7 +31,6 @@ const NtdEdit = /* @__PURE__ */ createIcon({
|
|
|
30
31
|
// round caps stuck out of both sides).
|
|
31
32
|
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_PENCIL }), jsx("path", { d: "M15 5l4 4", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }))] })),
|
|
32
33
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M15 5l4 4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
33
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M15 5l4 4", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
34
34
|
vivid: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_PENCIL, fill: primaryColor }), jsx("path", { d: EDIT_PENCIL, fill: "white", opacity: "0.1" }), within(uid, 'band', jsx("path", { d: EDIT_PENCIL }), jsx("path", { d: "M15 5l4 4", stroke: secondaryColor, strokeWidth: "1.8" }))] })),
|
|
35
35
|
},
|
|
36
36
|
});
|
|
@@ -45,24 +45,22 @@ const NtdEditDetail = /* @__PURE__ */ createIcon({
|
|
|
45
45
|
paths: {
|
|
46
46
|
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_DETAIL_PENCIL }), jsx("path", { d: EDIT_DETAIL_BAND, stroke: accentColor, strokeWidth: "1.1", opacity: accentOpacity }))] })),
|
|
47
47
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
48
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: EDIT_DETAIL_FRAME, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: EDIT_DETAIL_PENCIL, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
49
48
|
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: EDIT_DETAIL_FRAME, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: EDIT_DETAIL_PENCIL, fill: primaryColor }), within(uid, 'band', jsx("path", { d: EDIT_DETAIL_PENCIL }), jsx("path", { d: EDIT_DETAIL_BAND, stroke: secondaryColor, strokeWidth: "1.3" }))] })),
|
|
50
49
|
},
|
|
51
50
|
});
|
|
52
51
|
// NtdTrash: the lid overhangs the bin by 1 a side (16 across; it was 18) and the handle is 6 by 3
|
|
53
|
-
// (it was 8 by 4).
|
|
54
|
-
// #3B82F6).
|
|
55
|
-
const TRASH_LID = 'M4
|
|
52
|
+
// (it was 8 by 4). The lid is flat with its ends bent down, as round as the bin's bottom corners
|
|
53
|
+
// (r 2). Vivid: the lid and the handle secondary, the grooves accent (they were a fixed #3B82F6).
|
|
54
|
+
const TRASH_LID = 'M4 8a2 2 0 012-2h12a2 2 0 012 2';
|
|
56
55
|
const TRASH_HANDLE = 'M9 6V4.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5V6';
|
|
57
56
|
const TRASH_BIN = 'M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z';
|
|
58
57
|
const TRASH_GROOVES = 'M10 10.5v7M14 10.5v7';
|
|
59
58
|
const NtdTrash = /* @__PURE__ */ createIcon({
|
|
60
59
|
displayName: 'NtdTrash',
|
|
61
60
|
paths: {
|
|
62
|
-
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
|
|
63
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
64
|
-
|
|
65
|
-
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsx("path", { d: TRASH_LID, stroke: secondaryColor, strokeWidth: strokeWidth }), jsx("path", { d: TRASH_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
|
|
61
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity }), jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
|
|
62
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
63
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsx("path", { d: TRASH_LID, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: TRASH_GROOVES, stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
|
|
66
64
|
},
|
|
67
65
|
});
|
|
68
66
|
// NtdSave: a 3.5" floppy — the clipped corner, a wide metal shutter at the top edge with its
|
|
@@ -94,8 +92,9 @@ const NtdDownload = /* @__PURE__ */ createIcon({
|
|
|
94
92
|
paths: {
|
|
95
93
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
|
|
96
94
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth })),
|
|
97
|
-
// the
|
|
98
|
-
|
|
95
|
+
// the tray primary, the arrow secondary — a colour split, no filled tray (swapped in 1.3.8:
|
|
96
|
+
// the larger part primary)
|
|
97
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] }))),
|
|
99
98
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M7 10l5 5 5-5M12 13V3", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
100
99
|
},
|
|
101
100
|
});
|
|
@@ -104,8 +103,8 @@ const NtdUpload = /* @__PURE__ */ createIcon({
|
|
|
104
103
|
paths: {
|
|
105
104
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
|
|
106
105
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth })),
|
|
107
|
-
// as NtdDownload: the
|
|
108
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
106
|
+
// as NtdDownload: the tray primary, the arrow secondary
|
|
107
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] }))),
|
|
109
108
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: TRAY, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M17 8l-5-5-5 5M12 5v10", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
110
109
|
},
|
|
111
110
|
});
|
|
@@ -160,10 +159,12 @@ const NtdCopy = /* @__PURE__ */ createIcon({
|
|
|
160
159
|
const CLIPBOARD_TEXT = 'M8 11h8M8 14.5h5';
|
|
161
160
|
const NtdClipboard = /* @__PURE__ */ createIcon({
|
|
162
161
|
displayName: 'NtdClipboard',
|
|
162
|
+
perfectStackX: 12,
|
|
163
|
+
perfectStackY: 12.5,
|
|
164
|
+
perfectStackSize: 0.5,
|
|
163
165
|
paths: {
|
|
164
166
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", fill: primaryColor }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: primaryColor, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }), jsx("path", { d: CLIPBOARD_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
|
|
165
167
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLIPBOARD_TEXT, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
166
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "4", width: "16", height: "18", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLIPBOARD_TEXT, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
167
168
|
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2", fill: primaryColor }), jsx("rect", { x: "8", y: "2", width: "8", height: "3.5", rx: "1.5", fill: secondaryColor, stroke: secondaryColor, strokeWidth: "1.5" }), jsx("path", { d: CLIPBOARD_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
|
|
168
169
|
},
|
|
169
170
|
});
|
|
@@ -185,7 +186,7 @@ const NtdMinus = /* @__PURE__ */ createIcon({
|
|
|
185
186
|
paths: {
|
|
186
187
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
|
|
187
188
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth })),
|
|
188
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 12h8", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
189
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M8 12h8", stroke: primaryColor, strokeWidth: strokeWidth })] }))),
|
|
189
190
|
vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M5 12h14", stroke: primaryColor, strokeWidth: strokeWidth * 2 }) })),
|
|
190
191
|
},
|
|
191
192
|
});
|
|
@@ -203,7 +204,7 @@ const NtdFilter = /* @__PURE__ */ createIcon({
|
|
|
203
204
|
paths: {
|
|
204
205
|
solid: ({ primaryColor }) => jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", fill: primaryColor }),
|
|
205
206
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
206
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
207
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] }))),
|
|
207
208
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", fill: primaryColor }), jsx("path", { d: "M21 4H3l7 8.5v4.5l4 2.5v-7L21 4z", fill: "white", opacity: "0.1" })] })),
|
|
208
209
|
},
|
|
209
210
|
});
|
|
@@ -212,7 +213,7 @@ const NtdSort = /* @__PURE__ */ createIcon({
|
|
|
212
213
|
paths: {
|
|
213
214
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "5", width: "16", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "4", y: "11", width: "11", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "4", y: "17", width: "6", height: "2", rx: "1", fill: primaryColor })] })),
|
|
214
215
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "12", x2: "15", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "18", x2: "10", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
215
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "12", x2: "15", y2: "12", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.3 }), jsx("line", { x1: "4", y1: "18", x2: "10", y2: "18", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity })] })),
|
|
216
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "4", y1: "12", x2: "15", y2: "12", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.3 }), jsx("line", { x1: "4", y1: "18", x2: "10", y2: "18", stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity })] }))),
|
|
216
217
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "4", y: "5", width: "16", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "4", y: "5", width: "16", height: "2", rx: "1", fill: "white", opacity: "0.08" }), jsx("rect", { x: "4", y: "11", width: "11", height: "2", rx: "1", fill: secondaryColor }), jsx("rect", { x: "4", y: "17", width: "6", height: "2", rx: "1", fill: "#3B82F6" })] })),
|
|
217
218
|
},
|
|
218
219
|
});
|
|
@@ -221,7 +222,6 @@ const NtdPrint = /* @__PURE__ */ createIcon({
|
|
|
221
222
|
paths: {
|
|
222
223
|
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 9h16a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2z", fill: primaryColor }), jsx("path", { d: "M6 9V3h12v6", stroke: primaryColor, strokeWidth: strokeWidth, fill: accentColor, opacity: accentOpacity * 0.5 }), jsx("rect", { x: "6", y: "15", width: "12", height: "7", rx: "1", fill: accentColor, opacity: accentOpacity }), jsx("line", { x1: "9", y1: "18", x2: "15", y2: "18", stroke: primaryColor, strokeWidth: "1", opacity: "0.15" })] })),
|
|
223
224
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 9V3h12v6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "15", width: "12", height: "7", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
224
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "9", width: "20", height: "9", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M6 9V3h12v6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "6", y: "15", width: "12", height: "7", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
225
225
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 9h16a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2z", fill: primaryColor }), jsx("path", { d: "M4 9h16a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2z", fill: "white", opacity: "0.08" }), jsx("path", { d: "M6 9V3h12v6", stroke: secondaryColor, strokeWidth: "2", fill: secondaryColor }), jsx("rect", { x: "6", y: "15", width: "12", height: "7", rx: "1", fill: "#3B82F6" }), jsx("line", { x1: "9", y1: "18", x2: "15", y2: "18", stroke: "white", strokeWidth: "1", opacity: "0.35" })] })),
|
|
226
226
|
},
|
|
227
227
|
});
|
|
@@ -241,11 +241,12 @@ const NtdUndo = /* @__PURE__ */ createIcon({
|
|
|
241
241
|
paths: {
|
|
242
242
|
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
|
|
243
243
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
244
|
-
// Two-tone by PART, not by a backing blob:
|
|
245
|
-
// secondary
|
|
244
|
+
// Two-tone by PART, not by a backing blob: the tail in primary, the arrowhead
|
|
245
|
+
// in secondary (swapped in 1.3.8: the larger part primary), both at full
|
|
246
|
+
// strength. (The old version put a secondary disc
|
|
246
247
|
// behind the curve, which read as "a ball in the middle"; a washed-out tail
|
|
247
248
|
// would likewise miss the point — this is a colour split, not an underlay.)
|
|
248
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
|
|
249
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] }))),
|
|
249
250
|
vivid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9.5 8.5H13.5a5.5 5.5 0 1 1 0 11H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9.5 4L5 8.5l4.5 4.5z", fill: primaryColor })] })),
|
|
250
251
|
},
|
|
251
252
|
});
|
|
@@ -254,8 +255,8 @@ const NtdRedo = /* @__PURE__ */ createIcon({
|
|
|
254
255
|
paths: {
|
|
255
256
|
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
|
|
256
257
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M19 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
257
|
-
// Mirror of NtdUndo:
|
|
258
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
|
|
258
|
+
// Mirror of NtdUndo: tail primary, arrowhead secondary — no backing disc.
|
|
259
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] }))),
|
|
259
260
|
vivid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14.5 8.5H10.5a5.5 5.5 0 1 0 0 11H15", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M14.5 4L19 8.5l-4.5 4.5z", fill: primaryColor })] })),
|
|
260
261
|
},
|
|
261
262
|
});
|
|
@@ -276,8 +277,8 @@ const NtdLink = /* @__PURE__ */ createIcon({
|
|
|
276
277
|
paths: {
|
|
277
278
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
|
|
278
279
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
279
|
-
// one ring per colour: the
|
|
280
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
280
|
+
// one ring per colour: the left link primary, the right one secondary (swapped in 1.3.8)
|
|
281
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] }))),
|
|
281
282
|
vivid: ({ primaryColor, strokeWidth }) => (jsx(Fragment, { children: jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }) })),
|
|
282
283
|
},
|
|
283
284
|
});
|
|
@@ -295,20 +296,21 @@ const NtdSettings = /* @__PURE__ */ createIcon({
|
|
|
295
296
|
solid: ({ primaryColor }) => (jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })),
|
|
296
297
|
rounded: ({ primaryColor }) => (jsx("path", { d: `${GEAR_ROUND}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })),
|
|
297
298
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${GEAR}M12 9a3 3 0 100 6 3 3 0 100-6z`, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })),
|
|
298
|
-
// fills only: the gear
|
|
299
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: `${GEAR_HUB}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })] })),
|
|
299
|
+
// fills only: the gear primary, its hub secondary (swapped in 1.3.8: the larger part primary)
|
|
300
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: `${GEAR_HUB}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor })] }))),
|
|
300
301
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: `${GEAR}${GEAR_HOLE}`, fillRule: "evenodd", fill: primaryColor }), jsx("path", { d: `${GEAR_HUB}${GEAR_HOLE}`, fillRule: "evenodd", fill: secondaryColor })] })),
|
|
301
302
|
},
|
|
302
303
|
});
|
|
303
304
|
// NtdLogIn / NtdLogOut: a line glyph, twice the stroke width in every variant but `outline`. The
|
|
304
305
|
// shaft stops 2 short of the arrowhead's point, so the square caps of `sharp` stay inside it.
|
|
305
|
-
//
|
|
306
|
+
// Vivid splits it like NtdDownload: the arrow primary, the door frame secondary; duotone the other
|
|
307
|
+
// way round, the larger frame primary (1.3.8).
|
|
306
308
|
const NtdLogIn = /* @__PURE__ */ createIcon({
|
|
307
309
|
displayName: 'NtdLogIn',
|
|
308
310
|
paths: {
|
|
309
311
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
|
|
310
312
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M9 7l5 5-5 5M14 12H3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
311
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
313
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] }))),
|
|
312
314
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M9 7l5 5-5 5M12 12H3", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
313
315
|
},
|
|
314
316
|
});
|
|
@@ -317,16 +319,18 @@ const NtdLogOut = /* @__PURE__ */ createIcon({
|
|
|
317
319
|
paths: {
|
|
318
320
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
|
|
319
321
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M15 7l5 5-5 5M20 12H9", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
320
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
322
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] }))),
|
|
321
323
|
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M15 7l5 5-5 5M18 12H9", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
322
324
|
},
|
|
323
325
|
});
|
|
324
326
|
const NtdLock = /* @__PURE__ */ createIcon({
|
|
325
327
|
displayName: 'NtdLock',
|
|
328
|
+
perfectStackX: 12,
|
|
329
|
+
perfectStackY: 16.5,
|
|
330
|
+
perfectStackSize: 0.35,
|
|
326
331
|
paths: {
|
|
327
332
|
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsx("path", { d: "M7 11V7a5 5 0 0110 0v4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: accentColor, opacity: accentOpacity }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: accentColor, opacity: accentOpacity })] })),
|
|
328
333
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M7 11V7a5 5 0 0110 0v4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: primaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: primaryColor })] })),
|
|
329
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M7 11V7a5 5 0 0110 0v4", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: primaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: primaryColor })] })),
|
|
330
334
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: secondaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: "#3B82F6" }), jsx("path", { d: "M7 11V7a5 5 0 0110 0v4", stroke: "white", strokeWidth: "1" })] })),
|
|
331
335
|
},
|
|
332
336
|
});
|
|
@@ -335,7 +339,6 @@ const NtdUnlock = /* @__PURE__ */ createIcon({
|
|
|
335
339
|
paths: {
|
|
336
340
|
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: accentColor, opacity: accentOpacity }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: accentColor, opacity: accentOpacity })] })),
|
|
337
341
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: primaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: primaryColor })] })),
|
|
338
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: primaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: primaryColor })] })),
|
|
339
342
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2.5", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "15.5", r: "1.5", fill: secondaryColor }), jsx("rect", { x: "11.25", y: "16.5", width: "1.5", height: "2", rx: "0.5", fill: "#3B82F6" }), jsx("path", { d: "M7 11V7a5 5 0 019.9-1", stroke: "white", strokeWidth: "1" })] })),
|
|
340
343
|
},
|
|
341
344
|
});
|
|
@@ -355,7 +358,7 @@ const NtdUngroup = /* @__PURE__ */ createIcon({
|
|
|
355
358
|
paths: {
|
|
356
359
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: primaryColor }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: primaryColor })] })),
|
|
357
360
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })),
|
|
358
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })] })),
|
|
361
|
+
duotone: swapDuotone(({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 3h8v8H3zM13 13h8v8h-8z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "round", fill: "none" })] }))),
|
|
359
362
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: primaryColor }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "1", fill: "white", opacity: "0.1" }), jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "1", fill: "white", opacity: "0.1" })] })),
|
|
360
363
|
},
|
|
361
364
|
});
|