@nice2dev/icons 1.3.6 → 1.3.7
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 +44 -0
- package/README.md +4 -1
- package/dist/cjs/NiceIconStacker.js +4 -2
- package/dist/cjs/createIcon.js +2 -2
- package/dist/cjs/iconStack.js +3 -1
- package/dist/cjs/icons/actions.js +11 -4
- package/dist/cjs/icons/business.js +27 -17
- package/dist/cjs/icons/ecommerce.js +14 -4
- package/dist/cjs/icons/education.js +18 -11
- package/dist/cjs/icons/files.js +20 -12
- package/dist/cjs/icons/health.js +31 -15
- package/dist/cjs/icons/travel.js +4 -4
- package/dist/cjs/icons/ui.js +7 -6
- package/dist/cjs/icons/weather.js +4 -3
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/rsc.js +1 -1
- package/dist/cjs/stacking.js +12 -1
- package/dist/esm/NiceIconStacker.js +5 -3
- package/dist/esm/createIcon.js +2 -2
- package/dist/esm/iconStack.js +3 -1
- package/dist/esm/icons/actions.js +11 -4
- package/dist/esm/icons/business.js +28 -18
- package/dist/esm/icons/ecommerce.js +14 -4
- package/dist/esm/icons/education.js +18 -11
- package/dist/esm/icons/files.js +20 -12
- package/dist/esm/icons/health.js +31 -15
- package/dist/esm/icons/travel.js +4 -4
- package/dist/esm/icons/ui.js +7 -6
- package/dist/esm/icons/weather.js +5 -4
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/rsc.js +1 -1
- package/dist/esm/stacking.js +12 -2
- package/dist/types/iconStack.d.ts +6 -0
- package/dist/types/stacking.d.ts +5 -0
- package/dist/types/types.d.ts +11 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,49 @@
|
|
|
1
1
|
# @nice2dev/icons — Changelog
|
|
2
2
|
|
|
3
|
+
## 1.3.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f527e94: Icon fixes from showcase feedback round 37:
|
|
8
|
+
|
|
9
|
+
- **NtdHamburger:** the wavy sauce is gone, leaving three even layers. Duotone uses fills only.
|
|
10
|
+
- **NtdBook / NtdBookBookmark:** the front cover is 20% lower and carries a line of title.
|
|
11
|
+
- **NtdMountain:** solid is all primary, with the snow line cut in the accent colour.
|
|
12
|
+
- **NtdBriefcase:**
|
|
13
|
+
- the band and clasp sit higher;
|
|
14
|
+
- the outline's band ends flush with the sides and follows `strokeWidth`;
|
|
15
|
+
- vivid's clasp is all accent.
|
|
16
|
+
- **NtdPercent:** the rings are 20% bigger and the slash is twice the stroke width.
|
|
17
|
+
- **NtdBus:** the wheels are lower.
|
|
18
|
+
- **NtdMonitor:** the stand no longer reaches over the screen.
|
|
19
|
+
- **NtdPieChart:** turned 45° clockwise.
|
|
20
|
+
- **NtdPromoTag:** gains a percent sign turned 45° clockwise.
|
|
21
|
+
|
|
22
|
+
- d4d6211: Icon fixes from showcase feedback round 38:
|
|
23
|
+
|
|
24
|
+
- **NtdBook:** the title sits higher and the block of pages is 50% thicker. NtdBookBookmark keeps
|
|
25
|
+
its title below the ribbon.
|
|
26
|
+
- **NtdAdmin:** the tie is twice as wide.
|
|
27
|
+
- **NtdTag:** the hole sits closer to the point.
|
|
28
|
+
- **NtdTrash:** the lid and the handle are smaller. Vivid uses the theme colours instead of a fixed
|
|
29
|
+
blue.
|
|
30
|
+
- **NtdDna:** redrawn as a double helix that stays inside the box, with eight thin base pairs
|
|
31
|
+
running strand to strand.
|
|
32
|
+
|
|
33
|
+
- b321834: Stacked icons can be moved precisely:
|
|
34
|
+
|
|
35
|
+
- **`stackOffsetX` / `stackOffsetY`:** move a stacked icon from where `stackAlign` puts it. The
|
|
36
|
+
value is a percent of the parent icon's width or height, so the move scales with the icon:
|
|
37
|
+
positive X is right, positive Y is down. A turn (`stackRotation`) follows the moved icon's
|
|
38
|
+
centre.
|
|
39
|
+
- **NiceIconStacker:** "Shift right" and "Shift down" sliders (−50…50%) under "More", written to
|
|
40
|
+
the code. The layers keep them as `offsetX` / `offsetY`, which `NiceIconStack` draws.
|
|
41
|
+
- **Translations:** new keys `iconStacker.offsetX` and `iconStacker.offsetY`.
|
|
42
|
+
|
|
43
|
+
- 9f58a4e: The default `strokeWidth` of the icons is now 1 (it was 2, and 1.5 in the server-component
|
|
44
|
+
icons), so the icons draw thinner lines by default. Glyph strokes on filled variants follow it at
|
|
45
|
+
twice the width. Pass `strokeWidth={2}` to keep the old weight.
|
|
46
|
+
|
|
3
47
|
## 1.3.6
|
|
4
48
|
|
|
5
49
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -105,7 +105,7 @@ Every icon component accepts these props (extends `SVGProps<SVGSVGElement>`):
|
|
|
105
105
|
| `primaryOpacity` | `number` | `1` | Opacity of primary elements (0–1) |
|
|
106
106
|
| `secondaryOpacity` | `number` | `0.4` | Opacity of secondary elements (0–1) |
|
|
107
107
|
| `accentOpacity` | `number` | `1` | Opacity of accent elements (0–1) |
|
|
108
|
-
| `strokeWidth` | `number` | `
|
|
108
|
+
| `strokeWidth` | `number` | `1` | Base stroke width for outline/duotone |
|
|
109
109
|
| `strokeLinecap` | `'round' \| 'square' \| 'butt'` | `'round'` | Stroke line cap style |
|
|
110
110
|
| `strokeLinejoin` | `'round' \| 'miter' \| 'bevel'` | `'round'` | Stroke line join style |
|
|
111
111
|
| `animation` | `IconAnimation` | `undefined` | CSS animation name |
|
|
@@ -241,6 +241,9 @@ Stacks nest any number of levels deep, with the colours flipping at every level.
|
|
|
241
241
|
- A corner badge keeps the parent's colours and sits on an accent-coloured gap.
|
|
242
242
|
- **`stackRotation`:** turns a stacked icon about its own centre, in degrees clockwise. Its
|
|
243
243
|
contents and text turn with it.
|
|
244
|
+
- **`stackOffsetX` / `stackOffsetY`:** move a stacked icon from where `stackAlign` puts it, in
|
|
245
|
+
percent of the parent's width or height (positive is right or down). Being relative, the nudge
|
|
246
|
+
scales with the icon: `<NtdStar stackAlign="top-right" stackOffsetX={-5} stackOffsetY={5} />`.
|
|
244
247
|
- **Text:** the default size is 9, 7.5, 6 or 5 in the 24-unit box (by length). `textColor` and
|
|
245
248
|
`textSize` override the text's colour and size.
|
|
246
249
|
- **Data:** `NiceIconStack` draws a stack kept as data (NiceIconStacker's layers), its bound text
|
|
@@ -68,6 +68,8 @@ function removeLayer(layers, id) {
|
|
|
68
68
|
align: undefined,
|
|
69
69
|
size: undefined,
|
|
70
70
|
rotation: undefined,
|
|
71
|
+
offsetX: undefined,
|
|
72
|
+
offsetY: undefined,
|
|
71
73
|
};
|
|
72
74
|
return [
|
|
73
75
|
newBase,
|
|
@@ -159,7 +161,7 @@ const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layer
|
|
|
159
161
|
return (jsxRuntime.jsxs("div", { className: ['nice-icon-stacker', className].filter(Boolean).join(' '), children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__toolbar", children: [jsxRuntime.jsxs("button", { type: "button", onClick: add, disabled: !current, children: [jsxRuntime.jsx(actions.NtdPlus, { size: 14 }), " ", addLabel] }), jsxRuntime.jsxs("button", { type: "button", onClick: clear, disabled: layers.length === 0, children: [jsxRuntime.jsx(actions.NtdTrash, { size: 14 }), " ", t('iconStacker.clear', 'Clear the stack')] })] }), !base ? (jsxRuntime.jsx("p", { className: "nice-icon-stacker__empty", children: t('iconStacker.empty', 'The stack is empty. Add an icon to start one.') })) : (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__body", children: [jsxRuntime.jsx("div", { className: "nice-icon-stacker__preview", "aria-label": t('iconStacker.preview', 'Preview'), role: "group", children: PREVIEW_SIZES.map((s) => (jsxRuntime.jsxs("span", { className: "nice-icon-stacker__preview-cell", children: [iconStack.renderIconStack(layers, icons, {
|
|
160
162
|
baseProps: { ...previewProps, size: s, title: base.icon },
|
|
161
163
|
}), jsxRuntime.jsxs("small", { children: [s, "px"] })] }, s))) }), jsxRuntime.jsx("ol", { className: "nice-icon-stacker__layers", "aria-label": t('iconStacker.layers', 'Layers'), children: tree.map(({ layer: l, depth }) => {
|
|
162
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
164
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
163
165
|
const Icon = resolve(l.icon);
|
|
164
166
|
const isBase = l === base;
|
|
165
167
|
const align = (_a = l.align) !== null && _a !== void 0 ? _a : 'center';
|
|
@@ -171,7 +173,7 @@ const NiceIconStacker = React.forwardRef(function NiceIconStacker({ icons, layer
|
|
|
171
173
|
['--nice-icon-stacker-depth']: String(depth),
|
|
172
174
|
};
|
|
173
175
|
const label = (key, fallback) => t(key, fallback).replace('{icon}', l.icon);
|
|
174
|
-
return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsxRuntime.jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: (_e = l.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => update(l.id, { rotation: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_f = l.rotation) !== null && _f !== void 0 ? _f : 0, "\u00B0"] })] })), jsxRuntime.jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__text", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (
|
|
176
|
+
return (jsxRuntime.jsxs("li", { className: "nice-icon-stacker__layer", style: depthStyle, children: [jsxRuntime.jsxs("div", { className: "nice-icon-stacker__layer-row", children: [jsxRuntime.jsx("input", { type: "radio", name: targetGroup, checked: (target === null || target === void 0 ? void 0 : target.id) === l.id, onChange: () => setSelected(l.id), "aria-label": label('iconStacker.target', 'Add the next icon into {icon}'), title: label('iconStacker.target', 'Add the next icon into {icon}') }), jsxRuntime.jsx("span", { className: "nice-icon-stacker__layer-icon", children: Icon ? jsxRuntime.jsx(Icon, { size: 24, variant: l.variant }) : null }), jsxRuntime.jsxs("span", { className: "nice-icon-stacker__layer-name", children: [l.icon, isBase && (jsxRuntime.jsx("span", { className: "nice-icon-stacker__badge", children: t('iconStacker.base', 'Base') }))] }), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.align', 'Position') }), jsxRuntime.jsx("select", { value: align, onChange: (e) => update(l.id, { align: e.target.value }), children: ALIGNS.map((a) => (jsxRuntime.jsx("option", { value: a, children: a }, a))) })] })), !isBase && (jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.size', 'Size') }), jsxRuntime.jsx("input", { type: "range", min: 0.2, max: 1, step: 0.05, value: share, onChange: (e) => update(l.id, { size: Number(e.target.value) }) }), jsxRuntime.jsxs("output", { children: [Math.round(share * 100), "%"] })] })), jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__remove", onClick: () => remove(l.id), "aria-label": label('iconStacker.remove', 'Remove {icon}'), title: label('iconStacker.remove', 'Remove {icon}'), children: jsxRuntime.jsx(actions.NtdTrash, { size: 14 }) })] }), jsxRuntime.jsxs("details", { className: "nice-icon-stacker__more", children: [jsxRuntime.jsx("summary", { children: t('iconStacker.more', 'More') }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__more-body", children: [!isBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.rotation', 'Turn') }), jsxRuntime.jsx("input", { type: "range", min: -180, max: 180, step: 15, value: (_e = l.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => update(l.id, { rotation: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_f = l.rotation) !== null && _f !== void 0 ? _f : 0, "\u00B0"] })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.offsetX', 'Shift right') }), jsxRuntime.jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_g = l.offsetX) !== null && _g !== void 0 ? _g : 0, onChange: (e) => update(l.id, { offsetX: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_h = l.offsetX) !== null && _h !== void 0 ? _h : 0, "%"] })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.offsetY', 'Shift down') }), jsxRuntime.jsx("input", { type: "range", min: -50, max: 50, step: 1, value: (_j = l.offsetY) !== null && _j !== void 0 ? _j : 0, onChange: (e) => update(l.id, { offsetY: Number(e.target.value) || undefined }) }), jsxRuntime.jsxs("output", { children: [(_k = l.offsetY) !== null && _k !== void 0 ? _k : 0, "%"] })] })] })), jsxRuntime.jsx(ColorField, { label: t('iconStacker.primary', 'Primary'), value: l.primaryColor, onChange: (v) => update(l.id, { primaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.secondary', 'Secondary'), value: l.secondaryColor, onChange: (v) => update(l.id, { secondaryColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.accent', 'Accent'), value: l.accentColor, onChange: (v) => update(l.id, { accentColor: v }), autoLabel: autoLabel, resetLabel: resetLabel })] })] }), (innermost || l.text || l.textBinding) && (jsxRuntime.jsxs("div", { className: "nice-icon-stacker__text", children: [jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.text', 'Text') }), jsxRuntime.jsx("input", { type: "text", value: (_l = l.text) !== null && _l !== void 0 ? _l : '', maxLength: 4, onChange: (e) => update(l.id, { text: e.target.value || undefined }) })] }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.textSize', 'Text size') }), jsxRuntime.jsx("input", { type: "range", min: 3, max: 14, step: 0.5, value: textSize, onChange: (e) => update(l.id, { textSize: Number(e.target.value) }) }), jsxRuntime.jsx("output", { children: textSize }), l.textSize !== undefined && (jsxRuntime.jsx("button", { type: "button", className: "nice-icon-stacker__reset", onClick: () => update(l.id, { textSize: undefined }), "aria-label": resetLabel, title: resetLabel, children: jsxRuntime.jsx(navigation.NtdClose, { size: 12 }) }))] }), jsxRuntime.jsx(ColorField, { label: t('iconStacker.textColor', 'Text colour'), value: l.textColor, onChange: (v) => update(l.id, { textColor: v }), autoLabel: autoLabel, resetLabel: resetLabel }), jsxRuntime.jsxs("label", { className: "nice-icon-stacker__field", children: [jsxRuntime.jsx("span", { children: t('iconStacker.bind', 'Bind to') }), jsxRuntime.jsx("input", { type: "text", value: (_m = l.textBinding) !== null && _m !== void 0 ? _m : '', "aria-invalid": bindingInvalid || undefined, title: t('iconStacker.bindHint', 'The name of the value the text shows, e.g. count — the text above is a sample'), onChange: (e) => update(l.id, { textBinding: e.target.value.trim() || undefined }) })] })] }))] }, l.id));
|
|
175
177
|
}) }), jsxRuntime.jsxs("div", { className: "nice-icon-stacker__code", children: [jsxRuntime.jsx("pre", { children: code }), jsxRuntime.jsxs("button", { type: "button", onClick: copy, children: [copied ? jsxRuntime.jsx(actions.NtdCheck, { size: 14 }) : jsxRuntime.jsx(actions.NtdCopy, { size: 14 }), ' ', copied
|
|
176
178
|
? t('iconStacker.copied', 'Copied')
|
|
177
179
|
: t('iconStacker.copy', 'Copy the code')] })] })] }))] }));
|
package/dist/cjs/createIcon.js
CHANGED
|
@@ -116,11 +116,11 @@ function renderCutoutShape(shape, fill, maskId) {
|
|
|
116
116
|
}
|
|
117
117
|
function createIcon(options) {
|
|
118
118
|
const { displayName, viewBox = '0 0 24 24', paths, textCenter = BOX_CENTER } = options;
|
|
119
|
-
const Icon = React.forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth =
|
|
119
|
+
const Icon = React.forwardRef(({ size = 'md', variant = 'solid', cutoutShape = 'rounded-square', color, lightColor, darkColor, primaryColor: propPrimaryColor = 'currentColor', secondaryColor, accentColor, primaryOpacity = 1, secondaryOpacity = 0.4, accentOpacity = 1, strokeWidth = 1, strokeLinecap: propLinecap, strokeLinejoin: propLinejoin, animation, animationDuration, smilAnimation, smilDuration = 1, smilRepeatCount = 'indefinite', smilEasing = 'ease-in-out', smilDelay = 0, gradient, gradientType = 'linear', gradientAngle = 135, gradientAnimation,
|
|
120
120
|
// Transform props
|
|
121
121
|
rotate, flipX, flipY, scale, transition, transformOrigin = 'center center',
|
|
122
122
|
// stacking (1.3.5): the parent icon reads a child's own align / size from its props
|
|
123
|
-
children, stackAlign: _stackAlign, stackSize: _stackSize, stackRotation: _stackRotation, textColor, textSize, title, className, style, ...rest }, ref) => {
|
|
123
|
+
children, stackAlign: _stackAlign, stackSize: _stackSize, stackRotation: _stackRotation, stackOffsetX: _stackOffsetX, stackOffsetY: _stackOffsetY, textColor, textSize, title, className, style, ...rest }, ref) => {
|
|
124
124
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
125
125
|
const resolvedSize = typeof size === 'number' ? size : ((_a = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24);
|
|
126
126
|
const gradId = React.useId();
|
package/dist/cjs/iconStack.js
CHANGED
|
@@ -30,6 +30,8 @@ function niceIconStackCode(layers) {
|
|
|
30
30
|
parent ? `stackAlign="${(_a = layer.align) !== null && _a !== void 0 ? _a : 'center'}"` : '',
|
|
31
31
|
parent && layer.size !== undefined ? `stackSize={${layer.size}}` : '',
|
|
32
32
|
parent && layer.rotation ? `stackRotation={${layer.rotation}}` : '',
|
|
33
|
+
parent && layer.offsetX ? `stackOffsetX={${layer.offsetX}}` : '',
|
|
34
|
+
parent && layer.offsetY ? `stackOffsetY={${layer.offsetY}}` : '',
|
|
33
35
|
layer.variant && layer.variant !== (parent === null || parent === void 0 ? void 0 : parent.variant) ? `variant="${layer.variant}"` : '',
|
|
34
36
|
...COLOR_PROPS.map((p) => (layer[p] ? `${p}="${layer[p]}"` : '')),
|
|
35
37
|
layer.textSize !== undefined ? `textSize={${layer.textSize}}` : '',
|
|
@@ -85,7 +87,7 @@ function renderIconStack(layers, icons, { baseProps, values } = {}) {
|
|
|
85
87
|
inner,
|
|
86
88
|
text));
|
|
87
89
|
}
|
|
88
|
-
return (React.createElement(Icon, { ...own, key: layer.id, stackAlign: (_b = layer.align) !== null && _b !== void 0 ? _b : 'center', stackSize: layer.size, stackRotation: layer.rotation, variant: layer.variant !== parent.variant ? layer.variant : undefined },
|
|
90
|
+
return (React.createElement(Icon, { ...own, key: layer.id, stackAlign: (_b = layer.align) !== null && _b !== void 0 ? _b : 'center', stackSize: layer.size, stackRotation: layer.rotation, stackOffsetX: layer.offsetX, stackOffsetY: layer.offsetY, variant: layer.variant !== parent.variant ? layer.variant : undefined },
|
|
89
91
|
inner,
|
|
90
92
|
text));
|
|
91
93
|
};
|
|
@@ -51,13 +51,20 @@ const NtdEditDetail = /* @__PURE__ */ createIcon.createIcon({
|
|
|
51
51
|
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: EDIT_DETAIL_FRAME, stroke: secondaryColor, strokeWidth: strokeWidth * 2, fill: "none" }), jsxRuntime.jsx("path", { d: EDIT_DETAIL_PENCIL, fill: primaryColor }), iconParts.within(uid, 'band', jsxRuntime.jsx("path", { d: EDIT_DETAIL_PENCIL }), jsxRuntime.jsx("path", { d: EDIT_DETAIL_BAND, stroke: secondaryColor, strokeWidth: "1.3" }))] })),
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
|
+
// NtdTrash: the lid overhangs the bin by 1 a side (16 across; it was 18) and the handle is 6 by 3
|
|
55
|
+
// (it was 8 by 4). Vivid: the lid and the handle secondary, the grooves accent (they were a fixed
|
|
56
|
+
// #3B82F6).
|
|
57
|
+
const TRASH_LID = 'M4 6h16';
|
|
58
|
+
const TRASH_HANDLE = 'M9 6V4.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5V6';
|
|
59
|
+
const TRASH_BIN = 'M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14H5z';
|
|
60
|
+
const TRASH_GROOVES = 'M10 10.5v7M14 10.5v7';
|
|
54
61
|
const NtdTrash = /* @__PURE__ */ createIcon.createIcon({
|
|
55
62
|
displayName: 'NtdTrash',
|
|
56
63
|
paths: {
|
|
57
|
-
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
58
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
59
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
60
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
64
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsxRuntime.jsx("line", { x1: "10", y1: "10.5", x2: "10", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity }), jsxRuntime.jsx("line", { x1: "14", y1: "10.5", x2: "14", y2: "17.5", stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
|
|
65
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: TRASH_GROOVES, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
66
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRASH_BIN, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: TRASH_LID, stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: TRASH_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M5 6l1 14a2 2 0 002 2h8a2 2 0 002-2l1-14", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: TRASH_GROOVES, stroke: primaryColor, strokeWidth: strokeWidth })] })),
|
|
67
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: TRASH_BIN, fill: primaryColor }), jsxRuntime.jsx("path", { d: TRASH_LID, stroke: secondaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("path", { d: TRASH_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: TRASH_GROOVES, stroke: accentColor, strokeWidth: strokeWidth * 0.7, opacity: accentOpacity })] })),
|
|
61
68
|
},
|
|
62
69
|
});
|
|
63
70
|
// NtdSave: a 3.5" floppy — the clipped corner, a wide metal shutter at the top edge with its
|
|
@@ -4,23 +4,30 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var createIcon = require('../createIcon.js');
|
|
5
5
|
var iconParts = require('../iconParts.js');
|
|
6
6
|
|
|
7
|
-
// The band sits
|
|
8
|
-
// sides flush (its round caps stuck out of both)
|
|
9
|
-
//
|
|
10
|
-
//
|
|
7
|
+
// The band sits a third of the way down the case (11.5; it was halfway, 12.5) and is a cut through
|
|
8
|
+
// it: kept inside the case it meets the sides flush (its round caps stuck out of both), in the
|
|
9
|
+
// outline too, where it ends on the sides' centre line. A clasp hangs from its middle: low and
|
|
10
|
+
// wide, in the accent colour like the band on the filled case (secondary in duotone), with a
|
|
11
|
+
// primary lock square in it where it had a slot showing the band through. Vivid: the clasp is all
|
|
12
|
+
// accent, without the square, which made it read as an accent ring round a primary middle.
|
|
11
13
|
const BRIEFCASE_CASE = { x: 2, y: 7, width: 20, height: 14, rx: 2 };
|
|
12
14
|
const BRIEFCASE_HANDLE = 'M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2';
|
|
15
|
+
const BRIEFCASE_BAND = 'M2 11.5h20';
|
|
13
16
|
/** The clasp over the band, hanging down from it. */
|
|
14
|
-
const BRIEFCASE_CLASP = 'M10.6
|
|
15
|
-
const BRIEFCASE_LOCK = { x: 11.2, y:
|
|
17
|
+
const BRIEFCASE_CLASP = 'M10.6 10.3h2.8a.8.8 0 01.8.8v2.6a.8.8 0 01-.8.8h-2.8a.8.8 0 01-.8-.8v-2.6a.8.8 0 01.8-.8z';
|
|
18
|
+
const BRIEFCASE_LOCK = { x: 11.2, y: 11.6, width: 1.6, height: 1.6 };
|
|
19
|
+
/** The band, clipped to the case so it ends flush with the sides. */
|
|
20
|
+
function briefcaseBand(uid, color, width, opacity = 1) {
|
|
21
|
+
return iconParts.within(uid, 'band', jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE }), jsxRuntime.jsx("path", { d: BRIEFCASE_BAND, stroke: color, strokeWidth: width, opacity: opacity }));
|
|
22
|
+
}
|
|
16
23
|
const NtdBriefcase = /* @__PURE__ */ createIcon.createIcon({
|
|
17
24
|
displayName: 'NtdBriefcase',
|
|
18
25
|
paths: {
|
|
19
|
-
solid: (props) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }),
|
|
20
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
26
|
+
solid: (props) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: props.primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: props.primaryColor, strokeWidth: props.strokeWidth, fill: "none" }), briefcaseBand(props.uid, props.accentColor, props.strokeWidth * 1.5, props.accentOpacity), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: props.accentColor, opacity: props.accentOpacity }), jsxRuntime.jsx("rect", { ...BRIEFCASE_LOCK, fill: props.primaryColor })] })),
|
|
27
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), briefcaseBand(uid, primaryColor, strokeWidth), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: primaryColor })] })),
|
|
21
28
|
// fills only: the case and the handle primary, the band and the clasp secondary
|
|
22
|
-
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
23
|
-
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
29
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), briefcaseBand(uid, secondaryColor, strokeWidth * 1.5), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: secondaryColor }), jsxRuntime.jsx("rect", { ...BRIEFCASE_LOCK, fill: primaryColor })] })),
|
|
30
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BRIEFCASE_CASE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BRIEFCASE_HANDLE, stroke: secondaryColor, strokeWidth: strokeWidth, fill: "none" }), briefcaseBand(uid, secondaryColor, strokeWidth * 1.5), jsxRuntime.jsx("path", { d: BRIEFCASE_CLASP, fill: accentColor, opacity: accentOpacity })] })),
|
|
24
31
|
},
|
|
25
32
|
});
|
|
26
33
|
// NtdDollar: a line glyph, twice the stroke width in every variant but `outline`; the stem runs
|
|
@@ -115,16 +122,19 @@ const NtdTrendDown = /* @__PURE__ */ createIcon.createIcon({
|
|
|
115
122
|
},
|
|
116
123
|
});
|
|
117
124
|
// NtdPercent: the dots are rings in every variant, a hole in each (they were plain discs when
|
|
118
|
-
// filled).
|
|
119
|
-
|
|
120
|
-
const
|
|
125
|
+
// filled), 20% bigger than they were (r 3.1 with a 1.3 hole; 3 in the outline). The slash is a
|
|
126
|
+
// line glyph: twice the stroke width in every variant but `outline`.
|
|
127
|
+
const PERCENT_DOT_TOP = 'M6.5 3.4a3.1 3.1 0 100 6.2 3.1 3.1 0 100-6.2zM6.5 5.2a1.3 1.3 0 100 2.6 1.3 1.3 0 100-2.6z';
|
|
128
|
+
const PERCENT_DOT_BOTTOM = 'M17.5 14.4a3.1 3.1 0 100 6.2 3.1 3.1 0 100-6.2zM17.5 16.2a1.3 1.3 0 100 2.6 1.3 1.3 0 100-2.6z';
|
|
129
|
+
const PERCENT_SLASH = 'M19 5L5 19';
|
|
121
130
|
const NtdPercent = /* @__PURE__ */ createIcon.createIcon({
|
|
122
131
|
displayName: 'NtdPercent',
|
|
123
132
|
paths: {
|
|
124
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
125
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("
|
|
126
|
-
|
|
127
|
-
|
|
133
|
+
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PERCENT_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: `${PERCENT_DOT_TOP}${PERCENT_DOT_BOTTOM}`, fillRule: "evenodd", fill: primaryColor })] })),
|
|
134
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PERCENT_SLASH, stroke: primaryColor, strokeWidth: strokeWidth }), jsxRuntime.jsx("circle", { cx: "6.5", cy: "6.5", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "17.5", cy: "17.5", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
135
|
+
// fills only: the slash secondary, the rings primary
|
|
136
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PERCENT_SLASH, stroke: secondaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: `${PERCENT_DOT_TOP}${PERCENT_DOT_BOTTOM}`, fillRule: "evenodd", fill: primaryColor })] })),
|
|
137
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PERCENT_SLASH, stroke: primaryColor, strokeWidth: strokeWidth * 2 }), jsxRuntime.jsx("path", { d: PERCENT_DOT_TOP, fillRule: "evenodd", fill: primaryColor }), jsxRuntime.jsx("path", { d: PERCENT_DOT_BOTTOM, fillRule: "evenodd", fill: secondaryColor })] })),
|
|
128
138
|
},
|
|
129
139
|
});
|
|
130
140
|
// NtdInvoice: NtdFile's page with a short title, two rows of item and amount, and the total on
|
|
@@ -79,13 +79,23 @@ const NtdDiscount = /* @__PURE__ */ createIcon.createIcon({
|
|
|
79
79
|
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.08" }), jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "2", fill: secondaryColor }), jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "2", fill: "#F59E0B" }), jsxRuntime.jsx("path", { d: "M7 17L17 7", stroke: "white", strokeWidth: "1", opacity: "0.35" })] })),
|
|
80
80
|
},
|
|
81
81
|
});
|
|
82
|
+
// NtdPromoTag: a price tag with its hole and a percent sign on it, the sign turned 45° clockwise
|
|
83
|
+
// — its slash lies across and the two dots sit above and below it. Filled, the sign is in the
|
|
84
|
+
// accent colour like the hole (vivid: the hole secondary); duotone and the outline draw it primary.
|
|
85
|
+
const PROMO_TAG = 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z';
|
|
86
|
+
const PROMO_PERCENT_SLASH = 'M10 13h6.4';
|
|
87
|
+
/** The percent sign's two dots, r 1.15, above and below the slash. */
|
|
88
|
+
const PROMO_PERCENT_DOTS = 'M13.2 8.95a1.15 1.15 0 100 2.3 1.15 1.15 0 100-2.3zM13.2 14.75a1.15 1.15 0 100 2.3 1.15 1.15 0 100-2.3z';
|
|
89
|
+
function promoPercent(color, width, opacity = 1) {
|
|
90
|
+
return (jsxRuntime.jsxs("g", { opacity: opacity, children: [jsxRuntime.jsx("path", { d: PROMO_PERCENT_SLASH, stroke: color, strokeWidth: width }), jsxRuntime.jsx("path", { d: PROMO_PERCENT_DOTS, fill: color })] }));
|
|
91
|
+
}
|
|
82
92
|
const NtdPromoTag = /* @__PURE__ */ createIcon.createIcon({
|
|
83
93
|
displayName: 'NtdPromoTag',
|
|
84
94
|
paths: {
|
|
85
|
-
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
86
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
87
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
88
|
-
vivid: ({ primaryColor, secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d:
|
|
95
|
+
solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PROMO_TAG, fill: primaryColor }), jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "2", fill: accentColor, opacity: accentOpacity }), promoPercent(accentColor, strokeWidth * 1.5, accentOpacity)] })),
|
|
96
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PROMO_TAG, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "1.5", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), promoPercent(primaryColor, strokeWidth)] })),
|
|
97
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PROMO_TAG, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: PROMO_TAG, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "1.5", fill: primaryColor }), promoPercent(primaryColor, strokeWidth * 1.5)] })),
|
|
98
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PROMO_TAG, fill: primaryColor }), jsxRuntime.jsx("path", { d: PROMO_TAG, fill: "white", opacity: "0.08" }), jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "2", fill: secondaryColor }), promoPercent(accentColor, strokeWidth * 1.5, accentOpacity)] })),
|
|
89
99
|
},
|
|
90
100
|
});
|
|
91
101
|
const NtdGiftCard = /* @__PURE__ */ createIcon.createIcon({
|
|
@@ -49,23 +49,30 @@ const NtdUniversity = /* @__PURE__ */ createIcon.createIcon({
|
|
|
49
49
|
// at the bottom between the front cover and the back cover. Down the right edge it is cover, then
|
|
50
50
|
// a notch cut in 0.9 at the pages, then cover again: beside the pages only a narrow strip of cover
|
|
51
51
|
// is left (it was a 2.5 wide bar). The outline ends the pages with a line short of the edge, the back
|
|
52
|
-
// cover running on under the notch. The cover is
|
|
53
|
-
//
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const
|
|
52
|
+
// cover running on under the notch. The front cover is 12.2 high (3.5 → 15.7, 20% lower than it
|
|
53
|
+
// was) and the block of pages 50% thicker (3.15, it was 2.1), the book centred in the box. The
|
|
54
|
+
// cover carries one line of title, in the accent colour when filled, in its upper third (a quarter
|
|
55
|
+
// of the way down; it was halfway); NtdBookBookmark adds a ribbon there and keeps the title
|
|
56
|
+
// halfway, below it.
|
|
57
|
+
const BOOK_SILHOUETTE = 'M7 3.5h12a1 1 0 011 1v11.2h-.9v3.15H20v.65a1 1 0 01-1 1H7a2.5 2.5 0 01-2.5-2.5V6A2.5 2.5 0 017 3.5z';
|
|
58
|
+
const BOOK_PAGES = 'M6.6 15.7h11.4v3.15H6.6a1.575 1.575 0 010-3.15z';
|
|
59
|
+
const BOOK_RIBBON = 'M9.5 3.5V8l1.75-1.3L13 8V3.5z';
|
|
60
|
+
const BOOK_TITLE = 'M9.5 6.75h6.5';
|
|
61
|
+
/** The title below NtdBookBookmark's ribbon. */
|
|
62
|
+
const BOOK_TITLE_LOW = 'M9.5 10h6.5';
|
|
63
|
+
const BOOK_OUTLINE = 'M4.5 17.5V6A2.5 2.5 0 017 3.5h12a1 1 0 011 1v10H7.5a3 3 0 000 6H20M18.7 14.5v6';
|
|
58
64
|
/** The inside of the outline, for duotone's fill under it. */
|
|
59
|
-
const BOOK_OUTLINE_FILL = 'M7
|
|
65
|
+
const BOOK_OUTLINE_FILL = 'M7 3.5h12a1 1 0 011 1v10h-1.3v6H7.5a3 3 0 01-3-3V6A2.5 2.5 0 017 3.5z';
|
|
60
66
|
/** The book, with the ribbon bookmark or without it. */
|
|
61
67
|
function bookIcon(displayName, ribbon) {
|
|
68
|
+
const title = ribbon ? BOOK_TITLE_LOW : BOOK_TITLE;
|
|
62
69
|
return createIcon.createIcon({
|
|
63
70
|
displayName,
|
|
64
71
|
paths: {
|
|
65
|
-
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: BOOK_PAGES }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON })] })] })),
|
|
66
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_OUTLINE
|
|
67
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_OUTLINE_FILL, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: BOOK_OUTLINE
|
|
68
|
-
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsx("path", { d: BOOK_PAGES,
|
|
72
|
+
solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: BOOK_PAGES }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON }), jsxRuntime.jsx("path", { d: title, stroke: accentColor, strokeWidth: "1.5", fill: "none" })] })] })),
|
|
73
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: `${BOOK_OUTLINE}${title}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && (jsxRuntime.jsx("path", { d: "M9.5 4v4l1.75-1.3L13 8V4", stroke: primaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }))] })),
|
|
74
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_OUTLINE_FILL, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("path", { d: `${BOOK_OUTLINE}${title}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: primaryColor })] })),
|
|
75
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BOOK_SILHOUETTE, fill: primaryColor }), jsxRuntime.jsxs("g", { fill: accentColor, opacity: accentOpacity, children: [jsxRuntime.jsx("path", { d: BOOK_PAGES }), jsxRuntime.jsx("path", { d: title, stroke: accentColor, strokeWidth: "1.5", fill: "none" })] }), ribbon && jsxRuntime.jsx("path", { d: BOOK_RIBBON, fill: secondaryColor })] })),
|
|
69
76
|
},
|
|
70
77
|
});
|
|
71
78
|
}
|
package/dist/cjs/icons/files.js
CHANGED
|
@@ -191,19 +191,25 @@ const NtdSmartphone = /* @__PURE__ */ createIcon.createIcon({
|
|
|
191
191
|
});
|
|
192
192
|
// NtdMonitor: the neck and the base are twice the stroke width in every variant but `outline`, and
|
|
193
193
|
// the base is 30% wider — 13 across with its caps (it was 10); it sits at 21.5 so the heavier line
|
|
194
|
-
// stays in the box. Vivid: the stand secondary (it had a fixed #3B82F6 neck).
|
|
194
|
+
// stays in the box. Vivid: the stand secondary (it had a fixed #3B82F6 neck). The stand is clipped
|
|
195
|
+
// to below the screen's bottom edge: the neck's round cap reached up over the screen, which showed
|
|
196
|
+
// through duotone's see-through screen.
|
|
195
197
|
const MONITOR_SCREEN = { x: 2, y: 3, width: 20, height: 14, rx: 2 };
|
|
196
198
|
/** Neck and base for a line twice the stroke width: base 9 long + 2 × 2 of cap = 13. */
|
|
197
199
|
const MONITOR_STAND = 'M12 17v4.5M7.5 21.5h9';
|
|
198
200
|
/** The outline's neck and base, at the stroke width: base 11 long + 2 × 1 of cap = 13. */
|
|
199
201
|
const MONITOR_STAND_LINE = 'M12 17v4M6.5 21h11';
|
|
202
|
+
/** The stand, drawn only below the screen's bottom edge (y 17). */
|
|
203
|
+
function monitorStand(uid, d, color, width) {
|
|
204
|
+
return iconParts.within(uid, 'stand', jsxRuntime.jsx("rect", { x: "0", y: "17", width: "24", height: "7" }), jsxRuntime.jsx("path", { d: d, stroke: color, strokeWidth: width }));
|
|
205
|
+
}
|
|
200
206
|
const NtdMonitor = /* @__PURE__ */ createIcon.createIcon({
|
|
201
207
|
displayName: 'NtdMonitor',
|
|
202
208
|
paths: {
|
|
203
|
-
solid: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }),
|
|
204
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
205
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }),
|
|
206
|
-
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }),
|
|
209
|
+
solid: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), monitorStand(uid, MONITOR_STAND, primaryColor, strokeWidth * 2)] })),
|
|
210
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), monitorStand(uid, MONITOR_STAND_LINE, primaryColor, strokeWidth)] })),
|
|
211
|
+
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: secondaryColor, opacity: secondaryOpacity }), jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), monitorStand(uid, MONITOR_STAND, primaryColor, strokeWidth * 2)] })),
|
|
212
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...MONITOR_SCREEN, fill: primaryColor }), monitorStand(uid, MONITOR_STAND, secondaryColor, strokeWidth * 2)] })),
|
|
207
213
|
},
|
|
208
214
|
});
|
|
209
215
|
// NtdCpu: filled, the body and its pins primary and the die in the accent colour (the body was a
|
|
@@ -299,12 +305,14 @@ const NtdCreditCard = /* @__PURE__ */ createIcon.createIcon({
|
|
|
299
305
|
vivid: ({ primaryColor, accentColor, accentOpacity, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...CARD_BODY, fill: primaryColor }), jsxRuntime.jsx("rect", { ...CARD_BODY, fill: "white", opacity: "0.1" }), iconParts.within(uid, 'stripe', jsxRuntime.jsx("rect", { ...CARD_BODY }), jsxRuntime.jsx("rect", { ...CARD_STRIPE, fill: "black", opacity: "0.35" })), jsxRuntime.jsx("rect", { ...CARD_SIGNATURE, fill: accentColor, opacity: accentOpacity }), jsxRuntime.jsx("rect", { ...CARD_CVV, fill: accentColor, opacity: accentOpacity })] })),
|
|
300
306
|
},
|
|
301
307
|
});
|
|
302
|
-
// NtdPieChart: filled, two sectors of one pie (r 10) pulled
|
|
303
|
-
//
|
|
304
|
-
//
|
|
305
|
-
// slice
|
|
306
|
-
|
|
307
|
-
|
|
308
|
+
// NtdPieChart: filled, two sectors of one pie (r 10) pulled 1 apart along the small one's middle
|
|
309
|
+
// — a gap between them. The larger is the three-quarter sector from the centre; it was a segment
|
|
310
|
+
// cut off by a chord, which read as an odd shape. The whole chart is turned 45° clockwise, so the
|
|
311
|
+
// slice points right (it filled the top-right quarter). The outline keeps its open arc and the
|
|
312
|
+
// slice, turned the same way. Duotone, fills only: the larger sector secondary, the slice primary;
|
|
313
|
+
// vivid the other way.
|
|
314
|
+
const PIE_REST = 'M11 12L18.07 4.93A10 10 0 1 0 18.07 19.07Z';
|
|
315
|
+
const PIE_SLICE = 'M13 12L20.07 4.93A10 10 0 0 1 20.07 19.07Z';
|
|
308
316
|
function pieFilled(rest, slice) {
|
|
309
317
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: PIE_REST, fill: rest }), jsxRuntime.jsx("path", { d: PIE_SLICE, fill: slice })] }));
|
|
310
318
|
}
|
|
@@ -312,7 +320,7 @@ const NtdPieChart = /* @__PURE__ */ createIcon.createIcon({
|
|
|
312
320
|
displayName: 'NtdPieChart',
|
|
313
321
|
paths: {
|
|
314
322
|
solid: ({ primaryColor }) => pieFilled(primaryColor, primaryColor),
|
|
315
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "
|
|
323
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M15.76 21.27A10 10 0 1 1 15.65 2.69", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: "M19.07 19.07A10 10 0 0 0 19.07 4.93L12 12z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
316
324
|
duotone: ({ primaryColor, secondaryColor }) => pieFilled(secondaryColor, primaryColor),
|
|
317
325
|
vivid: ({ primaryColor, secondaryColor }) => pieFilled(primaryColor, secondaryColor),
|
|
318
326
|
},
|
package/dist/cjs/icons/health.js
CHANGED
|
@@ -102,29 +102,45 @@ const NtdEgg = /* @__PURE__ */ createIcon.createIcon({
|
|
|
102
102
|
vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("ellipse", { cx: "12", cy: "14", rx: "7", ry: "8", fill: primaryColor }), jsxRuntime.jsx("ellipse", { cx: "12", cy: "14", rx: "7", ry: "8", fill: "white", opacity: "0.1" })] })),
|
|
103
103
|
},
|
|
104
104
|
});
|
|
105
|
-
// NtdHamburger: even layers of one width — a low domed top bun,
|
|
106
|
-
//
|
|
107
|
-
//
|
|
108
|
-
|
|
109
|
-
const
|
|
110
|
-
const BURGER_PATTY = { x: 2.5, y:
|
|
111
|
-
const BURGER_BOTTOM = 'M3
|
|
105
|
+
// NtdHamburger: three even layers of one width — a low domed top bun, the patty and the bottom bun
|
|
106
|
+
// — each standing apart by the same gap. (The top was a tall half circle and the bottom bun wider
|
|
107
|
+
// than everything above it; the wavy band of sauce between the bun and the patty is gone.)
|
|
108
|
+
// Duotone, fills only: the buns secondary, the patty primary; vivid the patty secondary.
|
|
109
|
+
const BURGER_TOP = 'M3 10C3 6.7 7 4 12 4s9 2.7 9 6a1 1 0 01-1 1H4a1 1 0 01-1-1z';
|
|
110
|
+
const BURGER_PATTY = { x: 2.5, y: 12.3, width: 19, height: 3.4, rx: 1.7 };
|
|
111
|
+
const BURGER_BOTTOM = 'M3 17h18v2a2 2 0 01-2 2H5a2 2 0 01-2-2z';
|
|
112
|
+
function burgerFilled(buns, patty) {
|
|
113
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BURGER_TOP, fill: buns }), jsxRuntime.jsx("rect", { ...BURGER_PATTY, fill: patty }), jsxRuntime.jsx("path", { d: BURGER_BOTTOM, fill: buns })] }));
|
|
114
|
+
}
|
|
112
115
|
const NtdHamburger = /* @__PURE__ */ createIcon.createIcon({
|
|
113
116
|
displayName: 'NtdHamburger',
|
|
114
117
|
paths: {
|
|
115
|
-
solid: ({ primaryColor
|
|
116
|
-
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BURGER_TOP, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("
|
|
117
|
-
duotone: ({ primaryColor, secondaryColor
|
|
118
|
-
vivid: ({ primaryColor, secondaryColor }) => (
|
|
118
|
+
solid: ({ primaryColor }) => burgerFilled(primaryColor, primaryColor),
|
|
119
|
+
outline: ({ primaryColor, strokeWidth }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BURGER_TOP, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { ...BURGER_PATTY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("path", { d: BURGER_BOTTOM, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
120
|
+
duotone: ({ primaryColor, secondaryColor }) => burgerFilled(secondaryColor, primaryColor),
|
|
121
|
+
vivid: ({ primaryColor, secondaryColor }) => burgerFilled(primaryColor, secondaryColor),
|
|
119
122
|
},
|
|
120
123
|
});
|
|
124
|
+
// NtdDna: a double helix inside the box (the strands ran out of it, down to y 26) — two strands,
|
|
125
|
+
// x = 12 ± 6·cos(π(y − 2)/10), crossing at y 7 and 17, apart at the ends and in the middle; eight
|
|
126
|
+
// base pairs (it had three of odd lengths), two units apart and none near a crossing, each running
|
|
127
|
+
// exactly from strand to strand. Line glyph: the strands twice the stroke width in every variant
|
|
128
|
+
// but `outline`, the pairs at the stroke width, drawn under the strands so their ends hide in them.
|
|
129
|
+
const DNA_STRAND_A = 'M18 2C18 3.67 15.14 5.33 12 7S6 10.33 6 12S8.86 15.33 12 17S18 20.33 18 22';
|
|
130
|
+
const DNA_STRAND_B = 'M6 2C6 3.67 8.86 5.33 12 7S18 10.33 18 12S15.14 15.33 12 17S6 20.33 6 22';
|
|
131
|
+
const DNA_PAIRS = 'M6.29 3h11.42M8.47 5h7.06M8.47 9h7.06M6.29 11h11.42M6.29 13h11.42M8.47 15h7.06M8.47 19h7.06M6.29 21h11.42';
|
|
132
|
+
function dnaHelix(strandA, strandB, pairs, strand, pair) {
|
|
133
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: DNA_PAIRS, stroke: pairs, strokeWidth: pair }), jsxRuntime.jsx("path", { d: DNA_STRAND_B, stroke: strandB, strokeWidth: strand, fill: "none" }), jsxRuntime.jsx("path", { d: DNA_STRAND_A, stroke: strandA, strokeWidth: strand, fill: "none" })] }));
|
|
134
|
+
}
|
|
121
135
|
const NtdDna = /* @__PURE__ */ createIcon.createIcon({
|
|
122
136
|
displayName: 'NtdDna',
|
|
123
137
|
paths: {
|
|
124
|
-
solid: ({ primaryColor,
|
|
125
|
-
outline: ({ primaryColor, strokeWidth }) => (
|
|
126
|
-
|
|
127
|
-
|
|
138
|
+
solid: ({ primaryColor, strokeWidth }) => dnaHelix(primaryColor, primaryColor, primaryColor, strokeWidth * 2, strokeWidth),
|
|
139
|
+
outline: ({ primaryColor, strokeWidth }) => dnaHelix(primaryColor, primaryColor, primaryColor, strokeWidth, strokeWidth),
|
|
140
|
+
// the strands primary, the pairs secondary
|
|
141
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => dnaHelix(primaryColor, primaryColor, secondaryColor, strokeWidth * 2, strokeWidth),
|
|
142
|
+
// one strand primary, the other and the pairs secondary
|
|
143
|
+
vivid: ({ primaryColor, secondaryColor, strokeWidth }) => dnaHelix(primaryColor, secondaryColor, secondaryColor, strokeWidth * 2, strokeWidth),
|
|
128
144
|
},
|
|
129
145
|
});
|
|
130
146
|
|
package/dist/cjs/icons/travel.js
CHANGED
|
@@ -46,15 +46,15 @@ const NtdCar = /* @__PURE__ */ createIcon.createIcon({
|
|
|
46
46
|
// NtdBus: seen from the front — the body with a big windscreen (its top frame 1.75, 30% less than
|
|
47
47
|
// the side view's), the driver (NtdUser's head and shoulders) in it on the left, two headlights and
|
|
48
48
|
// a bumper line below it, and the wheels as rectangles under the body (round side-view wheels
|
|
49
|
-
// read oddly)
|
|
50
|
-
// the driver primary.
|
|
49
|
+
// read oddly), showing 2 below it — low-floor (they showed 3). Filled, the windscreen, the
|
|
50
|
+
// headlights and the bumper are in the accent colour and the driver primary.
|
|
51
51
|
const BUS_BODY = { x: 3, y: 2, width: 18, height: 17, rx: 2.5 };
|
|
52
52
|
const BUS_WINDOW = { x: 4.75, y: 3.75, width: 14.5, height: 7.5, rx: 1 };
|
|
53
53
|
/** The driver, cut off by the windscreen's bottom edge. */
|
|
54
54
|
const BUS_DRIVER = 'M8.4 5.3a1.6 1.6 0 110 3.2 1.6 1.6 0 110-3.2zM5.6 11.5v-.1a2.3 2.3 0 012.3-2.3h1a2.3 2.3 0 012.3 2.3v.1z';
|
|
55
55
|
const BUS_LIGHTS = 'M6.6 13.7a1.3 1.3 0 110 2.6 1.3 1.3 0 110-2.6zM17.4 13.7a1.3 1.3 0 110 2.6 1.3 1.3 0 110-2.6z';
|
|
56
56
|
const BUS_BUMPER = 'M3 17.4h18';
|
|
57
|
-
const BUS_WHEELS = 'M5.5
|
|
57
|
+
const BUS_WHEELS = 'M5.5 18h3v2a1 1 0 01-1 1h-1a1 1 0 01-1-1zM15.5 18h3v2a1 1 0 01-1 1h-1a1 1 0 01-1-1z';
|
|
58
58
|
function busFilled({ primaryColor, uid }, glass, details, detailOpacity) {
|
|
59
59
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: BUS_WHEELS, fill: primaryColor }), jsxRuntime.jsx("rect", { ...BUS_BODY, fill: primaryColor }), jsxRuntime.jsxs("g", { opacity: detailOpacity, children: [jsxRuntime.jsx("path", { d: BUS_LIGHTS, fill: details }), iconParts.within(uid, 'body', jsxRuntime.jsx("rect", { ...BUS_BODY }), jsxRuntime.jsx("path", { d: BUS_BUMPER, stroke: details, strokeWidth: "1.2" }))] }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, fill: glass }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_DRIVER, fill: primaryColor }))] }));
|
|
60
60
|
}
|
|
@@ -62,7 +62,7 @@ const NtdBus = /* @__PURE__ */ createIcon.createIcon({
|
|
|
62
62
|
displayName: 'NtdBus',
|
|
63
63
|
paths: {
|
|
64
64
|
solid: (props) => busFilled(props, props.accentColor, props.accentColor, props.accentOpacity),
|
|
65
|
-
outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_DRIVER, fill: primaryColor })), jsxRuntime.jsx("path", { d: "M6.6 14a1 1 0 110 2 1 1 0 110-2zM17.4 14a1 1 0 110 2 1 1 0 110-2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M6
|
|
65
|
+
outline: ({ primaryColor, strokeWidth, uid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("rect", { ...BUS_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsxRuntime.jsx("rect", { ...BUS_WINDOW, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), iconParts.within(uid, 'window', jsxRuntime.jsx("rect", { ...BUS_WINDOW }), jsxRuntime.jsx("path", { d: BUS_DRIVER, fill: primaryColor })), jsxRuntime.jsx("path", { d: "M6.6 14a1 1 0 110 2 1 1 0 110-2zM17.4 14a1 1 0 110 2 1 1 0 110-2z", fill: primaryColor }), jsxRuntime.jsx("path", { d: "M6 19v1a1 1 0 001 1h1a1 1 0 001-1v-1M15 19v1a1 1 0 001 1h1a1 1 0 001-1v-1", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
|
|
66
66
|
// fills only: the body and the driver primary, the windscreen and the details secondary
|
|
67
67
|
duotone: (props) => busFilled(props, props.secondaryColor, props.secondaryColor, 1),
|
|
68
68
|
vivid: (props) => busFilled(props, props.secondaryColor, props.accentColor, props.accentOpacity),
|