@nice2dev/icons 1.3.2 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +122 -0
- package/README.md +12 -4
- package/dist/cjs/createIcon.js +4 -2
- package/dist/cjs/figmaExport.js +1 -0
- package/dist/cjs/iconParts.js +34 -1
- package/dist/cjs/icons/actions.js +85 -64
- package/dist/cjs/icons/business.js +65 -28
- package/dist/cjs/icons/education.js +37 -13
- package/dist/cjs/icons/files.js +58 -18
- package/dist/cjs/icons/index.js +1 -0
- package/dist/cjs/icons/media.js +87 -30
- package/dist/cjs/icons/navigation.js +26 -7
- package/dist/cjs/icons/omniverk.js +2 -1
- package/dist/cjs/icons/realestate.js +48 -10
- package/dist/cjs/icons/science.js +10 -6
- package/dist/cjs/icons/shapes.js +46 -12
- package/dist/cjs/icons/social.js +3 -9
- package/dist/cjs/icons/travel.js +21 -4
- package/dist/cjs/icons/ui.js +80 -39
- package/dist/cjs/icons/weather.js +5 -4
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/esm/createIcon.js +4 -2
- package/dist/esm/figmaExport.js +1 -0
- package/dist/esm/iconParts.js +34 -3
- package/dist/esm/icons/actions.js +87 -66
- package/dist/esm/icons/business.js +65 -28
- package/dist/esm/icons/education.js +37 -13
- package/dist/esm/icons/files.js +58 -18
- package/dist/esm/icons/index.js +1 -1
- package/dist/esm/icons/media.js +87 -30
- package/dist/esm/icons/navigation.js +26 -7
- package/dist/esm/icons/omniverk.js +2 -1
- package/dist/esm/icons/realestate.js +48 -10
- package/dist/esm/icons/science.js +10 -6
- package/dist/esm/icons/shapes.js +46 -12
- package/dist/esm/icons/social.js +3 -9
- package/dist/esm/icons/travel.js +21 -4
- package/dist/esm/icons/ui.js +81 -41
- package/dist/esm/icons/weather.js +5 -4
- package/dist/esm/index.js +1 -1
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/types/iconParts.d.ts +14 -1
- package/dist/types/icons/index.d.ts +1 -1
- package/dist/types/icons/ui.d.ts +1 -0
- package/dist/types/types.d.ts +12 -3
- package/package.json +2 -2
|
@@ -44,12 +44,17 @@ 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
|
|
48
|
-
//
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
// at the bottom between the front cover and the back cover. Down the right edge it is cover, then
|
|
48
|
+
// a notch cut in 0.9 at the pages, then cover again: beside the pages only a narrow strip of cover
|
|
49
|
+
// is left (it was a 2.5 wide bar). The outline ends the pages with a line short of the edge, the back
|
|
50
|
+
// cover running on under the notch. The cover is plain, so another glyph can sit on it;
|
|
51
|
+
// NtdBookBookmark adds a ribbon.
|
|
52
|
+
const BOOK_SILHOUETTE = 'M7 2h12a1 1 0 011 1v14.2h-.9v2.1H20v.7a1 1 0 01-1 1H7a2.5 2.5 0 01-2.5-2.5v-14A2.5 2.5 0 017 2z';
|
|
53
|
+
const BOOK_PAGES = 'M6.6 17.2h11.4v2.1H6.6a1.05 1.05 0 010-2.1z';
|
|
51
54
|
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
|
|
55
|
+
const BOOK_OUTLINE = 'M4.5 18.5v-14A2.5 2.5 0 017 2h12a1 1 0 011 1v13H7a2.5 2.5 0 000 5h13M18.7 16v5';
|
|
56
|
+
/** The inside of the outline, for duotone's fill under it. */
|
|
57
|
+
const BOOK_OUTLINE_FILL = 'M7 2h12a1 1 0 011 1v13h-1.3v5H7a2.5 2.5 0 01-2.5-2.5v-14A2.5 2.5 0 017 2z';
|
|
53
58
|
/** The book, with the ribbon bookmark or without it. */
|
|
54
59
|
function bookIcon(displayName, ribbon) {
|
|
55
60
|
return createIcon({
|
|
@@ -57,8 +62,8 @@ function bookIcon(displayName, ribbon) {
|
|
|
57
62
|
paths: {
|
|
58
63
|
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
64
|
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
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
61
|
-
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsx("path", { d:
|
|
65
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: BOOK_OUTLINE_FILL, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: BOOK_OUTLINE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
|
|
66
|
+
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
67
|
},
|
|
63
68
|
});
|
|
64
69
|
}
|
|
@@ -73,13 +78,21 @@ const NtdOpenBook = /* @__PURE__ */ createIcon({
|
|
|
73
78
|
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
79
|
},
|
|
75
80
|
});
|
|
81
|
+
// NtdNotebook: a cover with short binder rings across its left edge (they stuck out further) and
|
|
82
|
+
// three lines of writing — in the accent colour when filled, as the outline draws them. The cover
|
|
83
|
+
// is 16.5 × 19 (it was 15 × 20, tall and slim for an exercise book). Duotone, fills only: the
|
|
84
|
+
// cover primary, the rings and the writing secondary; vivid: the rings secondary, the writing in
|
|
85
|
+
// the accent colour.
|
|
86
|
+
const NOTEBOOK_COVER = { x: 4.5, y: 2.5, width: 16.5, height: 19, rx: 2 };
|
|
87
|
+
const NOTEBOOK_RINGS = 'M3 6h3M3 10h3M3 14h3M3 18h3';
|
|
88
|
+
const NOTEBOOK_TEXT = 'M9 7.5h8.5M9 11.5h8.5M9 15.5h4.5';
|
|
76
89
|
const NtdNotebook = /* @__PURE__ */ createIcon({
|
|
77
90
|
displayName: 'NtdNotebook',
|
|
78
91
|
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("
|
|
92
|
+
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 })] })),
|
|
93
|
+
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 })] })),
|
|
94
|
+
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" })] })),
|
|
95
|
+
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
96
|
},
|
|
84
97
|
});
|
|
85
98
|
const NtdPencil = /* @__PURE__ */ createIcon({
|
|
@@ -169,13 +182,24 @@ const NtdBackpack = /* @__PURE__ */ createIcon({
|
|
|
169
182
|
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
183
|
},
|
|
171
184
|
});
|
|
185
|
+
// NtdCalculator (NtdCalculatorEdu): filled, the display and the outlines of the keys are in the
|
|
186
|
+
// accent colour — they were a fixed white. Vivid has the display in secondary.
|
|
187
|
+
const CALC_BODY = { x: 4, y: 2, width: 16, height: 20, rx: 2 };
|
|
188
|
+
const CALC_DISPLAY = { x: 6.5, y: 4.5, width: 11, height: 4.5, rx: 1 };
|
|
189
|
+
/** Three rows of keys, the last one with a wide "=" key. */
|
|
190
|
+
const CALC_KEYS = 'M6.6 11.2h2.6v2.2H6.6zM10.7 11.2h2.6v2.2h-2.6zM14.8 11.2h2.6v2.2h-2.6z' +
|
|
191
|
+
'M6.6 14.6h2.6v2.2H6.6zM10.7 14.6h2.6v2.2h-2.6zM14.8 14.6h2.6v2.2h-2.6z' +
|
|
192
|
+
'M6.6 18h2.6v2.2H6.6zM10.7 18h6.7v2.2h-6.7z';
|
|
193
|
+
function calculatorFilled({ primaryColor, accentColor, accentOpacity }, display, displayOpacity) {
|
|
194
|
+
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" })] }));
|
|
195
|
+
}
|
|
172
196
|
const NtdCalculator = /* @__PURE__ */ createIcon({
|
|
173
197
|
displayName: 'NtdCalculator',
|
|
174
198
|
paths: {
|
|
175
|
-
solid: (
|
|
199
|
+
solid: (props) => calculatorFilled(props, props.accentColor, props.accentOpacity),
|
|
176
200
|
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
201
|
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: (
|
|
202
|
+
vivid: (props) => calculatorFilled(props, props.secondaryColor, 1),
|
|
179
203
|
},
|
|
180
204
|
});
|
|
181
205
|
/* ────────────────────────────────────────────────────────────────────────────
|
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 1.7
|
|
155
|
+
// (r 2.25 was too big, a quarter smaller); the lines start at 9 to keep clear of the 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: "1.7" }), jsx("circle", { cx: "3.75", cy: "12", r: "1.7" }), jsx("circle", { cx: "3.75", cy: "18", r: "1.7" })] })] }));
|
|
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({
|
|
@@ -154,10 +176,12 @@ const NtdTable = /* @__PURE__ */ createIcon({
|
|
|
154
176
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor, opacity: "0.15", stroke: primaryColor, strokeWidth: "2" }), jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21", stroke: "#3B82F6", strokeWidth: "1.5" })] })),
|
|
155
177
|
},
|
|
156
178
|
});
|
|
179
|
+
// NtdSmartphone: filled, the case stays a primary frame round a screen in the accent colour, and
|
|
180
|
+
// the button is a primary dot on the screen — bigger and lower than the accent dot it was.
|
|
157
181
|
const NtdSmartphone = /* @__PURE__ */ createIcon({
|
|
158
182
|
displayName: 'NtdSmartphone',
|
|
159
183
|
paths: {
|
|
160
|
-
solid: ({ primaryColor, accentColor, accentOpacity
|
|
184
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "6.5", y: "3.5", width: "11", height: "17", rx: "0.75", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "18.4", r: "1.25", fill: primaryColor })] })),
|
|
161
185
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
162
186
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
163
187
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: primaryColor }), jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18", stroke: secondaryColor, strokeWidth: "1.8" })] })),
|
|
@@ -172,13 +196,20 @@ const NtdMonitor = /* @__PURE__ */ createIcon({
|
|
|
172
196
|
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
197
|
},
|
|
174
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';
|
|
175
206
|
const NtdCpu = /* @__PURE__ */ createIcon({
|
|
176
207
|
displayName: 'NtdCpu',
|
|
177
208
|
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("
|
|
209
|
+
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 })] })),
|
|
210
|
+
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 })] })),
|
|
211
|
+
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 })] })),
|
|
212
|
+
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
213
|
},
|
|
183
214
|
});
|
|
184
215
|
// NtdKey: the bow top right with its hole on the key's axis, the blade running down-left to two
|
|
@@ -198,13 +229,22 @@ const NtdKey = /* @__PURE__ */ createIcon({
|
|
|
198
229
|
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
230
|
},
|
|
200
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 1.5 — between the
|
|
234
|
+
// half stroke it filled to before (too full) and the 2 after (too small). Duotone is the same;
|
|
235
|
+
// vivid draws the ribbon's edge in the accent colour.
|
|
236
|
+
const AWARD_RIBBON = 'M8.21 13.89L7 23l5-3 5 3-1.21-9.12';
|
|
237
|
+
const AWARD_RIBBON_INNER = 'M9.67 14.3L8.9 20.11L12 18.25L15.1 20.11L14.32 14.3z';
|
|
238
|
+
function awardFilled({ primaryColor, secondaryColor, strokeWidth }, ribbonEdge) {
|
|
239
|
+
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 })] }));
|
|
240
|
+
}
|
|
201
241
|
const NtdAward = /* @__PURE__ */ createIcon({
|
|
202
242
|
displayName: 'NtdAward',
|
|
203
243
|
paths: {
|
|
204
|
-
solid: (
|
|
244
|
+
solid: (props) => awardFilled(props, props.primaryColor),
|
|
205
245
|
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: (
|
|
246
|
+
duotone: (props) => awardFilled(props, props.primaryColor),
|
|
247
|
+
vivid: (props) => awardFilled(props, props.accentColor),
|
|
208
248
|
},
|
|
209
249
|
});
|
|
210
250
|
const NtdCoffee = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdArrowUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdChevronUp, NtdClose, NtdExternalLink, NtdMenu, NtdMoreHorizontal, NtdMoreVertical, NtdRefresh } from './navigation.js';
|
|
2
2
|
export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut } from './actions.js';
|
|
3
|
-
export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe } from './ui.js';
|
|
3
|
+
export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdHourglass, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe } from './ui.js';
|
|
4
4
|
export { NtdBiodegradable, NtdCarbonFootprint, NtdCo2, NtdCompost, NtdEcoFriendly, NtdEvCharger, NtdHydropower, NtdNetZero, NtdOrganic, NtdPlantTree, NtdRecycle, NtdSolarPanel, NtdTrashSort, NtdWildlife, NtdWindTurbine, sustainabilityIcons } from './sustainability.js';
|
|
5
5
|
export { NtdAccessibility, NtdAssistiveTech, NtdAudioDescription, NtdBlind, NtdBraille, NtdClosedCaptions, NtdDeaf, NtdDyslexia, NtdEasyRead, NtdHearingAid, NtdScreenReader, NtdSignLanguage, NtdWheelchair, accessibilityIcons } from './accessibility.js';
|
|
6
6
|
export { NtdAudit, NtdCcpa, NtdCertified, NtdCompliance, NtdContract, NtdCookieConsent, NtdCopyright, NtdGdpr, NtdLegalDocument, NtdPatent, NtdPrivacyPolicy, NtdTermsOfService, NtdTrademark, legalIcons } from './legal.js';
|
package/dist/esm/icons/media.js
CHANGED
|
@@ -83,48 +83,78 @@ 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
|
|
115
132
|
// stems end where that edge is vertical, so stem and head meet without a step (the heads stuck
|
|
116
133
|
// out right of the stems). The outline heads are the filled ones moved in by half a stroke, so
|
|
117
|
-
// their stroke meets the stem the same way.
|
|
134
|
+
// their stroke meets the stem the same way. Every variant but `outline` draws the stems and the
|
|
135
|
+
// beam twice the stroke width; the stems move left by the extra half width, so their right edge
|
|
136
|
+
// stays on the heads' (9.3 and 21.3), and the beam drops half a unit to keep a mitred corner in
|
|
137
|
+
// the box.
|
|
118
138
|
const MUSIC_STEMS = 'M8.3 17.22V5l12-2v12.22';
|
|
139
|
+
/** The stems and the beam for a line `width` wide; `sharp` stops them half a width higher. */
|
|
140
|
+
function musicStems(width, sharp = false) {
|
|
141
|
+
const left = 9.3 - width / 2;
|
|
142
|
+
const right = 21.3 - width / 2;
|
|
143
|
+
const end = sharp ? width / 2 : 0;
|
|
144
|
+
return `M${left} ${17.22 - end}V5.5L${right} 3.5V${15.22 - end}`;
|
|
145
|
+
}
|
|
146
|
+
function musicFilled(stems, heads, strokeWidth, sharp = false) {
|
|
147
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: musicStems(strokeWidth * 2, sharp), stroke: stems, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("ellipse", { cx: "5.97", cy: "18", rx: "3.5", ry: "2.3", transform: "rotate(-24 5.97 18)", fill: heads[0] }), jsx("ellipse", { cx: "17.97", cy: "16", rx: "3.5", ry: "2.3", transform: "rotate(-24 17.97 16)", fill: heads[1] })] }));
|
|
148
|
+
}
|
|
119
149
|
const NtdMusic = /* @__PURE__ */ createIcon({
|
|
120
150
|
displayName: 'NtdMusic',
|
|
121
151
|
paths: {
|
|
122
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
123
|
-
// the
|
|
124
|
-
sharp: ({ primaryColor, strokeWidth }) => (
|
|
152
|
+
solid: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth),
|
|
153
|
+
// the square caps of `sharp` then end at the heads' edge
|
|
154
|
+
sharp: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth, true),
|
|
125
155
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: MUSIC_STEMS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", children: [jsx("ellipse", { cx: "5.97", cy: "18", rx: "2.5", ry: "1.3", transform: "rotate(-24 5.97 18)" }), jsx("ellipse", { cx: "17.97", cy: "16", rx: "2.5", ry: "1.3", transform: "rotate(-24 17.97 16)" })] })] })),
|
|
126
|
-
duotone: ({ primaryColor,
|
|
127
|
-
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (
|
|
156
|
+
duotone: ({ primaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, primaryColor], strokeWidth),
|
|
157
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => musicFilled(primaryColor, [primaryColor, secondaryColor], strokeWidth),
|
|
128
158
|
},
|
|
129
159
|
});
|
|
130
160
|
// The flap is a cut through the envelope, kept inside it: its ends meet the sides flush (the
|
|
@@ -163,13 +193,18 @@ const NtdPhone = /* @__PURE__ */ createIcon({
|
|
|
163
193
|
},
|
|
164
194
|
});
|
|
165
195
|
// The tail leaves the bubble's bottom edge 4 units in from the left (it ran down the left side).
|
|
196
|
+
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';
|
|
197
|
+
const CHAT_BUBBLE = 'M5 3h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z';
|
|
198
|
+
/** The tail alone, reaching 1 under the bubble so the two colours meet without a seam. */
|
|
199
|
+
const CHAT_TAIL = 'M7 16v5l5-5z';
|
|
166
200
|
const NtdChat = /* @__PURE__ */ createIcon({
|
|
167
201
|
displayName: 'NtdChat',
|
|
168
202
|
paths: {
|
|
169
|
-
solid: ({ primaryColor
|
|
170
|
-
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d:
|
|
171
|
-
|
|
172
|
-
|
|
203
|
+
solid: ({ primaryColor }) => jsx("path", { d: CHAT, fill: primaryColor }),
|
|
204
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: CHAT, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
205
|
+
// fills only: the bubble primary, the tail secondary
|
|
206
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
207
|
+
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: CHAT_TAIL, fill: secondaryColor }), jsx("path", { d: CHAT_BUBBLE, fill: primaryColor })] })),
|
|
173
208
|
},
|
|
174
209
|
});
|
|
175
210
|
/* NtdSend — the paper plane read ~20% oversized next to the rest of the set,
|
|
@@ -199,13 +234,23 @@ const NtdNotification = /* @__PURE__ */ createIcon({
|
|
|
199
234
|
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
235
|
},
|
|
201
236
|
});
|
|
237
|
+
// NtdWifi: three arcs round the dot (r 5.2 / 9.5 / 13.8 about 12,19.5, ±45°), 1.5 × the stroke
|
|
238
|
+
// width in every variant but `outline` — half again as heavy. Concentric, so the heavier arcs keep
|
|
239
|
+
// even gaps, and small enough that the outer one's square caps in `sharp` stay in the box. The
|
|
240
|
+
// inner arc sits further from the dot (it was r 4.4) and the arcs closer together, the outer one
|
|
241
|
+
// where it was. Duotone and vivid: the dot and the inner arc primary, the outer arcs secondary.
|
|
242
|
+
const WIFI_INNER = 'M8.32 15.82A5.2 5.2 0 0 1 15.68 15.82';
|
|
243
|
+
const WIFI_OUTER = 'M5.28 12.78A9.5 9.5 0 0 1 18.72 12.78M2.24 9.74A13.8 13.8 0 0 1 21.76 9.74';
|
|
244
|
+
function wifiFilled(near, far, strokeWidth) {
|
|
245
|
+
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 })] }));
|
|
246
|
+
}
|
|
202
247
|
const NtdWifi = /* @__PURE__ */ createIcon({
|
|
203
248
|
displayName: 'NtdWifi',
|
|
204
249
|
paths: {
|
|
205
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
206
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
207
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
208
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
250
|
+
solid: ({ primaryColor, strokeWidth }) => wifiFilled(primaryColor, primaryColor, strokeWidth),
|
|
251
|
+
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 })] })),
|
|
252
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
253
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => wifiFilled(primaryColor, secondaryColor, strokeWidth),
|
|
209
254
|
},
|
|
210
255
|
});
|
|
211
256
|
const NtdBluetooth = /* @__PURE__ */ createIcon({
|
|
@@ -227,13 +272,25 @@ const NtdPalette = /* @__PURE__ */ createIcon({
|
|
|
227
272
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 3a9 9 0 100 18h1a2 2 0 000-4h-1a2 2 0 110-4h1a3 3 0 103-3 3 3 0 01-3-3V6a3 3 0 00-1-3z", fill: primaryColor, opacity: "0.25" }), jsx("path", { d: "M12 3a9 9 0 100 18h1a2 2 0 000-4h-1a2 2 0 110-4h1a3 3 0 103-3 3 3 0 01-3-3V6a3 3 0 00-1-3z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "7", cy: "9", r: "1.2", fill: secondaryColor }), jsx("circle", { cx: "10", cy: "7", r: "1.2", fill: "#8B5CF6" }), jsx("circle", { cx: "7", cy: "13", r: "1.2", fill: "#EF4444" })] })),
|
|
228
273
|
},
|
|
229
274
|
});
|
|
275
|
+
// NtdBrush: a paintbrush lying at 45° — a tapering handle with a round end, the metal ferrule, and
|
|
276
|
+
// the bristles swelling out of it to a point at the bottom left (it was a pencil-like wedge with a
|
|
277
|
+
// blob). Filled, the ferrule is set off from the handle and the bristles by two accent cuts.
|
|
278
|
+
// Duotone, fills only: the handle and the ferrule primary, the bristles secondary; vivid puts the
|
|
279
|
+
// ferrule in the accent colour.
|
|
280
|
+
const BRUSH_HANDLE = 'M19.35 2.81A1.3 1.3 0 0 1 21.19 4.65L13.91 12.49L11.51 10.09Z';
|
|
281
|
+
const BRUSH_FERRULE = 'M11.08 9.67L14.33 12.92L11.36 15.89L8.11 12.64Z';
|
|
282
|
+
const BRUSH_BRISTLES = 'M8.11 12.64L11.36 15.89C9.95 18.43 7.76 20.49 2.81 21.19C3.51 16.24 5.57 14.05 8.11 12.64Z';
|
|
283
|
+
const BRUSH_CUTS = 'M10.37 8.96L15.04 13.63M7.4 11.93L12.07 16.6';
|
|
284
|
+
function brushFilled(handle, ferrule, bristles, ferruleOpacity = 1) {
|
|
285
|
+
return (jsxs(Fragment, { children: [jsx("path", { d: BRUSH_HANDLE, fill: handle }), jsx("path", { d: BRUSH_FERRULE, fill: ferrule, opacity: ferruleOpacity }), jsx("path", { d: BRUSH_BRISTLES, fill: bristles })] }));
|
|
286
|
+
}
|
|
230
287
|
const NtdBrush = /* @__PURE__ */ createIcon({
|
|
231
288
|
displayName: 'NtdBrush',
|
|
232
289
|
paths: {
|
|
233
|
-
solid: ({ primaryColor,
|
|
234
|
-
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d:
|
|
235
|
-
duotone: ({ primaryColor, secondaryColor
|
|
236
|
-
vivid: ({ primaryColor, secondaryColor
|
|
290
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [brushFilled(primaryColor, primaryColor, primaryColor), within(uid, 'brush', jsx("path", { d: `${BRUSH_HANDLE}${BRUSH_FERRULE}${BRUSH_BRISTLES}` }), jsx("path", { d: BRUSH_CUTS, stroke: accentColor, strokeWidth: "1", opacity: accentOpacity }))] })),
|
|
291
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${BRUSH_HANDLE}${BRUSH_FERRULE}${BRUSH_BRISTLES}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
292
|
+
duotone: ({ primaryColor, secondaryColor }) => brushFilled(primaryColor, primaryColor, secondaryColor),
|
|
293
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => brushFilled(primaryColor, accentColor, secondaryColor, accentOpacity),
|
|
237
294
|
},
|
|
238
295
|
});
|
|
239
296
|
const NtdPenTool = /* @__PURE__ */ createIcon({
|