@nice2dev/icons 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +87 -0
- package/dist/cjs/createIcon.js +0 -1
- package/dist/cjs/iconParts.js +33 -1
- package/dist/cjs/icons/actions.js +74 -61
- package/dist/cjs/icons/business.js +63 -27
- package/dist/cjs/icons/education.js +31 -11
- package/dist/cjs/icons/files.js +55 -17
- package/dist/cjs/icons/media.js +51 -20
- package/dist/cjs/icons/navigation.js +24 -7
- package/dist/cjs/icons/omniverk.js +2 -1
- package/dist/cjs/icons/realestate.js +45 -10
- package/dist/cjs/icons/science.js +10 -6
- package/dist/cjs/icons/shapes.js +30 -8
- package/dist/cjs/icons/social.js +3 -9
- package/dist/cjs/icons/travel.js +20 -4
- package/dist/cjs/icons/ui.js +41 -35
- package/dist/cjs/icons/weather.js +5 -4
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/createIcon.js +0 -1
- package/dist/esm/iconParts.js +33 -3
- package/dist/esm/icons/actions.js +76 -63
- package/dist/esm/icons/business.js +64 -28
- package/dist/esm/icons/education.js +31 -11
- package/dist/esm/icons/files.js +55 -17
- package/dist/esm/icons/media.js +51 -20
- package/dist/esm/icons/navigation.js +24 -7
- package/dist/esm/icons/omniverk.js +2 -1
- package/dist/esm/icons/realestate.js +45 -10
- package/dist/esm/icons/science.js +10 -6
- package/dist/esm/icons/shapes.js +30 -8
- package/dist/esm/icons/social.js +3 -9
- package/dist/esm/icons/travel.js +20 -4
- package/dist/esm/icons/ui.js +42 -36
- package/dist/esm/icons/weather.js +5 -4
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/iconParts.d.ts +13 -1
- package/dist/types/types.d.ts +4 -0
- package/package.json +2 -2
|
@@ -44,12 +44,14 @@ const NtdUniversity = /* @__PURE__ */ createIcon({
|
|
|
44
44
|
LEARNING TOOLS
|
|
45
45
|
───────────────────────────────────────────────────────────────────────────── */
|
|
46
46
|
// NtdBook: a closed book, not a page — the rounded spine on the left, the block of pages showing
|
|
47
|
-
// at the bottom between the front cover and the line of the back cover
|
|
48
|
-
//
|
|
47
|
+
// at the bottom between the front cover and the line of the back cover. Down the right edge it is
|
|
48
|
+
// cover, then the pages set in 2.5 from that edge (the cover showing beside them), then cover
|
|
49
|
+
// again; the outline marks where the pages end with a line. The cover is plain, so another glyph
|
|
50
|
+
// can sit on it; NtdBookBookmark adds a ribbon.
|
|
49
51
|
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';
|
|
50
|
-
const BOOK_PAGES = '
|
|
52
|
+
const BOOK_PAGES = 'M6.6 17.6h10.9v2.3H6.6a1.15 1.15 0 010-2.3z';
|
|
51
53
|
const BOOK_RIBBON = 'M9.5 2v6.5l1.75-1.3L13 8.5V2z';
|
|
52
|
-
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-
|
|
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-5h13M17.5 16v5';
|
|
53
55
|
/** The book, with the ribbon bookmark or without it. */
|
|
54
56
|
function bookIcon(displayName, ribbon) {
|
|
55
57
|
return createIcon({
|
|
@@ -58,7 +60,7 @@ function bookIcon(displayName, ribbon) {
|
|
|
58
60
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("path", { d: BOOK_PAGES }), ribbon && jsx("path", { d: BOOK_RIBBON })] })] })),
|
|
59
61
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && (jsx("path", { d: "M9.5 2.5v6l1.75-1.3L13 8.5v-6", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }))] })),
|
|
60
62
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
|
|
61
|
-
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsx("path", { d:
|
|
63
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsx("path", { d: BOOK_PAGES, fill: accentColor, opacity: accentOpacity }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: secondaryColor })] })),
|
|
62
64
|
},
|
|
63
65
|
});
|
|
64
66
|
}
|
|
@@ -73,13 +75,20 @@ const NtdOpenBook = /* @__PURE__ */ createIcon({
|
|
|
73
75
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M2 4a2 2 0 012-2h6a2 2 0 012 2v16l-1-1-3 2-3-2-1 1V4z", fill: primaryColor }), 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" }), 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" })] })),
|
|
74
76
|
},
|
|
75
77
|
});
|
|
78
|
+
// NtdNotebook: a cover with short binder rings across its left edge (they stuck out further) and
|
|
79
|
+
// three lines of writing — in the accent colour when filled, as the outline draws them. Duotone,
|
|
80
|
+
// fills only: the cover primary, the rings and the writing secondary; vivid: the rings secondary,
|
|
81
|
+
// the writing in the accent colour.
|
|
82
|
+
const NOTEBOOK_COVER = { x: 5, y: 2, width: 15, height: 20, rx: 2 };
|
|
83
|
+
const NOTEBOOK_RINGS = 'M3.5 6h3M3.5 10h3M3.5 14h3M3.5 18h3';
|
|
84
|
+
const NOTEBOOK_TEXT = 'M9 7h7M9 11h7M9 15h4';
|
|
76
85
|
const NtdNotebook = /* @__PURE__ */ createIcon({
|
|
77
86
|
displayName: 'NtdNotebook',
|
|
78
87
|
paths: {
|
|
79
|
-
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("
|
|
80
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", {
|
|
81
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
82
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("
|
|
88
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...NOTEBOOK_COVER, fill: primaryColor }), jsx("path", { d: NOTEBOOK_RINGS, stroke: primaryColor, strokeWidth: strokeWidth }), jsx("path", { d: NOTEBOOK_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
|
|
89
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...NOTEBOOK_COVER, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `${NOTEBOOK_RINGS}${NOTEBOOK_TEXT}`, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
90
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...NOTEBOOK_COVER, fill: primaryColor }), jsx("path", { d: NOTEBOOK_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth }), jsx("path", { d: NOTEBOOK_TEXT, stroke: secondaryColor, strokeWidth: "1.5" })] })),
|
|
91
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...NOTEBOOK_COVER, fill: primaryColor }), jsx("path", { d: NOTEBOOK_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth }), jsx("path", { d: NOTEBOOK_TEXT, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })),
|
|
83
92
|
},
|
|
84
93
|
});
|
|
85
94
|
const NtdPencil = /* @__PURE__ */ createIcon({
|
|
@@ -169,13 +178,24 @@ const NtdBackpack = /* @__PURE__ */ createIcon({
|
|
|
169
178
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [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 }), 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" }), jsx("rect", { x: "8", y: "12", width: "8", height: "5", rx: "1", fill: "white" }), jsx("path", { d: "M9 4V3a3 3 0 016 0v1", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M10 14h4", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
|
|
170
179
|
},
|
|
171
180
|
});
|
|
181
|
+
// NtdCalculator (NtdCalculatorEdu): filled, the display and the outlines of the keys are in the
|
|
182
|
+
// accent colour — they were a fixed white. Vivid has the display in secondary.
|
|
183
|
+
const CALC_BODY = { x: 4, y: 2, width: 16, height: 20, rx: 2 };
|
|
184
|
+
const CALC_DISPLAY = { x: 6.5, y: 4.5, width: 11, height: 4.5, rx: 1 };
|
|
185
|
+
/** Three rows of keys, the last one with a wide "=" key. */
|
|
186
|
+
const CALC_KEYS = 'M6.6 11.2h2.6v2.2H6.6zM10.7 11.2h2.6v2.2h-2.6zM14.8 11.2h2.6v2.2h-2.6z' +
|
|
187
|
+
'M6.6 14.6h2.6v2.2H6.6zM10.7 14.6h2.6v2.2h-2.6zM14.8 14.6h2.6v2.2h-2.6z' +
|
|
188
|
+
'M6.6 18h2.6v2.2H6.6zM10.7 18h6.7v2.2h-6.7z';
|
|
189
|
+
function calculatorFilled({ primaryColor, accentColor, accentOpacity }, display, displayOpacity) {
|
|
190
|
+
return (jsxs(Fragment, { children: [jsx("rect", { ...CALC_BODY, fill: primaryColor }), jsx("rect", { ...CALC_DISPLAY, fill: display, opacity: displayOpacity }), jsx("path", { d: CALC_KEYS, stroke: accentColor, strokeWidth: "1.1", strokeLinejoin: "miter", opacity: accentOpacity, fill: "none" })] }));
|
|
191
|
+
}
|
|
172
192
|
const NtdCalculator = /* @__PURE__ */ createIcon({
|
|
173
193
|
displayName: 'NtdCalculator',
|
|
174
194
|
paths: {
|
|
175
|
-
solid: (
|
|
195
|
+
solid: (props) => calculatorFilled(props, props.accentColor, props.accentOpacity),
|
|
176
196
|
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("rect", { x: "6", y: "4", width: "12", height: "5", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "8", cy: "12", r: "1", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "1", fill: primaryColor }), jsx("circle", { cx: "16", cy: "12", r: "1", fill: primaryColor }), jsx("circle", { cx: "8", cy: "16", r: "1", fill: primaryColor }), jsx("circle", { cx: "12", cy: "16", r: "1", fill: primaryColor }), jsx("circle", { cx: "16", cy: "16", r: "1", fill: primaryColor }), jsx("circle", { cx: "8", cy: "20", r: "1", fill: primaryColor }), jsx("rect", { x: "11", y: "19", width: "6", height: "2", rx: "0.5", fill: primaryColor })] })),
|
|
177
197
|
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("rect", { x: "6", y: "4", width: "12", height: "5", rx: "1", fill: primaryColor }), jsx("circle", { cx: "8", cy: "12", r: "1", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "1", fill: primaryColor }), jsx("circle", { cx: "16", cy: "12", r: "1", fill: primaryColor }), jsx("circle", { cx: "8", cy: "16", r: "1", fill: primaryColor }), jsx("circle", { cx: "12", cy: "16", r: "1", fill: primaryColor }), jsx("circle", { cx: "16", cy: "16", r: "1", fill: primaryColor })] })),
|
|
178
|
-
vivid: (
|
|
198
|
+
vivid: (props) => calculatorFilled(props, props.secondaryColor, 1),
|
|
179
199
|
},
|
|
180
200
|
});
|
|
181
201
|
/* ────────────────────────────────────────────────────────────────────────────
|
package/dist/esm/icons/files.js
CHANGED
|
@@ -8,13 +8,17 @@ import { paperIcon, within } from '../iconParts.js';
|
|
|
8
8
|
const NtdFile = /* @__PURE__ */ paperIcon('NtdFile');
|
|
9
9
|
const NtdFileText = /* @__PURE__ */ paperIcon('NtdFileText', 'M7.5 9.5h3M7.5 13.5h9M7.5 17.5h9');
|
|
10
10
|
// The folder tab runs 2 → 11 before its slope (2 → 9 before), in NtdFolder and NtdFolderOpen.
|
|
11
|
+
const FOLDER_TAB = 'M2 7V5a2 2 0 012-2h7l2.67 4z';
|
|
12
|
+
const FOLDER_FRONT = 'M2 6h18a2 2 0 012 2v11a2 2 0 01-2 2H4a2 2 0 01-2-2z';
|
|
11
13
|
const NtdFolder = /* @__PURE__ */ createIcon({
|
|
12
14
|
displayName: 'NtdFolder',
|
|
13
15
|
paths: {
|
|
14
16
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (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 })),
|
|
15
17
|
outline: ({ primaryColor, strokeWidth }) => (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" })),
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
// fills only: the folder primary, its tab secondary (the tab reaches 1 under the front, so
|
|
19
|
+
// the two meet without a seam)
|
|
20
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: FOLDER_TAB, fill: secondaryColor }), jsx("path", { d: FOLDER_FRONT, fill: primaryColor })] })),
|
|
21
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: FOLDER_TAB, fill: secondaryColor }), jsx("path", { d: FOLDER_FRONT, fill: primaryColor })] })),
|
|
18
22
|
},
|
|
19
23
|
});
|
|
20
24
|
const NtdFolderOpen = /* @__PURE__ */ createIcon({
|
|
@@ -41,12 +45,19 @@ const NtdArchive = /* @__PURE__ */ createIcon({
|
|
|
41
45
|
// discs are bands between two parallel arcs, 1.3 high everywhere and cut square at the sides — a
|
|
42
46
|
// stroked arc clipped to the body thinned to a wedge along the sides.
|
|
43
47
|
const DB_SILHOUETTE = 'M4 5.5v13a8 2.6 0 0016 0v-13a8 2.6 0 00-16 0z';
|
|
44
|
-
|
|
48
|
+
// The three discs are equally tall (3.47 between the gaps): centred on the outline's thirds, the
|
|
49
|
+
// gaps took from both sides of the middle disc and left it 0.65 shorter than the others.
|
|
50
|
+
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';
|
|
51
|
+
function databaseLines({ primaryColor, strokeWidth }) {
|
|
52
|
+
return (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "5.5", rx: "8", ry: "2.6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), 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" })] }));
|
|
53
|
+
}
|
|
45
54
|
const NtdDatabase = /* @__PURE__ */ createIcon({
|
|
46
55
|
displayName: 'NtdDatabase',
|
|
47
56
|
paths: {
|
|
48
|
-
|
|
49
|
-
|
|
57
|
+
// `wireframe` re-draws this layer as thin lines: from the bands it drew each gap as two arcs
|
|
58
|
+
// and lost the cap's front edge, so it gets the outline's construction instead
|
|
59
|
+
solid: (props) => props.variant === 'wireframe' ? (databaseLines(props)) : (jsxs(Fragment, { children: [jsx("path", { d: DB_SILHOUETTE, fill: props.primaryColor }), jsx("path", { d: DB_GAPS, fill: props.accentColor, opacity: props.accentOpacity })] })),
|
|
60
|
+
outline: databaseLines,
|
|
50
61
|
// one tint for the cap and the body: the cap in full secondary read as a separate disc
|
|
51
62
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: DB_SILHOUETTE, fill: secondaryColor, opacity: secondaryOpacity }), jsx("ellipse", { cx: "12", cy: "5.5", rx: "8", ry: "2.6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), 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" })] })),
|
|
52
63
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: DB_SILHOUETTE, fill: primaryColor }), jsx("ellipse", { cx: "12", cy: "5.5", rx: "8", ry: "2.6", fill: "white", opacity: "0.25" }), jsx("path", { d: DB_GAPS, fill: secondaryColor })] })),
|
|
@@ -109,13 +120,17 @@ const NtdGit = /* @__PURE__ */ createIcon({
|
|
|
109
120
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "18", r: "3", fill: primaryColor }), jsx("circle", { cx: "12", cy: "18", r: "3", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "6", cy: "6", r: "3", fill: secondaryColor }), jsx("circle", { cx: "18", cy: "6", r: "3", fill: "#3B82F6" }), jsx("line", { x1: "6", y1: "9", x2: "6", y2: "12", stroke: "white", strokeWidth: "1" }), jsx("path", { d: "M18 9v1a2 2 0 01-2 2H8a2 2 0 00-2 2v1", stroke: "white", strokeWidth: "1" }), jsx("line", { x1: "12", y1: "12", x2: "12", y2: "15", stroke: "white", strokeWidth: "1" })] })),
|
|
110
121
|
},
|
|
111
122
|
});
|
|
123
|
+
// NtdPackage: filled, the walls are primary and their edges (and the tape) cuts in the accent
|
|
124
|
+
// colour, kept inside the box — the walls were a fixed 15% tint.
|
|
125
|
+
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';
|
|
126
|
+
const PACKAGE_EDGES = 'M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12M16.5 9.4l-9-5.19';
|
|
112
127
|
const NtdPackage = /* @__PURE__ */ createIcon({
|
|
113
128
|
displayName: 'NtdPackage',
|
|
114
129
|
paths: {
|
|
115
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
130
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: PACKAGE_BOX, fill: primaryColor }), within(uid, 'edges', jsx("path", { d: PACKAGE_BOX }), jsx("path", { d: PACKAGE_EDGES, stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] })),
|
|
116
131
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [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" }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
117
132
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [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 }), 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" }), jsx("path", { d: "M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
118
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
133
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: PACKAGE_BOX, fill: primaryColor }), within(uid, 'edges', jsx("path", { d: PACKAGE_BOX }), jsx("path", { d: PACKAGE_EDGES, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
119
134
|
},
|
|
120
135
|
});
|
|
121
136
|
const NtdLayers = /* @__PURE__ */ createIcon({
|
|
@@ -136,13 +151,20 @@ const NtdGrid = /* @__PURE__ */ createIcon({
|
|
|
136
151
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5", fill: "white", opacity: "0.08" }), jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5", fill: secondaryColor }), jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5", fill: "#3B82F6" }), jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5", fill: "#F59E0B" })] })),
|
|
137
152
|
},
|
|
138
153
|
});
|
|
154
|
+
// NtdList: in every variant but `outline` the lines are 1.5 × the stroke width and the dots r 2.25
|
|
155
|
+
// — half again as heavy as they were; the lines start at 9 to keep clear of the bigger dots.
|
|
156
|
+
// Duotone and vivid: the lines primary, the dots secondary.
|
|
157
|
+
const LIST_LINES = 'M9 6h12M9 12h12M9 18h12';
|
|
158
|
+
function listFilled(lines, dots, strokeWidth) {
|
|
159
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: LIST_LINES, stroke: lines, strokeWidth: strokeWidth * 1.5 }), jsxs("g", { fill: dots, children: [jsx("circle", { cx: "3.75", cy: "6", r: "2.25" }), jsx("circle", { cx: "3.75", cy: "12", r: "2.25" }), jsx("circle", { cx: "3.75", cy: "18", r: "2.25" })] })] }));
|
|
160
|
+
}
|
|
139
161
|
const NtdList = /* @__PURE__ */ createIcon({
|
|
140
162
|
displayName: 'NtdList',
|
|
141
163
|
paths: {
|
|
142
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
164
|
+
solid: ({ primaryColor, strokeWidth }) => listFilled(primaryColor, primaryColor, strokeWidth),
|
|
143
165
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("circle", { cx: "3.5", cy: "6", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" }), jsx("circle", { cx: "3.5", cy: "12", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" }), jsx("circle", { cx: "3.5", cy: "18", r: "1", stroke: primaryColor, strokeWidth: "1", fill: "none" })] })),
|
|
144
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
145
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
166
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => listFilled(primaryColor, secondaryColor, strokeWidth),
|
|
167
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => listFilled(primaryColor, secondaryColor, strokeWidth),
|
|
146
168
|
},
|
|
147
169
|
});
|
|
148
170
|
const NtdTable = /* @__PURE__ */ createIcon({
|
|
@@ -172,13 +194,20 @@ const NtdMonitor = /* @__PURE__ */ createIcon({
|
|
|
172
194
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: primaryColor }), jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
173
195
|
},
|
|
174
196
|
});
|
|
197
|
+
// NtdCpu: filled, the body and its pins primary and the die in the accent colour (the body was a
|
|
198
|
+
// fixed 15% tint). The pins are twice the stroke width and short (2.5 → 4 at the top, and so on)
|
|
199
|
+
// so their caps stay in the box. Duotone: the body secondary, the pins and the die primary; vivid:
|
|
200
|
+
// the pins and the die secondary around an accent core.
|
|
201
|
+
const CPU_BODY = { x: 4, y: 4, width: 16, height: 16, rx: 2 };
|
|
202
|
+
const CPU_DIE = { x: 8.5, y: 8.5, width: 7, height: 7, rx: 1.2 };
|
|
203
|
+
const CPU_PINS = 'M9 2.5V4M15 2.5V4M9 20v1.5M15 20v1.5M20 9h1.5M20 15h1.5M2.5 9H4M2.5 15H4';
|
|
175
204
|
const NtdCpu = /* @__PURE__ */ createIcon({
|
|
176
205
|
displayName: 'NtdCpu',
|
|
177
206
|
paths: {
|
|
178
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("
|
|
179
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", {
|
|
180
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
181
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("
|
|
207
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: CPU_PINS, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("rect", { ...CPU_BODY, fill: primaryColor }), jsx("rect", { ...CPU_DIE, fill: accentColor, opacity: accentOpacity })] })),
|
|
208
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...CPU_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
209
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: CPU_PINS, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("rect", { ...CPU_BODY, fill: secondaryColor }), jsx("rect", { ...CPU_DIE, fill: primaryColor })] })),
|
|
210
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: CPU_PINS, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("rect", { ...CPU_BODY, fill: primaryColor }), jsx("rect", { ...CPU_DIE, fill: secondaryColor }), jsx("rect", { x: "10.5", y: "10.5", width: "3", height: "3", rx: "0.6", fill: accentColor, opacity: accentOpacity })] })),
|
|
182
211
|
},
|
|
183
212
|
});
|
|
184
213
|
// NtdKey: the bow top right with its hole on the key's axis, the blade running down-left to two
|
|
@@ -198,13 +227,22 @@ const NtdKey = /* @__PURE__ */ createIcon({
|
|
|
198
227
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: `${KEY}${KEY_HOLE}`, fillRule: "evenodd", fill: primaryColor }), jsx("path", { d: KEY_BLADE, fill: secondaryColor, opacity: "0.5" })] })),
|
|
199
228
|
},
|
|
200
229
|
});
|
|
230
|
+
// NtdAward: the ribbon has a secondary inside within its primary edge (it was open, so the page
|
|
231
|
+
// showed through), and goes under the medal. The inside is the ribbon inset by 2 — it filled the
|
|
232
|
+
// ribbon almost to its edge. Duotone is the same; vivid draws the ribbon's edge in the accent
|
|
233
|
+
// colour.
|
|
234
|
+
const AWARD_RIBBON = 'M8.21 13.89L7 23l5-3 5 3-1.21-9.12';
|
|
235
|
+
const AWARD_RIBBON_INNER = 'M10.17 14.3L13.83 14.3L14.47 19.15L12 17.67L9.53 19.15z';
|
|
236
|
+
function awardFilled({ primaryColor, secondaryColor, strokeWidth }, ribbonEdge) {
|
|
237
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: AWARD_RIBBON, fill: ribbonEdge, stroke: ribbonEdge, strokeWidth: strokeWidth }), jsx("path", { d: AWARD_RIBBON_INNER, fill: secondaryColor }), jsx("circle", { cx: "12", cy: "8", r: "7", fill: primaryColor })] }));
|
|
238
|
+
}
|
|
201
239
|
const NtdAward = /* @__PURE__ */ createIcon({
|
|
202
240
|
displayName: 'NtdAward',
|
|
203
241
|
paths: {
|
|
204
|
-
solid: (
|
|
242
|
+
solid: (props) => awardFilled(props, props.primaryColor),
|
|
205
243
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "8", r: "7", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M8.21 13.89L7 23l5-3 5 3-1.21-9.12", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
206
|
-
duotone: (
|
|
207
|
-
vivid: (
|
|
244
|
+
duotone: (props) => awardFilled(props, props.primaryColor),
|
|
245
|
+
vivid: (props) => awardFilled(props, props.accentColor),
|
|
208
246
|
},
|
|
209
247
|
});
|
|
210
248
|
const NtdCoffee = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/media.js
CHANGED
|
@@ -83,32 +83,49 @@ const NtdCamera = /* @__PURE__ */ createIcon({
|
|
|
83
83
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2v11z", fill: primaryColor }), jsx("path", { d: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2v11z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "13", r: "4", fill: secondaryColor })] })),
|
|
84
84
|
},
|
|
85
85
|
});
|
|
86
|
+
const VIDEO_LENS = 'M17 9.5l5-3v11l-5-3';
|
|
86
87
|
const NtdVideo = /* @__PURE__ */ createIcon({
|
|
87
88
|
displayName: 'NtdVideo',
|
|
88
89
|
paths: {
|
|
89
|
-
solid: ({ primaryColor
|
|
90
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d:
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", fill: primaryColor }), jsx("path", { d: VIDEO_LENS, fill: primaryColor, stroke: primaryColor })] })),
|
|
91
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: VIDEO_LENS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
92
|
+
// fills only, like vivid: the camera primary, the lens secondary
|
|
93
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", fill: primaryColor }), jsx("path", { d: VIDEO_LENS, fill: secondaryColor, stroke: secondaryColor })] })),
|
|
94
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "2", y: "6", width: "15", height: "12", rx: "2", fill: primaryColor }), jsx("path", { d: VIDEO_LENS, fill: secondaryColor, stroke: secondaryColor })] })),
|
|
93
95
|
},
|
|
94
96
|
});
|
|
97
|
+
// NtdMicrophone / NtdMicrophoneOff: the stand is a line glyph, twice the stroke width in every
|
|
98
|
+
// variant but `outline`, and sits a little higher so its base keeps inside the box at that width.
|
|
99
|
+
// Duotone fills the capsule in secondary with no ring around it; vivid draws the stand in it.
|
|
100
|
+
const MIC_CAPSULE = { x: 9, y: 2, width: 6, height: 11, rx: 3 };
|
|
101
|
+
const MIC_STAND = 'M18.5 10v1a6.5 6.5 0 01-13 0v-1M12 17.5V21M8 21h8';
|
|
95
102
|
const NtdMicrophone = /* @__PURE__ */ createIcon({
|
|
96
103
|
displayName: 'NtdMicrophone',
|
|
97
104
|
paths: {
|
|
98
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", {
|
|
99
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", {
|
|
100
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
101
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", {
|
|
105
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
106
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
107
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, fill: secondaryColor }), jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
108
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsx("path", { d: MIC_STAND, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
102
109
|
},
|
|
103
110
|
});
|
|
111
|
+
/**
|
|
112
|
+
* The box without a band around NtdMicrophoneOff's slash (2,2 → 22,22): `gap` clear on each side
|
|
113
|
+
* of a slash `width` wide. The microphone is clipped to it, so the slash stands apart from it
|
|
114
|
+
* instead of merging with a stand of the same weight.
|
|
115
|
+
*/
|
|
116
|
+
function micSlashClip(width, gap) {
|
|
117
|
+
const o = (width / 2 + gap) / Math.SQRT2;
|
|
118
|
+
return `M0 0h24v24H0zM${ -2 + o} ${ -2 - o}L${26 + o} ${26 - o}L${26 - o} ${26 + o}L${ -2 - o} ${ -2 + o}z`;
|
|
119
|
+
}
|
|
120
|
+
const MIC_SLASH = 'M2 2l20 20';
|
|
104
121
|
/** A muted microphone: the microphone with a slash across it. */
|
|
105
122
|
const NtdMicrophoneOff = /* @__PURE__ */ createIcon({
|
|
106
123
|
displayName: 'NtdMicrophoneOff',
|
|
107
124
|
paths: {
|
|
108
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [
|
|
109
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [
|
|
110
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
111
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [
|
|
125
|
+
solid: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [within(uid, 'mic', jsx("path", { d: micSlashClip(strokeWidth * 2, strokeWidth * 0.5), clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })), jsx("path", { d: MIC_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
126
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [within(uid, 'mic', jsx("path", { d: micSlashClip(strokeWidth, strokeWidth * 0.5), clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })), jsx("path", { d: MIC_SLASH, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
127
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [within(uid, 'mic', jsx("path", { d: micSlashClip(strokeWidth * 2, strokeWidth * 0.5), clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, fill: secondaryColor }), jsx("path", { d: MIC_STAND, stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })), jsx("path", { d: MIC_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
128
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [within(uid, 'mic', jsx("path", { d: micSlashClip(strokeWidth * 2, strokeWidth * 0.5), clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...MIC_CAPSULE, fill: primaryColor }), jsx("path", { d: MIC_STAND, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })), jsx("path", { d: MIC_SLASH, stroke: secondaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
112
129
|
},
|
|
113
130
|
});
|
|
114
131
|
// NtdMusic: the note heads are tilted ellipses whose right edge is the stem's right edge, and the
|
|
@@ -163,13 +180,18 @@ const NtdPhone = /* @__PURE__ */ createIcon({
|
|
|
163
180
|
},
|
|
164
181
|
});
|
|
165
182
|
// The tail leaves the bubble's bottom edge 4 units in from the left (it ran down the left side).
|
|
183
|
+
const CHAT = 'M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2h-8l-4 4v-4H5a2 2 0 01-2-2V5a2 2 0 012-2z';
|
|
184
|
+
const CHAT_BUBBLE = 'M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z';
|
|
185
|
+
/** The tail alone, reaching 1 under the bubble so the two colours meet without a seam. */
|
|
186
|
+
const CHAT_TAIL = 'M7 16v5l5-5z';
|
|
166
187
|
const NtdChat = /* @__PURE__ */ createIcon({
|
|
167
188
|
displayName: 'NtdChat',
|
|
168
189
|
paths: {
|
|
169
|
-
solid: ({ primaryColor
|
|
170
|
-
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d:
|
|
171
|
-
|
|
172
|
-
|
|
190
|
+
solid: ({ primaryColor }) => jsx("path", { d: CHAT, fill: primaryColor }),
|
|
191
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: CHAT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
192
|
+
// fills only: the bubble primary, the tail secondary
|
|
193
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
194
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
173
195
|
},
|
|
174
196
|
});
|
|
175
197
|
/* NtdSend — the paper plane read ~20% oversized next to the rest of the set,
|
|
@@ -199,13 +221,22 @@ const NtdNotification = /* @__PURE__ */ createIcon({
|
|
|
199
221
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: primaryColor }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "18", cy: "4", r: "3.5", fill: secondaryColor }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: "white", strokeWidth: "1" })] })),
|
|
200
222
|
},
|
|
201
223
|
});
|
|
224
|
+
// NtdWifi: three arcs round the dot (r 4.4 / 9.1 / 13.8 about 12,19.5, ±45°), 1.5 × the stroke
|
|
225
|
+
// width in every variant but `outline` — half again as heavy. Concentric, so the heavier arcs keep
|
|
226
|
+
// even gaps, and small enough that the outer one's square caps in `sharp` stay in the box.
|
|
227
|
+
// Duotone and vivid: the dot and the inner arc primary, the outer arcs secondary.
|
|
228
|
+
const WIFI_INNER = 'M8.89 16.39A4.4 4.4 0 0 1 15.11 16.39';
|
|
229
|
+
const WIFI_OUTER = 'M5.57 13.07A9.1 9.1 0 0 1 18.43 13.07M2.24 9.74A13.8 13.8 0 0 1 21.76 9.74';
|
|
230
|
+
function wifiFilled(near, far, strokeWidth) {
|
|
231
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: WIFI_OUTER, stroke: far, strokeWidth: strokeWidth * 1.5, fill: "none" }), jsx("path", { d: WIFI_INNER, stroke: near, strokeWidth: strokeWidth * 1.5, fill: "none" }), jsx("circle", { cx: "12", cy: "19.5", r: "1.5", fill: near })] }));
|
|
232
|
+
}
|
|
202
233
|
const NtdWifi = /* @__PURE__ */ createIcon({
|
|
203
234
|
displayName: 'NtdWifi',
|
|
204
235
|
paths: {
|
|
205
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
206
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
207
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
208
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
236
|
+
solid: ({ primaryColor, strokeWidth }) => wifiFilled(primaryColor, primaryColor, strokeWidth),
|
|
237
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: `${WIFI_INNER}${WIFI_OUTER}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "19.5", r: "1", fill: primaryColor })] })),
|
|
238
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
239
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
209
240
|
},
|
|
210
241
|
});
|
|
211
242
|
const NtdBluetooth = /* @__PURE__ */ createIcon({
|
|
@@ -78,8 +78,9 @@ const NtdMenu = /* @__PURE__ */ createIcon({
|
|
|
78
78
|
paths: {
|
|
79
79
|
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: primaryColor })] })),
|
|
80
80
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
// the bars of solid, the middle one in secondary (the secondary underlay was drawn over)
|
|
82
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: secondaryColor }), jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: primaryColor })] })),
|
|
83
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "5", width: "18", height: "2", rx: "1", fill: primaryColor }), jsx("rect", { x: "3", y: "11", width: "18", height: "2", rx: "1", fill: secondaryColor }), jsx("rect", { x: "3", y: "17", width: "18", height: "2", rx: "1", fill: primaryColor })] })),
|
|
83
84
|
},
|
|
84
85
|
});
|
|
85
86
|
// The filled cross is drawn as two strokes at twice the stroke width, like NtdCheck: it was a
|
|
@@ -89,8 +90,9 @@ const NtdClose = /* @__PURE__ */ createIcon({
|
|
|
89
90
|
paths: {
|
|
90
91
|
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: primaryColor, strokeWidth: strokeWidth * 2 })),
|
|
91
92
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth }), jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
// like NtdPlus: one stroke per colour, no backing disc; vivid adds the crossing in accent
|
|
94
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 6l12 12", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M18 6L6 18", stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
|
|
95
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M6 6l12 12", stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsx("path", { d: "M18 6L6 18", stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsx("rect", { x: 12 - strokeWidth, y: 12 - strokeWidth, width: strokeWidth * 2, height: strokeWidth * 2, transform: "rotate(45 12 12)", fill: accentColor, opacity: accentOpacity })] })),
|
|
94
96
|
},
|
|
95
97
|
});
|
|
96
98
|
const NtdMoreHorizontal = /* @__PURE__ */ createIcon({
|
|
@@ -120,13 +122,28 @@ const NtdExternalLink = /* @__PURE__ */ createIcon({
|
|
|
120
122
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6", stroke: primaryColor, strokeWidth: "2" }), jsx("polyline", { points: "16,3 21,3 21,8", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "21", y1: "3", x2: "12", y2: "12", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
121
123
|
},
|
|
122
124
|
});
|
|
125
|
+
// NtdRefresh: two arcs round 12,12 (r 7), each ending in a filled head — a line glyph twice the
|
|
126
|
+
// stroke width in every variant but `outline`. The tail stops inside its head, so no cap sticks
|
|
127
|
+
// out of it in `sharp` (the old tails ran into the heads' corners). Duotone and vivid: the top
|
|
128
|
+
// arrow primary, the bottom one secondary.
|
|
129
|
+
const REFRESH_TOP = {
|
|
130
|
+
tail: 'M5.82 8.71A7 7 0 0 1 18 8.39',
|
|
131
|
+
head: 'M22.25 7L20.75 13.96L14.34 10.86z',
|
|
132
|
+
};
|
|
133
|
+
const REFRESH_BOTTOM = {
|
|
134
|
+
tail: 'M18.18 15.29A7 7 0 0 1 6 15.61',
|
|
135
|
+
head: 'M1.75 17L3.25 10.04L9.66 13.14z',
|
|
136
|
+
};
|
|
137
|
+
function refreshArrows(top, bottom, strokeWidth) {
|
|
138
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: REFRESH_TOP.tail, stroke: top, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: REFRESH_TOP.head, fill: top }), jsx("path", { d: REFRESH_BOTTOM.tail, stroke: bottom, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: REFRESH_BOTTOM.head, fill: bottom })] }));
|
|
139
|
+
}
|
|
123
140
|
const NtdRefresh = /* @__PURE__ */ createIcon({
|
|
124
141
|
displayName: 'NtdRefresh',
|
|
125
142
|
paths: {
|
|
126
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
143
|
+
solid: ({ primaryColor, strokeWidth }) => refreshArrows(primaryColor, primaryColor, strokeWidth),
|
|
127
144
|
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 4v5h5M20 20v-5h-5M20.49 9A9 9 0 005.64 5.64L4 9m16 6l-1.64 3.36A9 9 0 013.51 15", stroke: primaryColor, strokeWidth: strokeWidth })),
|
|
128
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
129
|
-
vivid: ({ primaryColor, secondaryColor
|
|
145
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => refreshArrows(primaryColor, secondaryColor, strokeWidth),
|
|
146
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => refreshArrows(primaryColor, secondaryColor, strokeWidth),
|
|
130
147
|
},
|
|
131
148
|
});
|
|
132
149
|
|
|
@@ -108,7 +108,8 @@ const NtdLab = /* @__PURE__ */ createIcon({
|
|
|
108
108
|
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsx("path", { d: LAB_LIQUID, fill: accentColor, opacity: accentOpacity })] })),
|
|
109
109
|
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsx("path", { d: LAB_LIQUID, fill: secondaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("circle", { cx: "10.5", cy: "17.6", r: "0.9" }), jsx("circle", { cx: "13.6", cy: "18.7", r: "0.7" })] })] })),
|
|
110
110
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsx("line", { x1: "6.3", y1: "15.5", x2: "17.7", y2: "15.5", stroke: primaryColor, strokeWidth: "1.4" })] })),
|
|
111
|
-
|
|
111
|
+
// vivid without the bubbles: the flask primary, the liquid secondary, no outline
|
|
112
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsx("path", { d: LAB_LIQUID, fill: secondaryColor })] })),
|
|
112
113
|
},
|
|
113
114
|
});
|
|
114
115
|
|