@nice2dev/icons 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +83 -0
- package/dist/cjs/createIcon.js +0 -1
- package/dist/cjs/iconParts.js +33 -1
- package/dist/cjs/icons/actions.js +74 -61
- package/dist/cjs/icons/business.js +63 -27
- package/dist/cjs/icons/education.js +31 -11
- package/dist/cjs/icons/files.js +55 -17
- package/dist/cjs/icons/media.js +51 -20
- package/dist/cjs/icons/navigation.js +24 -7
- package/dist/cjs/icons/omniverk.js +2 -1
- package/dist/cjs/icons/realestate.js +45 -10
- package/dist/cjs/icons/science.js +10 -6
- package/dist/cjs/icons/shapes.js +30 -8
- package/dist/cjs/icons/social.js +3 -9
- package/dist/cjs/icons/travel.js +20 -4
- package/dist/cjs/icons/ui.js +41 -35
- package/dist/cjs/icons/weather.js +5 -4
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/createIcon.js +0 -1
- package/dist/esm/iconParts.js +33 -3
- package/dist/esm/icons/actions.js +76 -63
- package/dist/esm/icons/business.js +64 -28
- package/dist/esm/icons/education.js +31 -11
- package/dist/esm/icons/files.js +55 -17
- package/dist/esm/icons/media.js +51 -20
- package/dist/esm/icons/navigation.js +24 -7
- package/dist/esm/icons/omniverk.js +2 -1
- package/dist/esm/icons/realestate.js +45 -10
- package/dist/esm/icons/science.js +10 -6
- package/dist/esm/icons/shapes.js +30 -8
- package/dist/esm/icons/social.js +3 -9
- package/dist/esm/icons/travel.js +20 -4
- package/dist/esm/icons/ui.js +42 -36
- package/dist/esm/icons/weather.js +5 -4
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/iconParts.d.ts +13 -1
- package/dist/types/types.d.ts +4 -0
- package/package.json +2 -2
|
@@ -5,49 +5,64 @@ var createIcon = require('../createIcon.js');
|
|
|
5
5
|
var iconParts = require('../iconParts.js');
|
|
6
6
|
|
|
7
7
|
// The band sits halfway down the case and is a cut through it: kept inside the case it meets the
|
|
8
|
-
// sides flush (its round caps stuck out of both). A clasp hangs from its middle
|
|
8
|
+
// sides flush (its round caps stuck out of both). A clasp hangs from its middle: low and wide,
|
|
9
|
+
// secondary on the filled case (the accent colour in vivid, its third colour).
|
|
9
10
|
const BRIEFCASE_CASE = { x: 2, y: 7, width: 20, height: 14, rx: 2 };
|
|
10
11
|
const BRIEFCASE_HANDLE = 'M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2';
|
|
11
12
|
/** The clasp over the band, hanging down from it, with its slot (even-odd). */
|
|
12
|
-
const BRIEFCASE_CLASP = '
|
|
13
|
-
const BRIEFCASE_SLOT = 'M11.
|
|
13
|
+
const BRIEFCASE_CLASP = 'M10.6 11.3h2.8a.8.8 0 01.8.8v2.6a.8.8 0 01-.8.8h-2.8a.8.8 0 01-.8-.8v-2.6a.8.8 0 01.8-.8z';
|
|
14
|
+
const BRIEFCASE_SLOT = 'M11.2 13.2h1.6v.9h-1.6z';
|
|
14
15
|
const NtdBriefcase = /* @__PURE__ */ createIcon.createIcon({
|
|
15
16
|
displayName: 'NtdBriefcase',
|
|
16
17
|
paths: {
|
|
17
|
-
solid: (
|
|
18
|
+
solid: (props) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), iconParts.within(props.uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: props.accentColor, strokeWidth: "1.5", opacity: props.accentOpacity })), jsxRuntime.jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: iconParts.detailColor(props) })] })),
|
|
18
19
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: primaryColor, strokeWidth: "1.5" }), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: primaryColor })] })),
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
// fills only: the case and the handle primary, the band and the clasp secondary
|
|
21
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsxRuntime.jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: secondaryColor })] })),
|
|
22
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("line", { x1: "2", y1: "12.5", x2: "22", y2: "12.5", stroke: secondaryColor, strokeWidth: "1.5" })), jsxRuntime.jsx("path", { d: `${BRIEFCASE_CLASP}${BRIEFCASE_SLOT}`, fillRule: "evenodd", fill: accentColor, opacity: accentOpacity })] })),
|
|
21
23
|
},
|
|
22
24
|
});
|
|
25
|
+
// NtdDollar: a line glyph, twice the stroke width in every variant but `outline`; the stem runs
|
|
26
|
+
// 2.5 → 21.5 there, so its caps stay inside the box at that width.
|
|
27
|
+
const DOLLAR_S = 'M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6';
|
|
28
|
+
const DOLLAR_STEM = 'M12 2.5v19';
|
|
23
29
|
const NtdDollar = /* @__PURE__ */ createIcon.createIcon({
|
|
24
30
|
displayName: 'NtdDollar',
|
|
25
31
|
paths: {
|
|
26
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
27
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
28
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
29
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
32
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${DOLLAR_STEM}${DOLLAR_S}`, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })),
|
|
33
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `M12 1v22${DOLLAR_S}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
34
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: DOLLAR_S, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: DOLLAR_STEM, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
35
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: DOLLAR_S, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: DOLLAR_STEM, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
30
36
|
},
|
|
31
37
|
});
|
|
38
|
+
// NtdWallet: a body, the back pocket rising above it on a slant (it runs under the body, so the
|
|
39
|
+
// two meet without a seam — the old top stroke stopped short of the body), and a clasp pocket cut
|
|
40
|
+
// into the right side with its stud. Filled, the pocket is in the accent colour.
|
|
41
|
+
const WALLET_BODY = { x: 2, y: 6.5, width: 20, height: 14.5, rx: 2.5 };
|
|
42
|
+
const WALLET_BACK = 'M4.5 8L16 3.5a1 1 0 011.3.95V8z';
|
|
43
|
+
const WALLET_POCKET = 'M22 10.5h-4.5a2.5 2.5 0 000 5H22z';
|
|
44
|
+
const WALLET_POCKET_LINE = 'M22 10.5h-4.5a2.5 2.5 0 000 5H22';
|
|
32
45
|
const NtdWallet = /* @__PURE__ */ createIcon.createIcon({
|
|
33
46
|
displayName: 'NtdWallet',
|
|
34
47
|
paths: {
|
|
35
|
-
solid: ({ primaryColor, accentColor, accentOpacity,
|
|
36
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
37
|
-
|
|
38
|
-
|
|
48
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: WALLET_BACK, fill: primaryColor }), jsxRuntime.jsx("rect", { ...WALLET_BODY, fill: primaryColor }), iconParts.within(uid, 'pocket', jsxRuntime.jsx("rect", { ...WALLET_BODY }), jsxRuntime.jsx("path", { d: WALLET_POCKET, fill: accentColor, opacity: accentOpacity })), jsxRuntime.jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: primaryColor })] })),
|
|
49
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M4.5 6.5L16 3.5a1 1 0 011.3.95V6.5", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" }), jsxRuntime.jsx("rect", { ...WALLET_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: WALLET_POCKET_LINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: primaryColor })] })),
|
|
50
|
+
// fills only: the body primary, the back pocket and the clasp pocket secondary
|
|
51
|
+
duotone: ({ primaryColor, secondaryColor, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: WALLET_BACK, fill: secondaryColor }), jsxRuntime.jsx("rect", { ...WALLET_BODY, fill: primaryColor }), iconParts.within(uid, 'pocket', jsxRuntime.jsx("rect", { ...WALLET_BODY }), jsxRuntime.jsx("path", { d: WALLET_POCKET, fill: secondaryColor })), jsxRuntime.jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: primaryColor })] })),
|
|
52
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: WALLET_BACK, fill: secondaryColor }), jsxRuntime.jsx("rect", { ...WALLET_BODY, fill: primaryColor }), iconParts.within(uid, 'pocket', jsxRuntime.jsx("rect", { ...WALLET_BODY }), jsxRuntime.jsx("path", { d: WALLET_POCKET, fill: accentColor, opacity: accentOpacity })), jsxRuntime.jsx("circle", { cx: "17.6", cy: "13", r: "1.1", fill: secondaryColor })] })),
|
|
39
53
|
},
|
|
40
54
|
});
|
|
41
|
-
// NtdReceipt: two rows of description and amount, then the total on its own on the right.
|
|
55
|
+
// NtdReceipt: two rows of description and amount, then the total on its own on the right. The
|
|
56
|
+
// amounts end at 18.4, right by the edge; the descriptions run 7 → 13.5.
|
|
42
57
|
const RECEIPT = 'M4 2v20l3-2 3 2 3-2 3 2 3-2 3 2V2H4z';
|
|
43
|
-
const RECEIPT_TEXT = 'M7
|
|
58
|
+
const RECEIPT_TEXT = 'M7 7.5h6.5M16.4 7.5h2M7 11.5h6.5M16.4 11.5h2M14.4 15.5h4';
|
|
44
59
|
const NtdReceipt = /* @__PURE__ */ createIcon.createIcon({
|
|
45
60
|
displayName: 'NtdReceipt',
|
|
46
61
|
paths: {
|
|
47
62
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: RECEIPT, fill: primaryColor }), jsxRuntime.jsx("path", { d: RECEIPT_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity, fill: "none" })] })),
|
|
48
63
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: RECEIPT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: RECEIPT_TEXT, stroke: primaryColor, strokeWidth: "1.5", fill: "none" })] })),
|
|
49
64
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: RECEIPT, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: RECEIPT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: RECEIPT_TEXT, stroke: primaryColor, strokeWidth: "1.5", fill: "none" })] })),
|
|
50
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: RECEIPT, fill: primaryColor }), jsxRuntime.jsx("path", { d:
|
|
65
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: RECEIPT, fill: primaryColor }), jsxRuntime.jsx("path", { d: RECEIPT_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity, fill: "none" }), jsxRuntime.jsx("path", { d: "M14.4 15.5h4", stroke: secondaryColor, strokeWidth: "1.8" })] })),
|
|
51
66
|
},
|
|
52
67
|
});
|
|
53
68
|
const NtdBank = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -59,22 +74,43 @@ const NtdBank = /* @__PURE__ */ createIcon.createIcon({
|
|
|
59
74
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polygon", { points: "12,2 2,9 22,9", fill: primaryColor }), jsxRuntime.jsx("polygon", { points: "12,2 2,9 22,9", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("rect", { x: "2", y: "18", width: "20", height: "2", rx: "0.5", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "5", y: "9", width: "2", height: "9", fill: "#3B82F6" }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "2", height: "9", fill: "#10B981" }), jsxRuntime.jsx("rect", { x: "13", y: "9", width: "2", height: "9", fill: "#F59E0B" }), jsxRuntime.jsx("rect", { x: "17", y: "9", width: "2", height: "9", fill: "#F59E0B" })] })),
|
|
60
75
|
},
|
|
61
76
|
});
|
|
77
|
+
// NtdTrendUp / NtdTrendDown: line glyphs, twice the stroke width in every variant but `outline`,
|
|
78
|
+
// drawn 2 in from the box at that width. The line's last leg stops 0.35 × the line width short of
|
|
79
|
+
// the head's corner on each axis — run into the corner, its square cap stuck out in `sharp`.
|
|
80
|
+
function trendUp(back) {
|
|
81
|
+
return { line: `M3 16l5-5 4 4L${21 - back} ${6 + back}`, head: 'M15 6h6v6' };
|
|
82
|
+
}
|
|
83
|
+
function trendDown(back) {
|
|
84
|
+
return { line: `M3 8l5 5 4-4L${21 - back} ${18 - back}`, head: 'M15 18h6v-6' };
|
|
85
|
+
}
|
|
86
|
+
function trendArrow(shape, line, head, strokeWidth) {
|
|
87
|
+
const width = strokeWidth * 2;
|
|
88
|
+
const s = shape(width * 0.35);
|
|
89
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: s.line, stroke: line, strokeWidth: width, fill: "none" }), jsxRuntime.jsx("path", { d: s.head, stroke: head, strokeWidth: width, fill: "none" })] }));
|
|
90
|
+
}
|
|
91
|
+
function trendOutline(shape) {
|
|
92
|
+
return ({ primaryColor, strokeWidth }) => {
|
|
93
|
+
const s = shape(0);
|
|
94
|
+
return (jsxRuntime.jsx("path", { d: `${s.line}${s.head}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }));
|
|
95
|
+
};
|
|
96
|
+
}
|
|
62
97
|
const NtdTrendUp = /* @__PURE__ */ createIcon.createIcon({
|
|
63
98
|
displayName: 'NtdTrendUp',
|
|
64
99
|
paths: {
|
|
65
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
66
|
-
outline: (
|
|
67
|
-
|
|
68
|
-
|
|
100
|
+
solid: ({ primaryColor, strokeWidth }) => trendArrow(trendUp, primaryColor, primaryColor, strokeWidth),
|
|
101
|
+
outline: trendOutline(trendUp),
|
|
102
|
+
// the line secondary, the head primary
|
|
103
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendUp, secondaryColor, primaryColor, strokeWidth),
|
|
104
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendUp, primaryColor, secondaryColor, strokeWidth),
|
|
69
105
|
},
|
|
70
106
|
});
|
|
71
107
|
const NtdTrendDown = /* @__PURE__ */ createIcon.createIcon({
|
|
72
108
|
displayName: 'NtdTrendDown',
|
|
73
109
|
paths: {
|
|
74
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
75
|
-
outline: (
|
|
76
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
77
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
110
|
+
solid: ({ primaryColor, strokeWidth }) => trendArrow(trendDown, primaryColor, primaryColor, strokeWidth),
|
|
111
|
+
outline: trendOutline(trendDown),
|
|
112
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendDown, secondaryColor, primaryColor, strokeWidth),
|
|
113
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => trendArrow(trendDown, primaryColor, secondaryColor, strokeWidth),
|
|
78
114
|
},
|
|
79
115
|
});
|
|
80
116
|
// NtdPercent: the dots are rings in every variant, a hole in each (they were plain discs when
|
|
@@ -91,8 +127,8 @@ const NtdPercent = /* @__PURE__ */ createIcon.createIcon({
|
|
|
91
127
|
},
|
|
92
128
|
});
|
|
93
129
|
// NtdInvoice: NtdFile's page with a short title, two rows of item and amount, and the total on
|
|
94
|
-
// its own at the bottom right, as on a receipt.
|
|
95
|
-
const NtdInvoice = /* @__PURE__ */ iconParts.paperIcon('NtdInvoice', 'M7
|
|
130
|
+
// its own at the bottom right, as on a receipt: the items from 7 to 11.5, the amounts out to 17.
|
|
131
|
+
const NtdInvoice = /* @__PURE__ */ iconParts.paperIcon('NtdInvoice', 'M7 7h3M7 12.5h4.5M14.3 12.5h2.7M7 15.5h4.5M14.3 15.5h2.7M13 19h4');
|
|
96
132
|
/** @deprecated A second invoice next to {@link NtdInvoice} — use that. */
|
|
97
133
|
const NtdInvoiceDoc = NtdInvoice;
|
|
98
134
|
const NtdStore = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -46,12 +46,14 @@ const NtdUniversity = /* @__PURE__ */ createIcon.createIcon({
|
|
|
46
46
|
LEARNING TOOLS
|
|
47
47
|
───────────────────────────────────────────────────────────────────────────── */
|
|
48
48
|
// NtdBook: a closed book, not a page — the rounded spine on the left, the block of pages showing
|
|
49
|
-
// at the bottom between the front cover and the line of the back cover
|
|
50
|
-
//
|
|
49
|
+
// at the bottom between the front cover and the line of the back cover. Down the right edge it is
|
|
50
|
+
// cover, then the pages set in 2.5 from that edge (the cover showing beside them), then cover
|
|
51
|
+
// again; the outline marks where the pages end with a line. The cover is plain, so another glyph
|
|
52
|
+
// can sit on it; NtdBookBookmark adds a ribbon.
|
|
51
53
|
const BOOK_SILHOUETTE = 'M7 2h12a1 1 0 011 1v17a1 1 0 01-1 1H7a2.5 2.5 0 01-2.5-2.5v-14A2.5 2.5 0 017 2z';
|
|
52
|
-
const BOOK_PAGES = '
|
|
54
|
+
const BOOK_PAGES = 'M6.6 17.6h10.9v2.3H6.6a1.15 1.15 0 010-2.3z';
|
|
53
55
|
const BOOK_RIBBON = 'M9.5 2v6.5l1.75-1.3L13 8.5V2z';
|
|
54
|
-
const BOOK_OUTLINE = 'M4.5 18.5v-14A2.5 2.5 0 017 2h12a1 1 0 011 1v17a1 1 0 01-1 1H7a2.5 2.5 0 010-
|
|
56
|
+
const BOOK_OUTLINE = 'M4.5 18.5v-14A2.5 2.5 0 017 2h12a1 1 0 011 1v17a1 1 0 01-1 1H7a2.5 2.5 0 010-5h13M17.5 16v5';
|
|
55
57
|
/** The book, with the ribbon bookmark or without it. */
|
|
56
58
|
function bookIcon(displayName, ribbon) {
|
|
57
59
|
return createIcon.createIcon({
|
|
@@ -60,7 +62,7 @@ function bookIcon(displayName, ribbon) {
|
|
|
60
62
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: BOOK_PAGES }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON })] })] })),
|
|
61
63
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && (jsxRuntime.jsx("path", { d: "M9.5 2.5v6l1.75-1.3L13 8.5v-6", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }))] })),
|
|
62
64
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
|
|
63
|
-
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsx("path", { d:
|
|
65
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BOOK_PAGES, fill: accentColor, opacity: accentOpacity }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: secondaryColor })] })),
|
|
64
66
|
},
|
|
65
67
|
});
|
|
66
68
|
}
|
|
@@ -75,13 +77,20 @@ const NtdOpenBook = /* @__PURE__ */ createIcon.createIcon({
|
|
|
75
77
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M2 4a2 2 0 012-2h6a2 2 0 012 2v16l-1-1-3 2-3-2-1 1V4z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M2 4a2 2 0 012-2h6a2 2 0 012 2v16l-1-1-3 2-3-2-1 1V4z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("path", { d: "M22 4a2 2 0 00-2-2h-6a2 2 0 00-2 2v16l1-1 3 2 3-2 1 1V4z", fill: secondaryColor, opacity: "0.6" })] })),
|
|
76
78
|
},
|
|
77
79
|
});
|
|
80
|
+
// NtdNotebook: a cover with short binder rings across its left edge (they stuck out further) and
|
|
81
|
+
// three lines of writing — in the accent colour when filled, as the outline draws them. Duotone,
|
|
82
|
+
// fills only: the cover primary, the rings and the writing secondary; vivid: the rings secondary,
|
|
83
|
+
// the writing in the accent colour.
|
|
84
|
+
const NOTEBOOK_COVER = { x: 5, y: 2, width: 15, height: 20, rx: 2 };
|
|
85
|
+
const NOTEBOOK_RINGS = 'M3.5 6h3M3.5 10h3M3.5 14h3M3.5 18h3';
|
|
86
|
+
const NOTEBOOK_TEXT = 'M9 7h7M9 11h7M9 15h4';
|
|
78
87
|
const NtdNotebook = /* @__PURE__ */ createIcon.createIcon({
|
|
79
88
|
displayName: 'NtdNotebook',
|
|
80
89
|
paths: {
|
|
81
|
-
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
82
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", {
|
|
83
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
84
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
90
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...NOTEBOOK_COVER, fill: primaryColor }), jsxRuntime.jsx("path", { d: NOTEBOOK_RINGS, stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: NOTEBOOK_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
|
|
91
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...NOTEBOOK_COVER, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: `${NOTEBOOK_RINGS}${NOTEBOOK_TEXT}`, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
92
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...NOTEBOOK_COVER, fill: primaryColor }), jsxRuntime.jsx("path", { d: NOTEBOOK_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: NOTEBOOK_TEXT, stroke: secondaryColor, strokeWidth: "1.5" })] })),
|
|
93
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...NOTEBOOK_COVER, fill: primaryColor }), jsxRuntime.jsx("path", { d: NOTEBOOK_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: NOTEBOOK_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
|
|
85
94
|
},
|
|
86
95
|
});
|
|
87
96
|
const NtdPencil = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -171,13 +180,24 @@ const NtdBackpack = /* @__PURE__ */ createIcon.createIcon({
|
|
|
171
180
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M6 8a4 4 0 014-4h4a4 4 0 014 4v12a2 2 0 01-2 2H8a2 2 0 01-2-2V8z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M6 8a4 4 0 014-4h4a4 4 0 014 4v12a2 2 0 01-2 2H8a2 2 0 01-2-2V8z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("rect", { x: "8", y: "12", width: "8", height: "5", rx: "1", fill: "white" }), jsxRuntime.jsx("path", { d: "M9 4V3a3 3 0 016 0v1", stroke: "white", strokeWidth: "1" }), jsxRuntime.jsx("path", { d: "M10 14h4", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
|
|
172
181
|
},
|
|
173
182
|
});
|
|
183
|
+
// NtdCalculator (NtdCalculatorEdu): filled, the display and the outlines of the keys are in the
|
|
184
|
+
// accent colour — they were a fixed white. Vivid has the display in secondary.
|
|
185
|
+
const CALC_BODY = { x: 4, y: 2, width: 16, height: 20, rx: 2 };
|
|
186
|
+
const CALC_DISPLAY = { x: 6.5, y: 4.5, width: 11, height: 4.5, rx: 1 };
|
|
187
|
+
/** Three rows of keys, the last one with a wide "=" key. */
|
|
188
|
+
const CALC_KEYS = 'M6.6 11.2h2.6v2.2H6.6zM10.7 11.2h2.6v2.2h-2.6zM14.8 11.2h2.6v2.2h-2.6z' +
|
|
189
|
+
'M6.6 14.6h2.6v2.2H6.6zM10.7 14.6h2.6v2.2h-2.6zM14.8 14.6h2.6v2.2h-2.6z' +
|
|
190
|
+
'M6.6 18h2.6v2.2H6.6zM10.7 18h6.7v2.2h-6.7z';
|
|
191
|
+
function calculatorFilled({ primaryColor, accentColor, accentOpacity }, display, displayOpacity) {
|
|
192
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...CALC_BODY, fill: primaryColor }), jsxRuntime.jsx("rect", { ...CALC_DISPLAY, fill: display, opacity: displayOpacity }), jsxRuntime.jsx("path", { d: CALC_KEYS, stroke: accentColor, strokeWidth: "1.1", strokeLinejoin: "miter", opacity: accentOpacity, fill: "none" })] }));
|
|
193
|
+
}
|
|
174
194
|
const NtdCalculator = /* @__PURE__ */ createIcon.createIcon({
|
|
175
195
|
displayName: 'NtdCalculator',
|
|
176
196
|
paths: {
|
|
177
|
-
solid: (
|
|
197
|
+
solid: (props) => calculatorFilled(props, props.accentColor, props.accentOpacity),
|
|
178
198
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "6", y: "4", width: "12", height: "5", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "8", cy: "12", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "16", cy: "12", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "8", cy: "16", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "8", cy: "20", r: "1", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "11", y: "19", width: "6", height: "2", rx: "0.5", fill: primaryColor })] })),
|
|
179
199
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "6", y: "4", width: "12", height: "5", rx: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "8", cy: "12", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "16", cy: "12", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "8", cy: "16", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "1", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "1", fill: primaryColor })] })),
|
|
180
|
-
vivid: (
|
|
200
|
+
vivid: (props) => calculatorFilled(props, props.secondaryColor, 1),
|
|
181
201
|
},
|
|
182
202
|
});
|
|
183
203
|
/* ────────────────────────────────────────────────────────────────────────────
|
package/dist/cjs/icons/files.js
CHANGED
|
@@ -10,13 +10,17 @@ var iconParts = require('../iconParts.js');
|
|
|
10
10
|
const NtdFile = /* @__PURE__ */ iconParts.paperIcon('NtdFile');
|
|
11
11
|
const NtdFileText = /* @__PURE__ */ iconParts.paperIcon('NtdFileText', 'M7.5 9.5h3M7.5 13.5h9M7.5 17.5h9');
|
|
12
12
|
// The folder tab runs 2 → 11 before its slope (2 → 9 before), in NtdFolder and NtdFolderOpen.
|
|
13
|
+
const FOLDER_TAB = 'M2 7V5a2 2 0 012-2h7l2.67 4z';
|
|
14
|
+
const FOLDER_FRONT = 'M2 6h18a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2z';
|
|
13
15
|
const NtdFolder = /* @__PURE__ */ createIcon.createIcon({
|
|
14
16
|
displayName: 'NtdFolder',
|
|
15
17
|
paths: {
|
|
16
18
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h7l2 3h7a2 2 0 012 2v11z", fill: primaryColor })),
|
|
17
19
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h7l2 3h7a2 2 0 012 2v11z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
// fills only: the folder primary, its tab secondary (the tab reaches 1 under the front, so
|
|
21
|
+
// the two meet without a seam)
|
|
22
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FOLDER_TAB, fill: secondaryColor }), jsxRuntime.jsx("path", { d: FOLDER_FRONT, fill: primaryColor })] })),
|
|
23
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: FOLDER_TAB, fill: secondaryColor }), jsxRuntime.jsx("path", { d: FOLDER_FRONT, fill: primaryColor })] })),
|
|
20
24
|
},
|
|
21
25
|
});
|
|
22
26
|
const NtdFolderOpen = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -43,12 +47,19 @@ const NtdArchive = /* @__PURE__ */ createIcon.createIcon({
|
|
|
43
47
|
// discs are bands between two parallel arcs, 1.3 high everywhere and cut square at the sides — a
|
|
44
48
|
// stroked arc clipped to the body thinned to a wedge along the sides.
|
|
45
49
|
const DB_SILHOUETTE = 'M4 5.5v13a8 2.6 0 0016 0v-13a8 2.6 0 00-16 0z';
|
|
46
|
-
|
|
50
|
+
// The three discs are equally tall (3.47 between the gaps): centred on the outline's thirds, the
|
|
51
|
+
// gaps took from both sides of the middle disc and left it 0.65 shorter than the others.
|
|
52
|
+
const DB_GAPS = 'M4 8.967a8 2.6 0 0016 0v1.3a8 2.6 0 01-16 0zM4 13.733a8 2.6 0 0016 0v1.3a8 2.6 0 01-16 0z';
|
|
53
|
+
function databaseLines({ primaryColor, strokeWidth }) {
|
|
54
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ellipse", { cx: "12", cy: "5.5", rx: "8", ry: "2.6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 5.5v13a8 2.6 0 0016 0v-13M4 9.83a8 2.6 0 0016 0M4 14.17a8 2.6 0 0016 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] }));
|
|
55
|
+
}
|
|
47
56
|
const NtdDatabase = /* @__PURE__ */ createIcon.createIcon({
|
|
48
57
|
displayName: 'NtdDatabase',
|
|
49
58
|
paths: {
|
|
50
|
-
|
|
51
|
-
|
|
59
|
+
// `wireframe` re-draws this layer as thin lines: from the bands it drew each gap as two arcs
|
|
60
|
+
// and lost the cap's front edge, so it gets the outline's construction instead
|
|
61
|
+
solid: (props) => props.variant === 'wireframe' ? (databaseLines(props)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: DB_SILHOUETTE, fill: props.primaryColor }), jsxRuntime.jsx("path", { d: DB_GAPS, fill: props.accentColor, opacity: props.accentOpacity })] })),
|
|
62
|
+
outline: databaseLines,
|
|
52
63
|
// one tint for the cap and the body: the cap in full secondary read as a separate disc
|
|
53
64
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: DB_SILHOUETTE, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "5.5", rx: "8", ry: "2.6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 5.5v13a8 2.6 0 0016 0v-13M4 9.83a8 2.6 0 0016 0M4 14.17a8 2.6 0 0016 0", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
54
65
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: DB_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "5.5", rx: "8", ry: "2.6", fill: "white", opacity: "0.25" }), jsxRuntime.jsx("path", { d: DB_GAPS, fill: secondaryColor })] })),
|
|
@@ -111,13 +122,17 @@ const NtdGit = /* @__PURE__ */ createIcon.createIcon({
|
|
|
111
122
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "18", r: "3", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "18", r: "3", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "3", fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "18", cy: "6", r: "3", fill: "#3B82F6" }), jsxRuntime.jsx("line", { x1: "6", y1: "9", x2: "6", y2: "12", stroke: "white", strokeWidth: "1" }), jsxRuntime.jsx("path", { d: "M18 9v1a2 2 0 01-2 2H8a2 2 0 00-2 2v1", stroke: "white", strokeWidth: "1" }), jsxRuntime.jsx("line", { x1: "12", y1: "12", x2: "12", y2: "15", stroke: "white", strokeWidth: "1" })] })),
|
|
112
123
|
},
|
|
113
124
|
});
|
|
125
|
+
// NtdPackage: filled, the walls are primary and their edges (and the tape) cuts in the accent
|
|
126
|
+
// colour, kept inside the box — the walls were a fixed 15% tint.
|
|
127
|
+
const PACKAGE_BOX = 'M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z';
|
|
128
|
+
const PACKAGE_EDGES = 'M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12M16.5 9.4l-9-5.19';
|
|
114
129
|
const NtdPackage = /* @__PURE__ */ createIcon.createIcon({
|
|
115
130
|
displayName: 'NtdPackage',
|
|
116
131
|
paths: {
|
|
117
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
132
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PACKAGE_BOX, fill: primaryColor }), iconParts.within(uid, 'edges', jsxRuntime.jsx("path", { d: PACKAGE_BOX }), jsxRuntime.jsx("path", { d: PACKAGE_EDGES, stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] })),
|
|
118
133
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M16.5 9.4l-9-5.19M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
119
134
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 12.01l8.73-5.05L21 8v8a2 2 0 01-1 1.73l-7 4a2 2 0 01-1 .35V12.01z", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
120
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
135
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PACKAGE_BOX, fill: primaryColor }), iconParts.within(uid, 'edges', jsxRuntime.jsx("path", { d: PACKAGE_BOX }), jsxRuntime.jsx("path", { d: PACKAGE_EDGES, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
121
136
|
},
|
|
122
137
|
});
|
|
123
138
|
const NtdLayers = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -138,13 +153,20 @@ const NtdGrid = /* @__PURE__ */ createIcon.createIcon({
|
|
|
138
153
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", fill: "#3B82F6" }), jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: "#F59E0B" })] })),
|
|
139
154
|
},
|
|
140
155
|
});
|
|
156
|
+
// NtdList: in every variant but `outline` the lines are 1.5 × the stroke width and the dots r 2.25
|
|
157
|
+
// — half again as heavy as they were; the lines start at 9 to keep clear of the bigger dots.
|
|
158
|
+
// Duotone and vivid: the lines primary, the dots secondary.
|
|
159
|
+
const LIST_LINES = 'M9 6h12M9 12h12M9 18h12';
|
|
160
|
+
function listFilled(lines, dots, strokeWidth) {
|
|
161
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LIST_LINES, stroke: lines, strokeWidth: strokeWidth * 1.5 }), jsxRuntime.jsxs("g", { fill: dots, children: [jsxRuntime.jsx("circle", { cx: "3.75", cy: "6", r: "2.25" }), jsxRuntime.jsx("circle", { cx: "3.75", cy: "12", r: "2.25" }), jsxRuntime.jsx("circle", { cx: "3.75", cy: "18", r: "2.25" })] })] }));
|
|
162
|
+
}
|
|
141
163
|
const NtdList = /* @__PURE__ */ createIcon.createIcon({
|
|
142
164
|
displayName: 'NtdList',
|
|
143
165
|
paths: {
|
|
144
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
166
|
+
solid: ({ primaryColor, strokeWidth }) => listFilled(primaryColor, primaryColor, strokeWidth),
|
|
145
167
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("circle", { cx: "3.5", cy: "6", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" }), jsxRuntime.jsx("circle", { cx: "3.5", cy: "12", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" }), jsxRuntime.jsx("circle", { cx: "3.5", cy: "18", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" })] })),
|
|
146
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
147
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
168
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => listFilled(primaryColor, secondaryColor, strokeWidth),
|
|
169
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => listFilled(primaryColor, secondaryColor, strokeWidth),
|
|
148
170
|
},
|
|
149
171
|
});
|
|
150
172
|
const NtdTable = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -174,13 +196,20 @@ const NtdMonitor = /* @__PURE__ */ createIcon.createIcon({
|
|
|
174
196
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: secondaryColor, strokeWidth: "1.8" }), jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
175
197
|
},
|
|
176
198
|
});
|
|
199
|
+
// NtdCpu: filled, the body and its pins primary and the die in the accent colour (the body was a
|
|
200
|
+
// fixed 15% tint). The pins are twice the stroke width and short (2.5 → 4 at the top, and so on)
|
|
201
|
+
// so their caps stay in the box. Duotone: the body secondary, the pins and the die primary; vivid:
|
|
202
|
+
// the pins and the die secondary around an accent core.
|
|
203
|
+
const CPU_BODY = { x: 4, y: 4, width: 16, height: 16, rx: 2 };
|
|
204
|
+
const CPU_DIE = { x: 8.5, y: 8.5, width: 7, height: 7, rx: 1.2 };
|
|
205
|
+
const CPU_PINS = 'M9 2.5V4M15 2.5V4M9 20v1.5M15 20v1.5M20 9h1.5M20 15h1.5M2.5 9H4M2.5 15H4';
|
|
177
206
|
const NtdCpu = /* @__PURE__ */ createIcon.createIcon({
|
|
178
207
|
displayName: 'NtdCpu',
|
|
179
208
|
paths: {
|
|
180
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
181
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", {
|
|
182
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
183
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
209
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: CPU_PINS, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("rect", { ...CPU_BODY, fill: primaryColor }), jsxRuntime.jsx("rect", { ...CPU_DIE, fill: accentColor, opacity: accentOpacity })] })),
|
|
210
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...CPU_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
211
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: CPU_PINS, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("rect", { ...CPU_BODY, fill: secondaryColor }), jsxRuntime.jsx("rect", { ...CPU_DIE, fill: primaryColor })] })),
|
|
212
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: CPU_PINS, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("rect", { ...CPU_BODY, fill: primaryColor }), jsxRuntime.jsx("rect", { ...CPU_DIE, fill: secondaryColor }), jsxRuntime.jsx("rect", { x: "10.5", y: "10.5", width: "3", height: "3", rx: "0.6", fill: accentColor, opacity: accentOpacity })] })),
|
|
184
213
|
},
|
|
185
214
|
});
|
|
186
215
|
// NtdKey: the bow top right with its hole on the key's axis, the blade running down-left to two
|
|
@@ -200,13 +229,22 @@ const NtdKey = /* @__PURE__ */ createIcon.createIcon({
|
|
|
200
229
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: `${KEY}${KEY_HOLE}`, fillRule: "evenodd", fill: primaryColor }), jsxRuntime.jsx("path", { d: KEY_BLADE, fill: secondaryColor, opacity: "0.5" })] })),
|
|
201
230
|
},
|
|
202
231
|
});
|
|
232
|
+
// NtdAward: the ribbon has a secondary inside within its primary edge (it was open, so the page
|
|
233
|
+
// showed through), and goes under the medal. The inside is the ribbon inset by 2 — it filled the
|
|
234
|
+
// ribbon almost to its edge. Duotone is the same; vivid draws the ribbon's edge in the accent
|
|
235
|
+
// colour.
|
|
236
|
+
const AWARD_RIBBON = 'M8.21 13.89L7 23l5-3 5 3-1.21-9.12';
|
|
237
|
+
const AWARD_RIBBON_INNER = 'M10.17 14.3L13.83 14.3L14.47 19.15L12 17.67L9.53 19.15z';
|
|
238
|
+
function awardFilled({ primaryColor, secondaryColor, strokeWidth }, ribbonEdge) {
|
|
239
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: AWARD_RIBBON, fill: ribbonEdge, stroke: ribbonEdge, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: AWARD_RIBBON_INNER, fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "7", fill: primaryColor })] }));
|
|
240
|
+
}
|
|
203
241
|
const NtdAward = /* @__PURE__ */ createIcon.createIcon({
|
|
204
242
|
displayName: 'NtdAward',
|
|
205
243
|
paths: {
|
|
206
|
-
solid: (
|
|
244
|
+
solid: (props) => awardFilled(props, props.primaryColor),
|
|
207
245
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
208
|
-
duotone: (
|
|
209
|
-
vivid: (
|
|
246
|
+
duotone: (props) => awardFilled(props, props.primaryColor),
|
|
247
|
+
vivid: (props) => awardFilled(props, props.accentColor),
|
|
210
248
|
},
|
|
211
249
|
});
|
|
212
250
|
const NtdCoffee = /* @__PURE__ */ createIcon.createIcon({
|