@nice2dev/icons 1.2.1 → 1.3.0
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 +538 -0
- package/README.md +146 -134
- package/dist/cjs/NiceDesktopIconExporter.js +7 -3
- package/dist/cjs/NiceFaviconGenerator.js +6 -2
- package/dist/cjs/NiceIconPicker.js +36 -28
- package/dist/cjs/NiceIconPreview.js +3 -1
- package/dist/cjs/NiceIconSetCreator.js +7 -2
- package/dist/cjs/NtdIconBadge.js +18 -3
- package/dist/cjs/NtdIconMorph.js +3 -1
- package/dist/cjs/createIcon.js +10 -2
- package/dist/cjs/design-tokens.js +2 -0
- package/dist/cjs/iconMetadata.js +4 -0
- package/dist/cjs/iconParts.js +49 -0
- package/dist/cjs/icons/accessibility.js +12 -4
- package/dist/cjs/icons/actions.js +89 -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 +63 -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 +133 -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 +63 -5
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/resolver.js +55 -1
- package/dist/cjs/rsc.js +1 -1
- package/dist/cjs/utilities.js +4 -2
- package/dist/esm/NiceDesktopIconExporter.js +7 -3
- package/dist/esm/NiceFaviconGenerator.js +6 -2
- package/dist/esm/NiceIconPicker.js +37 -29
- package/dist/esm/NiceIconPreview.js +3 -1
- package/dist/esm/NiceIconSetCreator.js +7 -2
- package/dist/esm/NtdIconBadge.js +18 -3
- package/dist/esm/NtdIconMorph.js +3 -1
- package/dist/esm/createIcon.js +10 -2
- package/dist/esm/design-tokens.js +2 -0
- package/dist/esm/iconMetadata.js +4 -0
- package/dist/esm/iconParts.js +46 -0
- package/dist/esm/icons/accessibility.js +12 -4
- package/dist/esm/icons/actions.js +87 -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 +10 -9
- 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 +128 -32
- 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 +10 -9
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/resolver.js +55 -1
- package/dist/esm/rsc.js +1 -1
- package/dist/esm/utilities.js +4 -2
- package/dist/types/design-tokens.d.ts +2 -0
- package/dist/types/iconParts.d.ts +19 -0
- package/dist/types/icons/actions.d.ts +3 -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 +10 -9
- package/dist/types/icons/input.d.ts +53 -0
- package/dist/types/icons/omniverk.d.ts +0 -2
- package/dist/types/icons/shapes.d.ts +6 -0
- package/dist/types/icons/ui.d.ts +1 -0
- package/dist/types/types.d.ts +6 -0
- package/package.json +3 -1
|
@@ -70,11 +70,16 @@ const NtdInsurance = /* @__PURE__ */ createIcon({
|
|
|
70
70
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z", fill: secondaryColor, opacity: secondaryOpacity }), 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" }), jsx("path", { d: "M8.5 12l2.5 2.5L16 9", stroke: primaryColor, strokeWidth: "1.8", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" })] })),
|
|
71
71
|
},
|
|
72
72
|
});
|
|
73
|
-
/**
|
|
73
|
+
/**
|
|
74
|
+
* Tax — percent on an official stamped badge (distinct from NtdPercent/NtdReceipt). Filled, the
|
|
75
|
+
* percent sign is in the accent colour (it was always white) and its dots are rings, the badge
|
|
76
|
+
* showing through their holes.
|
|
77
|
+
*/
|
|
78
|
+
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';
|
|
74
79
|
const NtdTax = /* @__PURE__ */ createIcon({
|
|
75
80
|
displayName: 'NtdTax',
|
|
76
81
|
paths: {
|
|
77
|
-
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: primaryColor }),
|
|
82
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: primaryColor }), jsxs("g", { opacity: accentOpacity, children: [jsx("path", { d: TAX_DOTS, fillRule: "evenodd", fill: accentColor }), jsx("line", { x1: "15.5", y1: "8.5", x2: "8.5", y2: "15.5", stroke: accentColor, strokeWidth: "1.8", strokeLinecap: "round" })] })] })),
|
|
78
83
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "9.2", cy: "9.2", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsx("circle", { cx: "14.8", cy: "14.8", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsx("line", { x1: "15.5", y1: "8.5", x2: "8.5", y2: "15.5", stroke: primaryColor, strokeWidth: "1.6", strokeLinecap: "round" })] })),
|
|
79
84
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "9.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "9.2", cy: "9.2", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsx("circle", { cx: "14.8", cy: "14.8", r: "1.6", stroke: primaryColor, strokeWidth: "1.3", fill: "none" }), jsx("line", { x1: "15.5", y1: "8.5", x2: "8.5", y2: "15.5", stroke: primaryColor, strokeWidth: "1.6", strokeLinecap: "round" })] })),
|
|
80
85
|
},
|
|
@@ -89,13 +94,21 @@ const NtdGym = /* @__PURE__ */ createIcon({
|
|
|
89
94
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "5.5", y: "6", width: "2.6", height: "12", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { x: "15.9", y: "6", width: "2.6", height: "12", rx: "1", fill: secondaryColor, opacity: secondaryOpacity }), jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("rect", { x: "2.5", y: "8", width: "3", height: "8", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "5.5", y: "6", width: "2.6", height: "12", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "18.5", y: "8", width: "3", height: "8", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("rect", { x: "15.9", y: "6", width: "2.6", height: "12", rx: "1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
90
95
|
},
|
|
91
96
|
});
|
|
92
|
-
/**
|
|
97
|
+
/**
|
|
98
|
+
* Lab — Erlenmeyer flask with liquid (distinct from NtdAIBrain/NtdActivity). The liquid sits low
|
|
99
|
+
* and is the flask moved in by 1 — the glass is as thick at the walls as at the bottom (the
|
|
100
|
+
* liquid hugged the walls and the bottom looked twice as heavy). Filled: flask primary, liquid in
|
|
101
|
+
* the accent colour; only vivid has bubbles — accent dots in a secondary liquid.
|
|
102
|
+
*/
|
|
103
|
+
const LAB_FLASK = 'M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z';
|
|
104
|
+
const LAB_LIQUID = 'M7.4 15.5h9.2l1.73 3a1 1 0 01-.86 1.5H6.53a1 1 0 01-.86-1.5z';
|
|
93
105
|
const NtdLab = /* @__PURE__ */ createIcon({
|
|
94
106
|
displayName: 'NtdLab',
|
|
95
107
|
paths: {
|
|
96
|
-
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
97
|
-
|
|
98
|
-
|
|
108
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsx("path", { d: LAB_LIQUID, fill: accentColor, opacity: accentOpacity })] })),
|
|
109
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: LAB_FLASK, fill: primaryColor }), jsx("path", { d: LAB_LIQUID, fill: secondaryColor }), jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsx("circle", { cx: "10.5", cy: "17.6", r: "0.9" }), jsx("circle", { cx: "13.6", cy: "18.7", r: "0.7" })] })] })),
|
|
110
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsx("line", { x1: "6.3", y1: "15.5", x2: "17.7", y2: "15.5", stroke: primaryColor, strokeWidth: "1.4" })] })),
|
|
111
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: LAB_LIQUID, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M9 2h6v2h-1v5l5.2 9a2 2 0 01-1.7 3H6.5a2 2 0 01-1.7-3L10 9V4H9V2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsx("line", { x1: "6.3", y1: "15.5", x2: "17.7", y2: "15.5", stroke: primaryColor, strokeWidth: "1.4" })] })),
|
|
99
112
|
},
|
|
100
113
|
});
|
|
101
114
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { within } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
5
6
|
RESIDENTIAL
|
|
@@ -109,13 +110,18 @@ const NtdBathroom = /* @__PURE__ */ createIcon({
|
|
|
109
110
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 12h16v4a4 4 0 01-4 4H8a4 4 0 01-4-4v-4z", fill: primaryColor }), jsx("path", { d: "M4 12h16v4a4 4 0 01-4 4H8a4 4 0 01-4-4v-4z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "14", cy: "6", r: "2", fill: secondaryColor }), jsx("path", { d: "M6 12V6a4 4 0 018 0", stroke: "white", strokeWidth: "1", fill: "none" }), jsx("path", { d: "M6 20v2M18 20v2", stroke: "white", strokeWidth: "1", strokeLinecap: "round" })] })),
|
|
110
111
|
},
|
|
111
112
|
});
|
|
113
|
+
// NtdGarage: the door is drawn as in the outline — frame and two slats — in the accent colour on
|
|
114
|
+
// the filled building (it was a 30% white patch with white lines), kept inside the building. The
|
|
115
|
+
// duotone is fills only: building primary, door secondary, its frame and slats primary.
|
|
116
|
+
const GARAGE = 'M12 2L2 8v12a2 2 0 002 2h16a2 2 0 002-2V8L12 2z';
|
|
117
|
+
const GARAGE_DOOR = 'M5 22V12h14v10M5 15h14M5 18h14';
|
|
112
118
|
const NtdGarage = /* @__PURE__ */ createIcon({
|
|
113
119
|
displayName: 'NtdGarage',
|
|
114
120
|
paths: {
|
|
115
|
-
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
116
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d:
|
|
117
|
-
duotone: ({ primaryColor, secondaryColor,
|
|
118
|
-
vivid: ({ primaryColor, secondaryColor
|
|
121
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, fill: primaryColor }), within(uid, 'door', jsx("path", { d: GARAGE }), jsx("path", { d: GARAGE_DOOR, stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" }))] })),
|
|
122
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", strokeLinejoin: "round" }), jsx("rect", { x: "5", y: "12", width: "14", height: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M5 15h14M5 18h14", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
123
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, fill: primaryColor }), jsx("rect", { x: "5", y: "12", width: "14", height: "10", fill: secondaryColor }), within(uid, 'door', jsx("path", { d: GARAGE }), jsx("path", { d: GARAGE_DOOR, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
124
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: GARAGE, fill: primaryColor }), jsx("path", { d: GARAGE, fill: "white", opacity: "0.08" }), within(uid, 'door', jsx("path", { d: GARAGE }), jsx("path", { d: GARAGE_DOOR, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }))] })),
|
|
119
125
|
},
|
|
120
126
|
});
|
|
121
127
|
const NtdPool = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/saas.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { within } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
// ═══════════════════════════════════════════════════════════════════════════════
|
|
5
6
|
// SaaS Icons
|
|
@@ -104,13 +105,23 @@ const NtdUptime = /* @__PURE__ */ createIcon({
|
|
|
104
105
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), jsx("path", { d: "M12 6v6h6", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("path", { d: "M8 16l2-4 2 2 2-3 2 5", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })] })),
|
|
105
106
|
},
|
|
106
107
|
});
|
|
108
|
+
// NtdBilling: a bill paid by card — the page with its lines and, in front of it, a card. (A card
|
|
109
|
+
// alone is NtdCreditCard, a bill alone NtdInvoice / NtdReceipt.) The page is cut away around the
|
|
110
|
+
// card, a real gap rather than a painted one, so the two read apart on any background.
|
|
111
|
+
const BILL_PAPER = { x: 2.5, y: 2, width: 13, height: 18, rx: 1.5 };
|
|
112
|
+
const BILL_CARD = { x: 9.5, y: 12, width: 13, height: 9, rx: 1.6 };
|
|
113
|
+
// everything but the card grown by 1.5 — the page is drawn through this
|
|
114
|
+
const BILL_PAPER_CUT = 'M0 0H24V24H0Z M11.1 10.5H24V22.5H8V13.6A3.1 3.1 0 0111.1 10.5Z';
|
|
115
|
+
const BILL_LINES = 'M5.5 6h7M5.5 9h4.5';
|
|
116
|
+
const BILL_CARD_STRIPE = { x: 9.5, y: 14, width: 13, height: 1.8 };
|
|
117
|
+
const BILL_CARD_BAR = { x: 11.3, y: 17.6, width: 5.5, height: 1.4, rx: 0.5 };
|
|
107
118
|
const NtdBilling = /* @__PURE__ */ createIcon({
|
|
108
119
|
displayName: 'NtdBilling',
|
|
109
120
|
paths: {
|
|
110
|
-
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("
|
|
111
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("
|
|
112
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("
|
|
113
|
-
vivid: ({ primaryColor,
|
|
121
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [within(uid, 'paper', jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...BILL_PAPER, fill: primaryColor }), jsx("path", { d: BILL_LINES, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })), jsx("rect", { ...BILL_CARD, fill: primaryColor }), within(uid, 'stripe', jsx("rect", { ...BILL_CARD }), jsx("rect", { ...BILL_CARD_STRIPE, fill: accentColor, opacity: accentOpacity })), jsx("rect", { ...BILL_CARD_BAR, fill: accentColor, opacity: accentOpacity })] })),
|
|
122
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [within(uid, 'paper', jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...BILL_PAPER, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BILL_LINES, stroke: primaryColor, strokeWidth: strokeWidth })] })), jsx("rect", { ...BILL_CARD, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M9.5 15h13", stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
123
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth, accentColor, uid, }) => (jsxs(Fragment, { children: [within(uid, 'paper', jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...BILL_PAPER, fill: secondaryColor, opacity: secondaryOpacity }), jsx("rect", { ...BILL_PAPER, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: BILL_LINES, stroke: primaryColor, strokeWidth: strokeWidth })] })), jsx("rect", { ...BILL_CARD, fill: primaryColor }), within(uid, 'stripe', jsx("rect", { ...BILL_CARD }), jsx("rect", { ...BILL_CARD_STRIPE, fill: accentColor }))] })),
|
|
124
|
+
vivid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [within(uid, 'paper', jsx("path", { d: BILL_PAPER_CUT, clipRule: "evenodd" }), jsxs(Fragment, { children: [jsx("rect", { ...BILL_PAPER, fill: primaryColor, opacity: "0.55" }), jsx("path", { d: BILL_LINES, stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })), jsx("rect", { ...BILL_CARD, fill: primaryColor }), jsx("rect", { ...BILL_CARD, fill: "white", opacity: "0.1" }), within(uid, 'stripe', jsx("rect", { ...BILL_CARD }), jsx("rect", { ...BILL_CARD_STRIPE, fill: accentColor, opacity: accentOpacity })), jsx("rect", { ...BILL_CARD_BAR, fill: accentColor, opacity: accentOpacity })] })),
|
|
114
125
|
},
|
|
115
126
|
});
|
|
116
127
|
const NtdTeamwork = /* @__PURE__ */ createIcon({
|
|
@@ -61,13 +61,16 @@ const NtdDna = /* @__PURE__ */ createIcon({
|
|
|
61
61
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
62
62
|
CHEMISTRY
|
|
63
63
|
───────────────────────────────────────────────────────────────────────────── */
|
|
64
|
+
// The filled atom draws its orbits at 0.75 of the stroke width around a smaller nucleus: at 2 the
|
|
65
|
+
// three orbits and the nucleus ran together into one heavy blob in the middle. The nucleus is in
|
|
66
|
+
// the accent colour in every variant that fills it.
|
|
64
67
|
const NtdAtom = /* @__PURE__ */ createIcon({
|
|
65
68
|
displayName: 'NtdAtom',
|
|
66
69
|
paths: {
|
|
67
|
-
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "
|
|
70
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: accentColor, opacity: accentOpacity }), jsxs("g", { stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none", children: [jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", transform: "rotate(-60 12 12)" })] })] })),
|
|
68
71
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(-60 12 12)" })] })),
|
|
69
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(-60 12 12)" }), jsx("circle", { cx: "12", cy: "12", r: "
|
|
70
|
-
vivid: ({
|
|
72
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, accentColor, accentOpacity, strokeWidth, }) => (jsxs(Fragment, { children: [jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none", opacity: secondaryOpacity, transform: "rotate(-60 12 12)" }), jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: accentColor, opacity: accentOpacity }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none", transform: "rotate(-60 12 12)" })] })),
|
|
73
|
+
vivid: ({ secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: accentColor, opacity: accentOpacity }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: "#8B5CF6", strokeWidth: "1.5", fill: "none", transform: "rotate(60 12 12)" }), jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", stroke: "#8B5CF6", strokeWidth: "1.5", fill: "none", transform: "rotate(-60 12 12)" })] })),
|
|
71
74
|
},
|
|
72
75
|
});
|
|
73
76
|
const NtdMolecule = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/shapes.js
CHANGED
|
@@ -42,7 +42,8 @@ const NtdSquare = /* @__PURE__ */ createIcon({
|
|
|
42
42
|
paths: {
|
|
43
43
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor })),
|
|
44
44
|
outline: ({ primaryColor, strokeWidth }) => (jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
45
|
-
|
|
45
|
+
// two halves side by side, a colour each — no outline
|
|
46
|
+
duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M5 3h7v18H5a2 2 0 01-2-2V5a2 2 0 012-2z", fill: primaryColor }), jsx("path", { d: "M12 3h7a2 2 0 012 2v14a2 2 0 01-2 2h-7z", fill: secondaryColor })] })),
|
|
46
47
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" })] })),
|
|
47
48
|
},
|
|
48
49
|
});
|
|
@@ -55,22 +56,33 @@ const NtdCircle = /* @__PURE__ */ createIcon({
|
|
|
55
56
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" })] })),
|
|
56
57
|
},
|
|
57
58
|
});
|
|
59
|
+
// The polygons have sharp corners in every variant but `rounded`. The outline strokes join with
|
|
60
|
+
// miters (the default round joins rounded them), and the rounded corners are drawn as arcs,
|
|
61
|
+
// because the derived `rounded` cannot reshape a filled polygon.
|
|
62
|
+
// The outline triangle is the solid one moved in by 1: its mitred stroke then ends on the solid
|
|
63
|
+
// edge, instead of the 53° point poking out of the box.
|
|
64
|
+
const TRIANGLE_LINE = 'M12 4.24L20.38 21H3.62Z';
|
|
65
|
+
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';
|
|
58
66
|
const NtdTriangle = /* @__PURE__ */ createIcon({
|
|
59
67
|
displayName: 'NtdTriangle',
|
|
60
68
|
paths: {
|
|
61
|
-
solid: ({ primaryColor
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
solid: ({ primaryColor }) => jsx("polygon", { points: "12,2 22,22 2,22", fill: primaryColor }),
|
|
70
|
+
rounded: ({ primaryColor }) => jsx("path", { d: TRIANGLE_ROUND, fill: primaryColor }),
|
|
71
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: TRIANGLE_LINE, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })),
|
|
72
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polygon", { points: "12,2 22,22 2,22", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: TRIANGLE_LINE, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
|
|
73
|
+
vivid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("polygon", { points: "12,2 22,22 2,22", fill: primaryColor }), jsx("polygon", { points: "12,2 22,22 2,22", fill: "white", opacity: "0.1" })] })),
|
|
65
74
|
},
|
|
66
75
|
});
|
|
76
|
+
const HEXAGON = 'M12 2L21 7V17L12 22L3 17V7Z';
|
|
77
|
+
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';
|
|
67
78
|
const NtdHexagon = /* @__PURE__ */ createIcon({
|
|
68
79
|
displayName: 'NtdHexagon',
|
|
69
80
|
paths: {
|
|
70
|
-
solid: ({ primaryColor
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
81
|
+
solid: ({ primaryColor }) => jsx("path", { d: HEXAGON, fill: primaryColor }),
|
|
82
|
+
rounded: ({ primaryColor }) => jsx("path", { d: HEXAGON_ROUND, fill: primaryColor }),
|
|
83
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: HEXAGON, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })),
|
|
84
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: HEXAGON, fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: HEXAGON, stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
|
|
85
|
+
vivid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: HEXAGON, fill: primaryColor }), jsx("path", { d: HEXAGON, fill: "white", opacity: "0.1" })] })),
|
|
74
86
|
},
|
|
75
87
|
});
|
|
76
88
|
const NtdOctagon = /* @__PURE__ */ createIcon({
|
|
@@ -104,9 +116,12 @@ const NtdCross = /* @__PURE__ */ createIcon({
|
|
|
104
116
|
displayName: 'NtdCross',
|
|
105
117
|
paths: {
|
|
106
118
|
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: primaryColor })),
|
|
107
|
-
|
|
108
|
-
|
|
119
|
+
// miter joins: the default round ones rounded all twelve corners of the outline
|
|
120
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })),
|
|
121
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinejoin: "miter", fill: "none" })] })),
|
|
109
122
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: primaryColor }), jsx("path", { d: "M9 2h6v7h7v6h-7v7H9v-7H2V9h7V2z", fill: "white", opacity: "0.1" })] })),
|
|
123
|
+
// rounded arm ends and filleted inner corners — the derived `rounded` cannot reshape a path
|
|
124
|
+
rounded: ({ primaryColor }) => (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 })),
|
|
110
125
|
},
|
|
111
126
|
});
|
|
112
127
|
const NtdStar4 = /* @__PURE__ */ createIcon({
|
|
@@ -118,40 +133,44 @@ const NtdStar4 = /* @__PURE__ */ createIcon({
|
|
|
118
133
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z", fill: primaryColor }), 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" })] })),
|
|
119
134
|
},
|
|
120
135
|
});
|
|
136
|
+
// The four corner arrows: the tail's level run sits at the height of the arrowhead's tip, so the
|
|
137
|
+
// two meet (it ran 2 units off the tip and the head looked stuck on beside the tail). It stops 2
|
|
138
|
+
// short of the tip: with the square caps of `sharp` it stuck out of the point. The filled variants
|
|
139
|
+
// draw at twice the stroke width, like NtdCheck.
|
|
121
140
|
const NtdCornerUpLeft = /* @__PURE__ */ createIcon({
|
|
122
141
|
displayName: 'NtdCornerUpLeft',
|
|
123
142
|
paths: {
|
|
124
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20 20v-
|
|
125
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20 20v-
|
|
126
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 20v-
|
|
127
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth:
|
|
143
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
144
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
145
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
146
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,14 4,9 9,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M20 20v-7a4 4 0 00-4-4H6", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
128
147
|
},
|
|
129
148
|
});
|
|
130
149
|
const NtdCornerUpRight = /* @__PURE__ */ createIcon({
|
|
131
150
|
displayName: 'NtdCornerUpRight',
|
|
132
151
|
paths: {
|
|
133
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4 20v-
|
|
134
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4 20v-
|
|
135
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 20v-
|
|
136
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth:
|
|
152
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
153
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
154
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
155
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,14 20,9 15,4", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M4 20v-7a4 4 0 014-4h10", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
137
156
|
},
|
|
138
157
|
});
|
|
139
158
|
const NtdCornerDownLeft = /* @__PURE__ */ createIcon({
|
|
140
159
|
displayName: 'NtdCornerDownLeft',
|
|
141
160
|
paths: {
|
|
142
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20
|
|
143
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20
|
|
144
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20
|
|
145
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth:
|
|
161
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
162
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
163
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
164
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "9,10 4,15 9,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M20 4v7a4 4 0 01-4 4H6", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
146
165
|
},
|
|
147
166
|
});
|
|
148
167
|
const NtdCornerDownRight = /* @__PURE__ */ createIcon({
|
|
149
168
|
displayName: 'NtdCornerDownRight',
|
|
150
169
|
paths: {
|
|
151
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4
|
|
152
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4
|
|
153
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4
|
|
154
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth:
|
|
170
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
171
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
172
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none", opacity: secondaryOpacity + 0.2 }), jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
173
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "15,10 20,15 15,20", stroke: primaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsx("path", { d: "M4 4v7a4 4 0 004 4h10", stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" })] })),
|
|
155
174
|
},
|
|
156
175
|
});
|
|
157
176
|
const NtdMaximize = /* @__PURE__ */ createIcon({
|
|
@@ -172,13 +191,29 @@ const NtdMinimize = /* @__PURE__ */ createIcon({
|
|
|
172
191
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "4,14 10,14 10,20", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("polyline", { points: "20,10 14,10 14,4", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }), jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3", stroke: "#3B82F6", strokeWidth: "1.5" }), jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14", stroke: secondaryColor, strokeWidth: "1.5" })] })),
|
|
173
192
|
},
|
|
174
193
|
});
|
|
194
|
+
// NtdMove: the line variants stop the cross 2 short of each arrowhead's point — with the square
|
|
195
|
+
// caps of `sharp` it stuck out of all four. The filled variants are one shape: arms twice the
|
|
196
|
+
// stroke width thick (like NtdCheck) ending in solid triangular heads; stroked at that width the
|
|
197
|
+
// small heads ran together into a blob.
|
|
198
|
+
const MOVE_HEADS = 'M6 9l-3 3 3 3M9 6l3-3 3 3M15 18l-3 3-3-3M18 9l3 3-3 3';
|
|
199
|
+
const MOVE_CROSS = 'M5 12h14M12 5v14';
|
|
200
|
+
/** The filled four-way arrow; `h` is half the arm thickness. */
|
|
201
|
+
function moveShape(h) {
|
|
202
|
+
const a = 12 - h;
|
|
203
|
+
const b = 12 + h;
|
|
204
|
+
const w = h + 1.5; // half the base of a head
|
|
205
|
+
const l = 12 - w;
|
|
206
|
+
const r = 12 + w;
|
|
207
|
+
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}` +
|
|
208
|
+
`V${b}H6.5V${r}L2 12L6.5 ${l}V${a}H${a}V6.5H${l}Z`);
|
|
209
|
+
}
|
|
175
210
|
const NtdMove = /* @__PURE__ */ createIcon({
|
|
176
211
|
displayName: 'NtdMove',
|
|
177
212
|
paths: {
|
|
178
|
-
solid: ({ primaryColor, strokeWidth }) => (
|
|
179
|
-
outline: ({ primaryColor, strokeWidth }) => (
|
|
180
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("
|
|
181
|
-
vivid: ({ primaryColor,
|
|
213
|
+
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: moveShape(strokeWidth), fill: primaryColor })),
|
|
214
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: `${MOVE_HEADS}${MOVE_CROSS}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
|
|
215
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: MOVE_CROSS, stroke: secondaryColor, strokeWidth: strokeWidth, opacity: secondaryOpacity + 0.2, fill: "none" }), jsx("path", { d: MOVE_HEADS, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
216
|
+
vivid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: moveShape(strokeWidth), fill: primaryColor }), jsx("path", { d: moveShape(strokeWidth), fill: "white", opacity: "0.1" })] })),
|
|
182
217
|
},
|
|
183
218
|
});
|
|
184
219
|
const NtdRepeat = /* @__PURE__ */ createIcon({
|
|
@@ -199,5 +234,66 @@ const NtdShuffle = /* @__PURE__ */ createIcon({
|
|
|
199
234
|
vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("polyline", { points: "16,3 21,3 21,8", stroke: primaryColor, strokeWidth: "2", fill: "none" }), jsx("line", { x1: "4", y1: "20", x2: "21", y2: "3", stroke: secondaryColor, strokeWidth: "1.8" }), jsx("polyline", { points: "21,16 21,21 16,21", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" }), jsx("line", { x1: "15", y1: "15", x2: "21", y2: "21", stroke: secondaryColor, strokeWidth: "1.5" }), jsx("line", { x1: "4", y1: "4", x2: "9", y2: "9", stroke: secondaryColor, strokeWidth: "1.5" })] })),
|
|
200
235
|
},
|
|
201
236
|
});
|
|
237
|
+
// Geometry construction tools (1.2.2: NiceGeometry drew these as the glyphs • — ⊥ ∥ ⊙ ∠).
|
|
238
|
+
// Same names as the NiceIcon built-ins in ui-core, mapped in resolver.ts.
|
|
239
|
+
const NtdPoint = /* @__PURE__ */ createIcon({
|
|
240
|
+
displayName: 'NtdPoint',
|
|
241
|
+
paths: {
|
|
242
|
+
solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("circle", { cx: "12", cy: "12", r: "5", fill: primaryColor })),
|
|
243
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: primaryColor })] })),
|
|
244
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "9", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "4", fill: primaryColor })] })),
|
|
245
|
+
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "5", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "5", fill: "white", opacity: "0.1" })] })),
|
|
246
|
+
},
|
|
247
|
+
});
|
|
248
|
+
// A segment: a line between two marked endpoints (unlike NtdLine-style rays, it ends).
|
|
249
|
+
const NtdSegment = /* @__PURE__ */ createIcon({
|
|
250
|
+
displayName: 'NtdSegment',
|
|
251
|
+
paths: {
|
|
252
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "5", cy: "19", r: "2.5", fill: primaryColor }), jsx("circle", { cx: "19", cy: "5", r: "2.5", fill: primaryColor })] })),
|
|
253
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "6.8", y1: "17.2", x2: "17.2", y2: "6.8", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "5", cy: "19", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "19", cy: "5", r: "2.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
254
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5", stroke: secondaryColor, strokeWidth: strokeWidth, strokeLinecap: "round" }), jsx("circle", { cx: "5", cy: "19", r: "2.5", fill: primaryColor }), jsx("circle", { cx: "19", cy: "5", r: "2.5", fill: primaryColor })] })),
|
|
255
|
+
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5", stroke: primaryColor, strokeWidth: "2.2" }), jsx("circle", { cx: "5", cy: "19", r: "2.5", fill: primaryColor }), jsx("circle", { cx: "19", cy: "5", r: "2.5", fill: primaryColor })] })),
|
|
256
|
+
},
|
|
257
|
+
});
|
|
258
|
+
// Perpendicular (⊥): a base line, the perpendicular from its middle and the right-angle mark.
|
|
259
|
+
const NtdPerpendicular = /* @__PURE__ */ createIcon({
|
|
260
|
+
displayName: 'NtdPerpendicular',
|
|
261
|
+
paths: {
|
|
262
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 20h18M12 20V4", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("rect", { x: "12", y: "15", width: "5", height: "5", fill: primaryColor })] })),
|
|
263
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M3 20h18M12 20V4M12 15h5v5", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })),
|
|
264
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "12", y: "15", width: "5", height: "5", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M3 20h18M12 20V4M12 15h5v5", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] })),
|
|
265
|
+
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 20h18M12 20V4", stroke: primaryColor, strokeWidth: "2.2", fill: "none" }), jsx("rect", { x: "12", y: "15", width: "5", height: "5", fill: primaryColor })] })),
|
|
266
|
+
},
|
|
267
|
+
});
|
|
268
|
+
// Parallel (∥): two lines at the same slope.
|
|
269
|
+
const NtdParallel = /* @__PURE__ */ createIcon({
|
|
270
|
+
displayName: 'NtdParallel',
|
|
271
|
+
paths: {
|
|
272
|
+
solid: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 16L14 6M10 20L20 10", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" })),
|
|
273
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 16L14 6M10 20L20 10", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" })),
|
|
274
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 16L14 6", stroke: secondaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("path", { d: "M10 20L20 10", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" })] })),
|
|
275
|
+
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsx("path", { d: "M4 16L14 6M10 20L20 10", stroke: primaryColor, strokeWidth: "2.2", strokeLinecap: "round", fill: "none" })),
|
|
276
|
+
},
|
|
277
|
+
});
|
|
278
|
+
// Midpoint (⊙): a segment with end ticks and its middle marked.
|
|
279
|
+
const NtdMidpoint = /* @__PURE__ */ createIcon({
|
|
280
|
+
displayName: 'NtdMidpoint',
|
|
281
|
+
paths: {
|
|
282
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 12h6M15 12h6M3 9v6M21 9v6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
|
|
283
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 12h6M15 12h6M3 9v6M21 9v6", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
284
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 12h6M15 12h6M3 9v6M21 9v6", stroke: secondaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
|
|
285
|
+
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M3 12h6M15 12h6M3 9v6M21 9v6", stroke: primaryColor, strokeWidth: "2.2", strokeLinecap: "round", fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
|
|
286
|
+
},
|
|
287
|
+
});
|
|
288
|
+
// Angle bisector (∠): two rays from a vertex, the ray halfway between them and the angle arc.
|
|
289
|
+
const NtdAngleBisector = /* @__PURE__ */ createIcon({
|
|
290
|
+
displayName: 'NtdAngleBisector',
|
|
291
|
+
paths: {
|
|
292
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 20h17M4 20L16 5M4 20l14.4-6.9M10 20a6 6 0 0 0-2.25-4.68", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("circle", { cx: "4", cy: "20", r: "2", fill: primaryColor })] })),
|
|
293
|
+
outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M4 20h17M4 20L16 5M4 20l14.4-6.9M10 20a6 6 0 0 0-2.25-4.68", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })),
|
|
294
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 20h17M4 20L16 5M10 20a6 6 0 0 0-2.25-4.68", stroke: primaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" }), jsx("path", { d: "M4 20l14.4-6.9", stroke: secondaryColor, strokeWidth: strokeWidth, strokeLinecap: "round", fill: "none" })] })),
|
|
295
|
+
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M4 20h17M4 20L16 5M4 20l14.4-6.9M10 20a6 6 0 0 0-2.25-4.68", stroke: primaryColor, strokeWidth: "2.2", strokeLinecap: "round", fill: "none" }), jsx("circle", { cx: "4", cy: "20", r: "2", fill: primaryColor })] })),
|
|
296
|
+
},
|
|
297
|
+
});
|
|
202
298
|
|
|
203
|
-
export { NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMinimize, NtdMove, NtdOctagon, NtdPentagon, NtdRepeat, NtdShuffle, NtdSquare, NtdStar4, NtdTriangle };
|
|
299
|
+
export { NtdAngleBisector, NtdArrowDownCircle, NtdArrowLeftCircle, NtdArrowRightCircle, NtdArrowUpCircle, NtdCircle, NtdCornerDownLeft, NtdCornerDownRight, NtdCornerUpLeft, NtdCornerUpRight, NtdCross, NtdDiamond, NtdHexagon, NtdMaximize, NtdMidpoint, NtdMinimize, NtdMove, NtdOctagon, NtdParallel, NtdPentagon, NtdPerpendicular, NtdPoint, NtdRepeat, NtdSegment, NtdShuffle, NtdSquare, NtdStar4, NtdTriangle };
|
package/dist/esm/icons/sports.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createIcon } from '../createIcon.js';
|
|
3
|
+
import { within } from '../iconParts.js';
|
|
3
4
|
|
|
4
5
|
/* ────────────────────────────────────────────────────────────────────────────
|
|
5
6
|
BALL SPORTS
|
|
@@ -13,13 +14,16 @@ const NtdSoccerBall = /* @__PURE__ */ createIcon({
|
|
|
13
14
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsx("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" }), 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" })] })),
|
|
14
15
|
},
|
|
15
16
|
});
|
|
17
|
+
// The seams are cuts through the ball: accent coloured (so a cutout keeps them) and kept inside
|
|
18
|
+
// the ball, so they end flush on its edge (their round caps stuck out of it).
|
|
19
|
+
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';
|
|
16
20
|
const NtdBasketball = /* @__PURE__ */ createIcon({
|
|
17
21
|
displayName: 'NtdBasketball',
|
|
18
22
|
paths: {
|
|
19
|
-
solid: ({ primaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("
|
|
23
|
+
solid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'seams', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: BALL_SEAMS, stroke: accentColor, strokeWidth: "1.5", fill: "none", opacity: accentOpacity }))] })),
|
|
20
24
|
outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 2v20M2 12h20", stroke: primaryColor, strokeWidth: strokeWidth }), 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" })] })),
|
|
21
25
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M12 2v20M2 12h20", stroke: primaryColor, strokeWidth: strokeWidth }), 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" })] })),
|
|
22
|
-
vivid: ({ primaryColor, secondaryColor
|
|
26
|
+
vivid: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), within(uid, 'seams', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: BALL_SEAMS, stroke: secondaryColor, strokeWidth: "1.6", fill: "none" }))] })),
|
|
23
27
|
},
|
|
24
28
|
});
|
|
25
29
|
const NtdTennis = /* @__PURE__ */ createIcon({
|