@nice2dev/icons 1.2.2 → 1.3.1
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 +503 -0
- package/README.md +146 -134
- package/dist/cjs/NiceIconPicker.js +17 -19
- package/dist/cjs/createIcon.js +10 -2
- package/dist/cjs/iconParts.js +49 -0
- package/dist/cjs/icons/accessibility.js +12 -4
- package/dist/cjs/icons/actions.js +67 -25
- package/dist/cjs/icons/business.js +58 -28
- package/dist/cjs/icons/ecommerce.js +0 -20
- package/dist/cjs/icons/education.js +22 -9
- package/dist/cjs/icons/files.js +70 -56
- package/dist/cjs/icons/fun.js +39 -25
- package/dist/cjs/icons/gaming.js +29 -4
- package/dist/cjs/icons/health.js +11 -4
- package/dist/cjs/icons/index.js +55 -5
- package/dist/cjs/icons/input.js +120 -0
- package/dist/cjs/icons/legal.js +4 -9
- package/dist/cjs/icons/media.js +26 -11
- package/dist/cjs/icons/navigation.js +4 -2
- package/dist/cjs/icons/omniverk.js +19 -6
- package/dist/cjs/icons/realestate.js +10 -4
- package/dist/cjs/icons/saas.js +15 -4
- package/dist/cjs/icons/science.js +6 -3
- package/dist/cjs/icons/shapes.js +66 -31
- package/dist/cjs/icons/sports.js +6 -2
- package/dist/cjs/icons/ui.js +62 -20
- package/dist/cjs/icons/weather.js +18 -8
- package/dist/cjs/index.js +55 -5
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/resolver.js +46 -1
- package/dist/cjs/rsc.js +1 -1
- package/dist/esm/NiceIconPicker.js +19 -21
- package/dist/esm/createIcon.js +10 -2
- package/dist/esm/iconParts.js +46 -0
- package/dist/esm/icons/accessibility.js +12 -4
- package/dist/esm/icons/actions.js +67 -26
- package/dist/esm/icons/business.js +58 -29
- package/dist/esm/icons/ecommerce.js +1 -19
- package/dist/esm/icons/education.js +22 -10
- package/dist/esm/icons/files.js +70 -56
- package/dist/esm/icons/fun.js +37 -25
- package/dist/esm/icons/gaming.js +29 -5
- package/dist/esm/icons/health.js +11 -4
- package/dist/esm/icons/index.js +9 -8
- package/dist/esm/icons/input.js +75 -0
- package/dist/esm/icons/legal.js +4 -9
- package/dist/esm/icons/media.js +26 -11
- package/dist/esm/icons/navigation.js +4 -2
- package/dist/esm/icons/omniverk.js +19 -6
- package/dist/esm/icons/realestate.js +10 -4
- package/dist/esm/icons/saas.js +15 -4
- package/dist/esm/icons/science.js +6 -3
- package/dist/esm/icons/shapes.js +66 -31
- package/dist/esm/icons/sports.js +6 -2
- package/dist/esm/icons/ui.js +62 -21
- package/dist/esm/icons/weather.js +18 -8
- package/dist/esm/index.js +9 -8
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/resolver.js +46 -1
- package/dist/esm/rsc.js +1 -1
- package/dist/types/iconParts.d.ts +19 -0
- package/dist/types/icons/actions.d.ts +1 -0
- package/dist/types/icons/business.d.ts +2 -0
- package/dist/types/icons/ecommerce.d.ts +0 -2
- package/dist/types/icons/education.d.ts +1 -0
- package/dist/types/icons/files.d.ts +2 -1
- package/dist/types/icons/fun.d.ts +6 -1
- package/dist/types/icons/gaming.d.ts +2 -0
- package/dist/types/icons/index.d.ts +9 -8
- package/dist/types/icons/input.d.ts +53 -0
- package/dist/types/icons/omniverk.d.ts +0 -2
- package/dist/types/icons/ui.d.ts +1 -0
- package/dist/types/types.d.ts +6 -0
- package/package.json +3 -3
|
@@ -72,11 +72,16 @@ const NtdInsurance = /* @__PURE__ */ createIcon.createIcon({
|
|
|
72
72
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M8.5 12l2.5 2.5L16 9", stroke: primaryColor, strokeWidth: "1.8", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] })),
|
|
73
73
|
},
|
|
74
74
|
});
|
|
75
|
-
/**
|
|
75
|
+
/**
|
|
76
|
+
* Tax — percent on an official stamped badge (distinct from NtdPercent/NtdReceipt). Filled, the
|
|
77
|
+
* percent sign is in the accent colour (it was always white) and its dots are rings, the badge
|
|
78
|
+
* showing through their holes.
|
|
79
|
+
*/
|
|
80
|
+
const TAX_DOTS = 'M9.2 7.3a1.9 1.9 0 100 3.8 1.9 1.9 0 100-3.8zM9.2 8.4a.8.8 0 100 1.6.8.8 0 100-1.6zM14.8 12.9a1.9 1.9 0 100 3.8 1.9 1.9 0 100-3.8zM14.8 14a.8.8 0 100 1.6.8.8 0 100-1.6z';
|
|
76
81
|
const NtdTax = /* @__PURE__ */ createIcon.createIcon({
|
|
77
82
|
displayName: 'NtdTax',
|
|
78
83
|
paths: {
|
|
79
|
-
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: primaryColor }), jsxRuntime.
|
|
84
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: primaryColor }), jsxRuntime.jsxs("g", { opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: TAX_DOTS, fillRule: "evenodd", fill: accentColor }), jsxRuntime.jsx("line", { x1: "15.5", y1: "8.5", x2: "8.5", y2: "15.5", stroke: accentColor, strokeWidth: "1.8", strokeLinecap: "round" })] })] })),
|
|
80
85
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "9.2", cy: "9.2", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsxRuntime.jsx("circle", { cx: "14.8", cy: "14.8", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsxRuntime.jsx("line", { x1: "15.5", y1: "8.5", x2: "8.5", y2: "15.5", stroke: primaryColor, strokeWidth: "1.6", strokeLinecap: "round" })] })),
|
|
81
86
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "9.2", cy: "9.2", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsxRuntime.jsx("circle", { cx: "14.8", cy: "14.8", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsxRuntime.jsx("line", { x1: "15.5", y1: "8.5", x2: "8.5", y2: "15.5", stroke: primaryColor, strokeWidth: "1.6", strokeLinecap: "round" })] })),
|
|
82
87
|
},
|
|
@@ -91,13 +96,21 @@ const NtdGym = /* @__PURE__ */ createIcon.createIcon({
|
|
|
91
96
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "5.5", y: "6", width: "2.6", height: "12", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { x: "15.9", y: "6", width: "2.6", height: "12", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsxRuntime.jsx("rect", { x: "2.5", y: "8", width: "3", height: "8", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "5.5", y: "6", width: "2.6", height: "12", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "18.5", y: "8", width: "3", height: "8", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { x: "15.9", y: "6", width: "2.6", height: "12", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
92
97
|
},
|
|
93
98
|
});
|
|
94
|
-
/**
|
|
99
|
+
/**
|
|
100
|
+
* Lab — Erlenmeyer flask with liquid (distinct from NtdAIBrain/NtdActivity). The liquid sits low
|
|
101
|
+
* and is the flask moved in by 1 — the glass is as thick at the walls as at the bottom (the
|
|
102
|
+
* liquid hugged the walls and the bottom looked twice as heavy). Filled: flask primary, liquid in
|
|
103
|
+
* the accent colour; only vivid has bubbles — accent dots in a secondary liquid.
|
|
104
|
+
*/
|
|
105
|
+
const LAB_FLASK = 'M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z';
|
|
106
|
+
const LAB_LIQUID = 'M7.4 15.5h9.2l1.73 3a1 1 0 01-.86 1.5H6.53a1 1 0 01-.86-1.5z';
|
|
95
107
|
const NtdLab = /* @__PURE__ */ createIcon.createIcon({
|
|
96
108
|
displayName: 'NtdLab',
|
|
97
109
|
paths: {
|
|
98
|
-
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
99
|
-
|
|
100
|
-
|
|
110
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsxRuntime.jsx("path", { d: LAB_LIQUID, fill: accentColor, opacity: accentOpacity })] })),
|
|
111
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsxRuntime.jsx("path", { d: LAB_LIQUID, fill: secondaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("circle", { cx: "10.5", cy: "17.6", r: "0.9" }), jsxRuntime.jsx("circle", { cx: "13.6", cy: "18.7", r: "0.7" })] })] })),
|
|
112
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6.3", y1: "15.5", x2: "17.7", y2: "15.5", stroke: primaryColor, strokeWidth: "1.4" })] })),
|
|
113
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: LAB_LIQUID, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsxRuntime.jsx("line", { x1: "6.3", y1: "15.5", x2: "17.7", y2: "15.5", stroke: primaryColor, strokeWidth: "1.4" })] })),
|
|
101
114
|
},
|
|
102
115
|
});
|
|
103
116
|
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var createIcon = require('../createIcon.js');
|
|
5
|
+
var iconParts = require('../iconParts.js');
|
|
5
6
|
|
|
6
7
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
7
8
|
RESIDENTIAL
|
|
@@ -111,13 +112,18 @@ const NtdBathroom = /* @__PURE__ */ createIcon.createIcon({
|
|
|
111
112
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M4 12h16v4a4 4 0 01-4 4H8a4 4 0 01-4-4v-4z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M4 12h16v4a4 4 0 01-4 4H8a4 4 0 01-4-4v-4z", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "14", cy: "6", r: "2", fill: secondaryColor }), jsxRuntime.jsx("path", { d: "M6 12V6a4 4 0 018 0", stroke: "white", strokeWidth: "1", fill: "none" }), jsxRuntime.jsx("path", { d: "M6 20v2M18 20v2", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
|
|
112
113
|
},
|
|
113
114
|
});
|
|
115
|
+
// NtdGarage: the door is drawn as in the outline — frame and two slats — in the accent colour on
|
|
116
|
+
// the filled building (it was a 30% white patch with white lines), kept inside the building. The
|
|
117
|
+
// duotone is fills only: building primary, door secondary, its frame and slats primary.
|
|
118
|
+
const GARAGE = 'M12 2L2 8v12a2 2 0 002 2h16a2 2 0 002-2V8L12 2z';
|
|
119
|
+
const GARAGE_DOOR = 'M5 22V12h14v10M5 15h14M5 18h14';
|
|
114
120
|
const NtdGarage = /* @__PURE__ */ createIcon.createIcon({
|
|
115
121
|
displayName: 'NtdGarage',
|
|
116
122
|
paths: {
|
|
117
|
-
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
118
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
119
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
120
|
-
vivid: ({ primaryColor, secondaryColor
|
|
123
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, fill: primaryColor }), iconParts.within(uid, 'door', jsxRuntime.jsx("path", { d: GARAGE }), jsxRuntime.jsx("path", { d: GARAGE_DOOR, stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] })),
|
|
124
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsxRuntime.jsx("rect", { x: "5", y: "12", width: "14", height: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M5 15h14M5 18h14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
125
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, fill: primaryColor }), jsxRuntime.jsx("rect", { x: "5", y: "12", width: "14", height: "10", fill: secondaryColor }), iconParts.within(uid, 'door', jsxRuntime.jsx("path", { d: GARAGE }), jsxRuntime.jsx("path", { d: GARAGE_DOOR, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
126
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: GARAGE, fill: primaryColor }), jsxRuntime.jsx("path", { d: GARAGE, fill: "white", opacity: "0.08" }), iconParts.within(uid, 'door', jsxRuntime.jsx("path", { d: GARAGE }), jsxRuntime.jsx("path", { d: GARAGE_DOOR, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
121
127
|
},
|
|
122
128
|
});
|
|
123
129
|
const NtdPool = /* @__PURE__ */ createIcon.createIcon({
|
package/dist/cjs/icons/saas.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var createIcon = require('../createIcon.js');
|
|
5
|
+
var iconParts = require('../iconParts.js');
|
|
5
6
|
|
|
6
7
|
// ═══════════════════════════════════════════════════════════════════════════════
|
|
7
8
|
// SaaS Icons
|
|
@@ -106,13 +107,23 @@ const NtdUptime = /* @__PURE__ */ createIcon.createIcon({
|
|
|
106
107
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), jsxRuntime.jsx("path", { d: "M12 6v6h6", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("path", { d: "M8 16l2-4 2 2 2-3 2 5", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
|
|
107
108
|
},
|
|
108
109
|
});
|
|
110
|
+
// NtdBilling: a bill paid by card — the page with its lines and, in front of it, a card. (A card
|
|
111
|
+
// alone is NtdCreditCard, a bill alone NtdInvoice / NtdReceipt.) The page is cut away around the
|
|
112
|
+
// card, a real gap rather than a painted one, so the two read apart on any background.
|
|
113
|
+
const BILL_PAPER = { x: 2.5, y: 2, width: 13, height: 18, rx: 1.5 };
|
|
114
|
+
const BILL_CARD = { x: 9.5, y: 12, width: 13, height: 9, rx: 1.6 };
|
|
115
|
+
// everything but the card grown by 1.5 — the page is drawn through this
|
|
116
|
+
const BILL_PAPER_CUT = 'M0 0H24V24H0Z M11.1 10.5H24V22.5H8V13.6A3.1 3.1 0 0111.1 10.5Z';
|
|
117
|
+
const BILL_LINES = 'M5.5 6h7M5.5 9h4.5';
|
|
118
|
+
const BILL_CARD_STRIPE = { x: 9.5, y: 14, width: 13, height: 1.8 };
|
|
119
|
+
const BILL_CARD_BAR = { x: 11.3, y: 17.6, width: 5.5, height: 1.4, rx: 0.5 };
|
|
109
120
|
const NtdBilling = /* @__PURE__ */ createIcon.createIcon({
|
|
110
121
|
displayName: 'NtdBilling',
|
|
111
122
|
paths: {
|
|
112
|
-
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
113
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
114
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
115
|
-
vivid: ({ primaryColor,
|
|
123
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'paper', jsxRuntime.jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BILL_PAPER, fill: primaryColor }), jsxRuntime.jsx("path", { d: BILL_LINES, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })), jsxRuntime.jsx("rect", { ...BILL_CARD, fill: primaryColor }), iconParts.within(uid, 'stripe', jsxRuntime.jsx("rect", { ...BILL_CARD }), jsxRuntime.jsx("rect", { ...BILL_CARD_STRIPE, fill: accentColor, opacity: accentOpacity })), jsxRuntime.jsx("rect", { ...BILL_CARD_BAR, fill: accentColor, opacity: accentOpacity })] })),
|
|
124
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'paper', jsxRuntime.jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BILL_PAPER, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BILL_LINES, stroke: primaryColor, strokeWidth: strokeWidth })] })), jsxRuntime.jsx("rect", { ...BILL_CARD, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M9.5 15h13", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
125
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth, accentColor, uid, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'paper', jsxRuntime.jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BILL_PAPER, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { ...BILL_PAPER, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BILL_LINES, stroke: primaryColor, strokeWidth: strokeWidth })] })), jsxRuntime.jsx("rect", { ...BILL_CARD, fill: primaryColor }), iconParts.within(uid, 'stripe', jsxRuntime.jsx("rect", { ...BILL_CARD }), jsxRuntime.jsx("rect", { ...BILL_CARD_STRIPE, fill: accentColor }))] })),
|
|
126
|
+
vivid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconParts.within(uid, 'paper', jsxRuntime.jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BILL_PAPER, fill: primaryColor, opacity: "0.55" }), jsxRuntime.jsx("path", { d: BILL_LINES, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })), jsxRuntime.jsx("rect", { ...BILL_CARD, fill: primaryColor }), jsxRuntime.jsx("rect", { ...BILL_CARD, fill: "white", opacity: "0.1" }), iconParts.within(uid, 'stripe', jsxRuntime.jsx("rect", { ...BILL_CARD }), jsxRuntime.jsx("rect", { ...BILL_CARD_STRIPE, fill: accentColor, opacity: accentOpacity })), jsxRuntime.jsx("rect", { ...BILL_CARD_BAR, fill: accentColor, opacity: accentOpacity })] })),
|
|
116
127
|
},
|
|
117
128
|
});
|
|
118
129
|
const NtdTeamwork = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -63,13 +63,16 @@ const NtdDna = /* @__PURE__ */ createIcon.createIcon({
|
|
|
63
63
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
64
64
|
CHEMISTRY
|
|
65
65
|
───────────────────────────────────────────────────────────────────────────── */
|
|
66
|
+
// The filled atom draws its orbits at 0.75 of the stroke width around a smaller nucleus: at 2 the
|
|
67
|
+
// three orbits and the nucleus ran together into one heavy blob in the middle. The nucleus is in
|
|
68
|
+
// the accent colour in every variant that fills it.
|
|
66
69
|
const NtdAtom = /* @__PURE__ */ createIcon.createIcon({
|
|
67
70
|
displayName: 'NtdAtom',
|
|
68
71
|
paths: {
|
|
69
|
-
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "
|
|
72
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: accentColor, opacity: accentOpacity }), jsxRuntime.jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none", children: [jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(-60 12 12)" })] })] })),
|
|
70
73
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(-60 12 12)" })] })),
|
|
71
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(-60 12 12)" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "
|
|
72
|
-
vivid: ({
|
|
74
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, accentColor, accentOpacity, strokeWidth, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(-60 12 12)" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: accentColor, opacity: accentOpacity }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(-60 12 12)" })] })),
|
|
75
|
+
vivid: ({ secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: accentColor, opacity: accentOpacity }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: "#8B5CF6", strokeWidth: "1.5", fill: "none", transform: "rotate(60 12 12)" }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: "#8B5CF6", strokeWidth: "1.5", fill: "none", transform: "rotate(-60 12 12)" })] })),
|
|
73
76
|
},
|
|
74
77
|
});
|
|
75
78
|
const NtdMolecule = /* @__PURE__ */ createIcon.createIcon({
|
package/dist/cjs/icons/shapes.js
CHANGED
|
@@ -44,7 +44,8 @@ const NtdSquare = /* @__PURE__ */ createIcon.createIcon({
|
|
|
44
44
|
paths: {
|
|
45
45
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor })),
|
|
46
46
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
47
|
-
|
|
47
|
+
// two halves side by side, a colour each — no outline
|
|
48
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M5 3h7v18H5a2 2 0 01-2-2V5a2 2 0 012-2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 3h7a2 2 0 012 2v14a2 2 0 01-2 2h-7z", fill: secondaryColor })] })),
|
|
48
49
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor }), jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" })] })),
|
|
49
50
|
},
|
|
50
51
|
});
|
|
@@ -57,22 +58,33 @@ const NtdCircle = /* @__PURE__ */ createIcon.createIcon({
|
|
|
57
58
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" })] })),
|
|
58
59
|
},
|
|
59
60
|
});
|
|
61
|
+
// The polygons have sharp corners in every variant but `rounded`. The outline strokes join with
|
|
62
|
+
// miters (the default round joins rounded them), and the rounded corners are drawn as arcs,
|
|
63
|
+
// because the derived `rounded` cannot reshape a filled polygon.
|
|
64
|
+
// The outline triangle is the solid one moved in by 1: its mitred stroke then ends on the solid
|
|
65
|
+
// edge, instead of the 53° point poking out of the box.
|
|
66
|
+
const TRIANGLE_LINE = 'M12 4.24L20.38 21H3.62Z';
|
|
67
|
+
const TRIANGLE_ROUND = 'M9.76 6.47A2.5 2.5 0 0 1 14.24 6.47L20.19 18.38A2.5 2.5 0 0 1 17.95 22L6.05 22A2.5 2.5 0 0 1 3.81 18.38Z';
|
|
60
68
|
const NtdTriangle = /* @__PURE__ */ createIcon.createIcon({
|
|
61
69
|
displayName: 'NtdTriangle',
|
|
62
70
|
paths: {
|
|
63
|
-
solid: ({ primaryColor
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
71
|
+
solid: ({ primaryColor }) => jsxRuntime.jsx("polygon", { points: "12,2 22,22 2,22", fill: primaryColor }),
|
|
72
|
+
rounded: ({ primaryColor }) => jsxRuntime.jsx("path", { d: TRIANGLE_ROUND, fill: primaryColor }),
|
|
73
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: TRIANGLE_LINE, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })),
|
|
74
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polygon", { points: "12,2 22,22 2,22", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: TRIANGLE_LINE, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
|
|
75
|
+
vivid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polygon", { points: "12,2 22,22 2,22", fill: primaryColor }), jsxRuntime.jsx("polygon", { points: "12,2 22,22 2,22", fill: "white", opacity: "0.1" })] })),
|
|
67
76
|
},
|
|
68
77
|
});
|
|
78
|
+
const HEXAGON = 'M12 2L21 7V17L12 22L3 17V7Z';
|
|
79
|
+
const HEXAGON_ROUND = 'M11.03 2.54A2 2 0 0 1 12.97 2.54L19.97 6.43A2 2 0 0 1 21 8.18L21 15.82A2 2 0 0 1 19.97 17.57L12.97 21.46A2 2 0 0 1 11.03 21.46L4.03 17.57A2 2 0 0 1 3 15.82L3 8.18A2 2 0 0 1 4.03 6.43Z';
|
|
69
80
|
const NtdHexagon = /* @__PURE__ */ createIcon.createIcon({
|
|
70
81
|
displayName: 'NtdHexagon',
|
|
71
82
|
paths: {
|
|
72
|
-
solid: ({ primaryColor
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
83
|
+
solid: ({ primaryColor }) => jsxRuntime.jsx("path", { d: HEXAGON, fill: primaryColor }),
|
|
84
|
+
rounded: ({ primaryColor }) => jsxRuntime.jsx("path", { d: HEXAGON_ROUND, fill: primaryColor }),
|
|
85
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: HEXAGON, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })),
|
|
86
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: HEXAGON, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: HEXAGON, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
|
|
87
|
+
vivid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: HEXAGON, fill: primaryColor }), jsxRuntime.jsx("path", { d: HEXAGON, fill: "white", opacity: "0.1" })] })),
|
|
76
88
|
},
|
|
77
89
|
});
|
|
78
90
|
const NtdOctagon = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -106,9 +118,12 @@ const NtdCross = /* @__PURE__ */ createIcon.createIcon({
|
|
|
106
118
|
displayName: 'NtdCross',
|
|
107
119
|
paths: {
|
|
108
120
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxRuntime.jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: primaryColor })),
|
|
109
|
-
|
|
110
|
-
|
|
121
|
+
// miter joins: the default round ones rounded all twelve corners of the outline
|
|
122
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })),
|
|
123
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
|
|
111
124
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: "white", opacity: "0.1" })] })),
|
|
125
|
+
// rounded arm ends and filleted inner corners — the derived `rounded` cannot reshape a path
|
|
126
|
+
rounded: ({ primaryColor }) => (jsxRuntime.jsx("path", { d: "M10.5 2h3a1.5 1.5 0 011.5 1.5V8a1 1 0 001 1h4.5a1.5 1.5 0 011.5 1.5v3a1.5 1.5 0 01-1.5 1.5H16a1 1 0 00-1 1v4.5a1.5 1.5 0 01-1.5 1.5h-3A1.5 1.5 0 019 20.5V16a1 1 0 00-1-1H3.5A1.5 1.5 0 012 13.5v-3A1.5 1.5 0 013.5 9H8a1 1 0 001-1V3.5A1.5 1.5 0 0110.5 2z", fill: primaryColor })),
|
|
112
127
|
},
|
|
113
128
|
});
|
|
114
129
|
const NtdStar4 = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -120,40 +135,44 @@ const NtdStar4 = /* @__PURE__ */ createIcon.createIcon({
|
|
|
120
135
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: "white", opacity: "0.1" })] })),
|
|
121
136
|
},
|
|
122
137
|
});
|
|
138
|
+
// The four corner arrows: the tail's level run sits at the height of the arrowhead's tip, so the
|
|
139
|
+
// two meet (it ran 2 units off the tip and the head looked stuck on beside the tail). It stops 2
|
|
140
|
+
// short of the tip: with the square caps of `sharp` it stuck out of the point. The filled variants
|
|
141
|
+
// draw at twice the stroke width, like NtdCheck.
|
|
123
142
|
const NtdCornerUpLeft = /* @__PURE__ */ createIcon.createIcon({
|
|
124
143
|
displayName: 'NtdCornerUpLeft',
|
|
125
144
|
paths: {
|
|
126
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 20v-
|
|
127
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 20v-
|
|
128
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M20 20v-
|
|
129
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth:
|
|
145
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
146
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
147
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
148
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
130
149
|
},
|
|
131
150
|
});
|
|
132
151
|
const NtdCornerUpRight = /* @__PURE__ */ createIcon.createIcon({
|
|
133
152
|
displayName: 'NtdCornerUpRight',
|
|
134
153
|
paths: {
|
|
135
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 20v-
|
|
136
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 20v-
|
|
137
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M4 20v-
|
|
138
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth:
|
|
154
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
155
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
156
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
157
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
139
158
|
},
|
|
140
159
|
});
|
|
141
160
|
const NtdCornerDownLeft = /* @__PURE__ */ createIcon.createIcon({
|
|
142
161
|
displayName: 'NtdCornerDownLeft',
|
|
143
162
|
paths: {
|
|
144
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M20
|
|
145
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M20
|
|
146
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M20
|
|
147
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth:
|
|
163
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
164
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
165
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
166
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
148
167
|
},
|
|
149
168
|
});
|
|
150
169
|
const NtdCornerDownRight = /* @__PURE__ */ createIcon.createIcon({
|
|
151
170
|
displayName: 'NtdCornerDownRight',
|
|
152
171
|
paths: {
|
|
153
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4
|
|
154
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4
|
|
155
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M4
|
|
156
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth:
|
|
172
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
173
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
174
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
175
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
157
176
|
},
|
|
158
177
|
});
|
|
159
178
|
const NtdMaximize = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -174,13 +193,29 @@ const NtdMinimize = /* @__PURE__ */ createIcon.createIcon({
|
|
|
174
193
|
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("polyline", { points: "4,14 10,14 10,20", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsxRuntime.jsx("polyline", { points: "20,10 14,10 14,4", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsxRuntime.jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3", stroke: "#3B82F6", strokeWidth: "1.5" }), jsxRuntime.jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14", stroke: secondaryColor, strokeWidth: "1.5" })] })),
|
|
175
194
|
},
|
|
176
195
|
});
|
|
196
|
+
// NtdMove: the line variants stop the cross 2 short of each arrowhead's point — with the square
|
|
197
|
+
// caps of `sharp` it stuck out of all four. The filled variants are one shape: arms twice the
|
|
198
|
+
// stroke width thick (like NtdCheck) ending in solid triangular heads; stroked at that width the
|
|
199
|
+
// small heads ran together into a blob.
|
|
200
|
+
const MOVE_HEADS = 'M6 9l-3 3 3 3M9 6l3-3 3 3M15 18l-3 3-3-3M18 9l3 3-3 3';
|
|
201
|
+
const MOVE_CROSS = 'M5 12h14M12 5v14';
|
|
202
|
+
/** The filled four-way arrow; `h` is half the arm thickness. */
|
|
203
|
+
function moveShape(h) {
|
|
204
|
+
const a = 12 - h;
|
|
205
|
+
const b = 12 + h;
|
|
206
|
+
const w = h + 1.5; // half the base of a head
|
|
207
|
+
const l = 12 - w;
|
|
208
|
+
const r = 12 + w;
|
|
209
|
+
return (`M12 2L${r} 6.5H${b}V${a}H17.5V${l}L22 12L17.5 ${r}V${b}H${b}V17.5H${r}L12 22L${l} 17.5H${a}` +
|
|
210
|
+
`V${b}H6.5V${r}L2 12L6.5 ${l}V${a}H${a}V6.5H${l}Z`);
|
|
211
|
+
}
|
|
177
212
|
const NtdMove = /* @__PURE__ */ createIcon.createIcon({
|
|
178
213
|
displayName: 'NtdMove',
|
|
179
214
|
paths: {
|
|
180
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
181
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.
|
|
182
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
183
|
-
vivid: ({ primaryColor,
|
|
215
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: primaryColor })),
|
|
216
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsx("path", { d: `${MOVE_HEADS}${MOVE_CROSS}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
217
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: MOVE_CROSS, stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2, fill: "none" }), jsxRuntime.jsx("path", { d: MOVE_HEADS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
218
|
+
vivid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: primaryColor }), jsxRuntime.jsx("path", { d: moveShape(strokeWidth), fill: "white", opacity: "0.1" })] })),
|
|
184
219
|
},
|
|
185
220
|
});
|
|
186
221
|
const NtdRepeat = /* @__PURE__ */ createIcon.createIcon({
|
package/dist/cjs/icons/sports.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var createIcon = require('../createIcon.js');
|
|
5
|
+
var iconParts = require('../iconParts.js');
|
|
5
6
|
|
|
6
7
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
7
8
|
BALL SPORTS
|
|
@@ -15,13 +16,16 @@ const NtdSoccerBall = /* @__PURE__ */ createIcon.createIcon({
|
|
|
15
16
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsxRuntime.jsx("path", { d: "M12 2a10 10 0 100 20 10 10 0 000-20zM12 7l3.09 2.25-.59 3.69-2.5 1.81-2.5-1.81-.59-3.69L12 7z", fill: "white", opacity: "0.5" }), jsxRuntime.jsx("path", { d: "M12 7V2M8.41 9.25L4 7M8.41 14.75l-3.5 3M12 16.75V22M15.59 14.75l3.5 3M15.59 9.25L20 7", stroke: "white", strokeWidth: "1", opacity: "0.4" })] })),
|
|
16
17
|
},
|
|
17
18
|
});
|
|
19
|
+
// The seams are cuts through the ball: accent coloured (so a cutout keeps them) and kept inside
|
|
20
|
+
// the ball, so they end flush on its edge (their round caps stuck out of it).
|
|
21
|
+
const BALL_SEAMS = 'M12 2v20M2 12h20M6 4c0 4.4 2.7 8 6 8s6-3.6 6-8M6 20c0-4.4 2.7-8 6-8s6 3.6 6 8';
|
|
18
22
|
const NtdBasketball = /* @__PURE__ */ createIcon.createIcon({
|
|
19
23
|
displayName: 'NtdBasketball',
|
|
20
24
|
paths: {
|
|
21
|
-
solid: ({ primaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("
|
|
25
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), iconParts.within(uid, 'seams', jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("path", { d: BALL_SEAMS, stroke: accentColor, strokeWidth: "1.5", fill: "none", opacity: accentOpacity }))] })),
|
|
22
26
|
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 2v20M2 12h20", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M6 4c0 4.4 2.7 8 6 8s6-3.6 6-8M6 20c0-4.4 2.7-8 6-8s6 3.6 6 8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
23
27
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M12 2v20M2 12h20", stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: "M6 4c0 4.4 2.7 8 6 8s6-3.6 6-8M6 20c0-4.4 2.7-8 6-8s6 3.6 6 8", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
24
|
-
vivid: ({ primaryColor, secondaryColor
|
|
28
|
+
vivid: ({ primaryColor, secondaryColor, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), iconParts.within(uid, 'seams', jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("path", { d: BALL_SEAMS, stroke: secondaryColor, strokeWidth: "1.6", fill: "none" }))] })),
|
|
25
29
|
},
|
|
26
30
|
});
|
|
27
31
|
const NtdTennis = /* @__PURE__ */ createIcon.createIcon({
|