@ng-native/icons 0.4.0 → 0.5.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/README.md +2 -1
- package/dist/ng-icon.d.ts +18 -2
- package/dist/ng-icon.js +59 -15
- package/dist/ng-icon.js.map +1 -1
- package/dist/parse-svg.d.ts +5 -2
- package/dist/parse-svg.js +15 -2
- package/dist/parse-svg.js.map +1 -1
- package/dist/svg-elements.js +5 -0
- package/dist/svg-elements.js.map +1 -1
- package/dist/svg-props.d.ts +29 -0
- package/dist/svg-props.js +139 -0
- package/dist/svg-props.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -35,7 +35,8 @@ underneath `NgIcon` changes.
|
|
|
35
35
|
## What's in the package
|
|
36
36
|
|
|
37
37
|
- `NgIcon` - the component, taking `name` or `svg`, plus `size`, `color`, `strokeWidth` and
|
|
38
|
-
`accessibilityLabel`.
|
|
38
|
+
`accessibilityLabel`. With no `size` an icon is `1em`, as it is on the web: as big as the text
|
|
39
|
+
around it, and sized by a `font-size` or by a width and height from a stylesheet.
|
|
39
40
|
- A narrow SVG parser (`svg`, `g`, `path`, `circle`, `ellipse`, `rect`, `line`, `polyline`,
|
|
40
41
|
`polygon`) that covers every set ng-icons ships.
|
|
41
42
|
|
package/dist/ng-icon.d.ts
CHANGED
|
@@ -36,25 +36,41 @@ export declare class NgIcon {
|
|
|
36
36
|
readonly svg: import("@angular/core").InputSignal<string | undefined>;
|
|
37
37
|
/**
|
|
38
38
|
* Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static
|
|
39
|
-
* `size="32"` is read as the number it spells.
|
|
39
|
+
* `size="32"` is read as the number it spells. With none, the icon is `1em`: as big as the
|
|
40
|
+
* text around it, and sized by a `font-size` on it or above it, or by a width and height.
|
|
40
41
|
*/
|
|
41
|
-
readonly size: import("@angular/core").InputSignalWithTransform<number, string | number>;
|
|
42
|
+
readonly size: import("@angular/core").InputSignalWithTransform<number | undefined, string | number | undefined>;
|
|
42
43
|
/** What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. */
|
|
43
44
|
readonly color: import("@angular/core").InputSignal<string | undefined>;
|
|
44
45
|
/** Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. */
|
|
45
46
|
readonly strokeWidth: import("@angular/core").InputSignal<string | number | undefined>;
|
|
46
47
|
/** Absent leaves the icon out of the accessibility tree, which is right for a decorative one. */
|
|
47
48
|
readonly accessibilityLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
49
|
+
/** The size as an inline style, or nothing for the stylesheet's `1em` to stand. */
|
|
48
50
|
protected readonly style: Signal<{
|
|
51
|
+
width?: undefined;
|
|
52
|
+
height?: undefined;
|
|
53
|
+
} | {
|
|
49
54
|
width: number;
|
|
50
55
|
height: number;
|
|
51
56
|
}>;
|
|
57
|
+
/** What the view scales its drawing to: the size, or the whole of the box it is laid out as. */
|
|
58
|
+
protected readonly box: Signal<number | "100%">;
|
|
52
59
|
private readonly markup;
|
|
53
60
|
private readonly root;
|
|
54
61
|
protected readonly viewBox: Signal<Record<string, unknown>>;
|
|
55
62
|
constructor();
|
|
56
63
|
private draw;
|
|
57
64
|
private append;
|
|
65
|
+
/**
|
|
66
|
+
* A `currentColor` stop is settled here from the `color` input, where a `currentColor` brush is
|
|
67
|
+
* painted by native from the colour the cascade gives the icon. With no input it is black.
|
|
68
|
+
*/
|
|
69
|
+
private reportUntintedStop;
|
|
70
|
+
/** An incomplete drawing with no message is the hardest failure to track down. */
|
|
71
|
+
private reportUndrawn;
|
|
72
|
+
/** The native props of one element: a gradient's, a text's, or a shape's. */
|
|
73
|
+
private propsOf;
|
|
58
74
|
private create;
|
|
59
75
|
static ɵfac: i0.ɵɵFactoryDeclaration<NgIcon, never>;
|
|
60
76
|
static ɵcmp: i0.ɵɵComponentDeclaration<NgIcon, "ng-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "svg": { "alias": "svg"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "accessibilityLabel": { "alias": "accessibilityLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
package/dist/ng-icon.js
CHANGED
|
@@ -27,8 +27,10 @@ import { claimHost, HostEngine } from '@ng-native/fabric';
|
|
|
27
27
|
import { NgIconsToken } from '@ng-icons/core';
|
|
28
28
|
import { parseSvg } from "./parse-svg.js";
|
|
29
29
|
import { registerSvgComponents } from "./svg-elements.js";
|
|
30
|
-
import { PAINT, SVG_ELEMENTS, isTokenPaint, nativeProps, own, styleAttributes, viewBoxProps, } from "./svg-props.js";
|
|
30
|
+
import { PAINT, SVG_ELEMENTS, UNDRAWN, gradientProps, isGradient, isTokenPaint, nativeProps, own, stopColor, styleAttributes, textProps, viewBoxProps, } from "./svg-props.js";
|
|
31
31
|
import * as i0 from "@angular/core";
|
|
32
|
+
/** The tags already reported as not drawn, so a list of icons says it once. */
|
|
33
|
+
const reported = new Set();
|
|
32
34
|
/** ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. */
|
|
33
35
|
function toPropertyName(name) {
|
|
34
36
|
return name
|
|
@@ -50,9 +52,10 @@ export class NgIcon {
|
|
|
50
52
|
...(ngDevMode ? [undefined, { debugName: "svg" }] : /* istanbul ignore next */ []));
|
|
51
53
|
/**
|
|
52
54
|
* Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static
|
|
53
|
-
* `size="32"` is read as the number it spells.
|
|
55
|
+
* `size="32"` is read as the number it spells. With none, the icon is `1em`: as big as the
|
|
56
|
+
* text around it, and sized by a `font-size` on it or above it, or by a width and height.
|
|
54
57
|
*/
|
|
55
|
-
size = input(
|
|
58
|
+
size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === '' ? undefined : numberAttribute(value, undefined) });
|
|
56
59
|
/** What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. */
|
|
57
60
|
color = input(/* @ts-ignore */
|
|
58
61
|
...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
@@ -62,8 +65,15 @@ export class NgIcon {
|
|
|
62
65
|
/** Absent leaves the icon out of the accessibility tree, which is right for a decorative one. */
|
|
63
66
|
accessibilityLabel = input(/* @ts-ignore */
|
|
64
67
|
...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
|
|
65
|
-
|
|
68
|
+
/** The size as an inline style, or nothing for the stylesheet's `1em` to stand. */
|
|
69
|
+
style = computed(() => {
|
|
70
|
+
const size = this.size();
|
|
71
|
+
return size === undefined ? {} : { width: size, height: size };
|
|
72
|
+
}, /* @ts-ignore */
|
|
66
73
|
...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
|
|
74
|
+
/** What the view scales its drawing to: the size, or the whole of the box it is laid out as. */
|
|
75
|
+
box = computed(() => this.size() ?? '100%', /* @ts-ignore */
|
|
76
|
+
...(ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []));
|
|
67
77
|
markup = computed(() => {
|
|
68
78
|
const svg = this.svg();
|
|
69
79
|
if (svg !== undefined)
|
|
@@ -122,12 +132,50 @@ export class NgIcon {
|
|
|
122
132
|
append(parent, node) {
|
|
123
133
|
const element = own(SVG_ELEMENTS, node.tag);
|
|
124
134
|
if (!element)
|
|
125
|
-
return;
|
|
135
|
+
return this.reportUndrawn(node.tag);
|
|
126
136
|
const shape = this.create(element, node);
|
|
127
137
|
for (const child of node.children)
|
|
128
138
|
this.append(shape, child);
|
|
129
139
|
this.renderer.appendChild(parent, shape);
|
|
130
140
|
}
|
|
141
|
+
/**
|
|
142
|
+
* A `currentColor` stop is settled here from the `color` input, where a `currentColor` brush is
|
|
143
|
+
* painted by native from the colour the cascade gives the icon. With no input it is black.
|
|
144
|
+
*/
|
|
145
|
+
reportUntintedStop(gradient) {
|
|
146
|
+
if (typeof ngDevMode === 'undefined' || !ngDevMode)
|
|
147
|
+
return;
|
|
148
|
+
if (this.color() !== undefined || reported.has('currentColor'))
|
|
149
|
+
return;
|
|
150
|
+
if (!gradient.children.some((stop) => stopColor(stop.attrs) === 'currentColor'))
|
|
151
|
+
return;
|
|
152
|
+
reported.add('currentColor');
|
|
153
|
+
console.warn('[angular-native] <ng-icon> paints a gradient stop written as currentColor from its ' +
|
|
154
|
+
'`color` input, and this icon has none, so the stop is black. Set `color` on the icon.');
|
|
155
|
+
}
|
|
156
|
+
/** An incomplete drawing with no message is the hardest failure to track down. */
|
|
157
|
+
reportUndrawn(tag) {
|
|
158
|
+
if (typeof ngDevMode === 'undefined' || !ngDevMode)
|
|
159
|
+
return;
|
|
160
|
+
if (UNDRAWN.has(tag) || reported.has(tag))
|
|
161
|
+
return;
|
|
162
|
+
reported.add(tag);
|
|
163
|
+
const drawn = ['svg', ...Object.keys(SVG_ELEMENTS), 'stop'].filter((name) => name !== '#text');
|
|
164
|
+
console.warn(`[angular-native] <ng-icon> does not draw <${tag}>, so it is left out of the icon. ` +
|
|
165
|
+
`It draws ${drawn.slice(0, -1).join(', ')} and ${drawn.at(-1)}.`);
|
|
166
|
+
}
|
|
167
|
+
/** The native props of one element: a gradient's, a text's, or a shape's. */
|
|
168
|
+
propsOf(node, attrs) {
|
|
169
|
+
const context = { color: (value) => this.engine.color(value) };
|
|
170
|
+
if (isGradient(node.tag)) {
|
|
171
|
+
this.reportUntintedStop(node);
|
|
172
|
+
return gradientProps(node, context, this.color());
|
|
173
|
+
}
|
|
174
|
+
const props = nativeProps(node.tag, attrs, context);
|
|
175
|
+
if (node.tag === '#text')
|
|
176
|
+
return { ...props, content: node.text };
|
|
177
|
+
return node.tag === 'text' || node.tag === 'tspan' ? { ...props, ...textProps(attrs) } : props;
|
|
178
|
+
}
|
|
131
179
|
create(element, node) {
|
|
132
180
|
const shape = this.renderer.createElement(element);
|
|
133
181
|
// Created here rather than by a template, so nothing else will account for it: without this
|
|
@@ -140,7 +188,7 @@ export class NgIcon {
|
|
|
140
188
|
'--ng-icon__stroke-width': this.strokeWidth(),
|
|
141
189
|
}),
|
|
142
190
|
};
|
|
143
|
-
const props =
|
|
191
|
+
const props = this.propsOf(node, attrs);
|
|
144
192
|
// A paint that reads a custom property is settled by the cascade, with the tokens in scope
|
|
145
193
|
// for the shape, and follows them. It stays in `propList`, which says the shape has one.
|
|
146
194
|
const cascade = this.engine;
|
|
@@ -155,18 +203,15 @@ export class NgIcon {
|
|
|
155
203
|
return shape;
|
|
156
204
|
}
|
|
157
205
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: NgIcon, isStandalone: true, selector: "ng-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "style()", "color": "color()", "bbWidth": "
|
|
206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: NgIcon, isStandalone: true, selector: "ng-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "style()", "color": "color()", "bbWidth": "box()", "bbHeight": "box()", "minX": "viewBox().minX", "minY": "viewBox().minY", "vbWidth": "viewBox().vbWidth", "vbHeight": "viewBox().vbHeight", "align": "viewBox().align", "meetOrSlice": "viewBox().meetOrSlice", "accessible": "accessibilityLabel() !== undefined", "accessibilityRole": "accessibilityLabel() === undefined ? undefined : 'image'", "accessibilityLabel": "accessibilityLabel()" } }, ngImport: i0, template: '', isInline: true, styles: ["\n :host {\n width: 1em;\n height: 1em;\n }\n "] });
|
|
159
207
|
}
|
|
160
208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NgIcon, decorators: [{
|
|
161
209
|
type: Component,
|
|
162
|
-
args: [{
|
|
163
|
-
selector: 'ng-icon',
|
|
164
|
-
template: '',
|
|
165
|
-
host: {
|
|
210
|
+
args: [{ selector: 'ng-icon', template: '', host: {
|
|
166
211
|
'[style]': 'style()',
|
|
167
212
|
'[color]': 'color()',
|
|
168
|
-
'[bbWidth]': '
|
|
169
|
-
'[bbHeight]': '
|
|
213
|
+
'[bbWidth]': 'box()',
|
|
214
|
+
'[bbHeight]': 'box()',
|
|
170
215
|
'[minX]': 'viewBox().minX',
|
|
171
216
|
'[minY]': 'viewBox().minY',
|
|
172
217
|
'[vbWidth]': 'viewBox().vbWidth',
|
|
@@ -176,7 +221,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
|
|
|
176
221
|
'[accessible]': 'accessibilityLabel() !== undefined',
|
|
177
222
|
'[accessibilityRole]': "accessibilityLabel() === undefined ? undefined : 'image'",
|
|
178
223
|
'[accessibilityLabel]': 'accessibilityLabel()',
|
|
179
|
-
},
|
|
180
|
-
}]
|
|
224
|
+
}, styles: ["\n :host {\n width: 1em;\n height: 1em;\n }\n "] }]
|
|
181
225
|
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], svg: [{ type: i0.Input, args: [{ isSignal: true, alias: "svg", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", required: false }] }] } });
|
|
182
226
|
//# sourceMappingURL=ng-icon.js.map
|
package/dist/ng-icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-icon.js","sourceRoot":"","sources":["../src/ng-icon.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * An icon, from the same `@ng-icons` packages a web app uses.\n *\n * An app imports `NgIcon`, provides the icons it uses with ng-icons' own `provideIcons`, and\n * writes `<ng-icon name=\"heroBookOpen\" [size]=\"28\" color=\"#ff9f0a\" />`. The imports are the same\n * ones a web app writes:\n *\n * ```ts\n * import { NgIcon } from '@ng-native/icons';\n * import { provideIcons } from '@ng-icons/core';\n * import { heroBookOpen } from '@ng-icons/heroicons/outline';\n * ```\n *\n * The icon *packages* are the reusable part: each set ships its icons as plain strings of SVG\n * markup, and `provideIcons` is ordinary dependency injection. What cannot be reused is\n * `@ng-icons/core`'s own `NgIcon`, which inserts that markup with `innerHTML` and sizes it with\n * CSS custom properties. This is the same component against react-native-svg's native views: the\n * markup is parsed, translated, and committed as real shapes.\n *\n * The two things ng-icons expresses in CSS become inputs here. `color` is set on the host, which\n * is what native paints a `currentColor` brush from - so a bound colour changes every stroke in\n * the icon without re-parsing it. `strokeWidth` fills in `var(--ng-icon__stroke-width, 1.5)`,\n * which is how the heroicons outline set carries its weight.\n */\nimport {\n Component,\n ElementRef,\n Renderer2,\n computed,\n effect,\n inject,\n input,\n numberAttribute,\n type Signal,\n} from '@angular/core';\nimport { claimHost, type Engine, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NgIconsToken } from '@ng-icons/core';\nimport { parseSvg, type SvgNode } from './parse-svg.ts';\nimport { registerSvgComponents } from './svg-elements.ts';\nimport {\n PAINT,\n SVG_ELEMENTS,\n isTokenPaint,\n nativeProps,\n own,\n styleAttributes,\n viewBoxProps,\n} from './svg-props.ts';\n\n/** ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. */\nfunction toPropertyName(name: string): string {\n return name\n .replace(/([^a-zA-Z0-9])+(.)?/g, (_, __, character: string | undefined) =>\n character ? character.toUpperCase() : '',\n )\n .replace(/[^a-zA-Z\\d]/g, '')\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n}\n\n@Component({\n selector: 'ng-icon',\n template: '',\n host: {\n '[style]': 'style()',\n '[color]': 'color()',\n '[bbWidth]': 'size()',\n '[bbHeight]': 'size()',\n '[minX]': 'viewBox().minX',\n '[minY]': 'viewBox().minY',\n '[vbWidth]': 'viewBox().vbWidth',\n '[vbHeight]': 'viewBox().vbHeight',\n '[align]': 'viewBox().align',\n '[meetOrSlice]': 'viewBox().meetOrSlice',\n '[accessible]': 'accessibilityLabel() !== undefined',\n '[accessibilityRole]': \"accessibilityLabel() === undefined ? undefined : 'image'\",\n '[accessibilityLabel]': 'accessibilityLabel()',\n },\n})\nexport class NgIcon {\n private readonly host = inject(ElementRef).nativeElement as EngineNode;\n private readonly renderer = inject(Renderer2);\n private readonly engine = inject(HostEngine);\n /** Every `provideIcons` in scope, innermost last, which is how ng-icons layers them. */\n private readonly icons = inject(NgIconsToken, { optional: true }) ?? [];\n\n /** The key the icon was provided under: `heroBookOpen`, or `hero-book-open`. */\n readonly name = input<string>();\n /** Markup, for an icon that comes from somewhere other than a provider. */\n readonly svg = input<string>();\n /**\n * Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static\n * `size=\"32\"` is read as the number it spells.\n */\n readonly size = input(24, { transform: (value: number | string) => numberAttribute(value, 24) });\n /** What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. */\n readonly color = input<string>();\n /** Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. */\n readonly strokeWidth = input<number | string>();\n /** Absent leaves the icon out of the accessibility tree, which is right for a decorative one. */\n readonly accessibilityLabel = input<string>();\n\n protected readonly style = computed(() => ({ width: this.size(), height: this.size() }));\n\n private readonly markup: Signal<string | undefined> = computed(() => {\n const svg = this.svg();\n if (svg !== undefined) return svg;\n const name = this.name();\n if (name === undefined) return undefined;\n\n const key = toPropertyName(name);\n // Reversed, because a nearer `provideIcons` should win over one further up the tree.\n for (const set of [...this.icons].reverse()) {\n const markup = own(set, key);\n if (markup) return markup;\n }\n if (typeof ngDevMode !== 'undefined' && ngDevMode) {\n console.warn(\n `[angular-native] no icon named ${name}. Pass it to provideIcons() from the set it ` +\n `belongs to, the same way you would on the web.`,\n );\n }\n return undefined;\n });\n\n private readonly root = computed(() => {\n const markup = this.markup();\n return markup === undefined ? null : parseSvg(markup);\n });\n\n protected readonly viewBox = computed(() => viewBoxProps(this.root()?.attrs['viewBox']));\n\n constructor() {\n // Before the first shape is created, which is before this component's own commit.\n registerSvgComponents();\n // Claimed, and stripped of the attributes Angular wrote from static inputs: `name` is one of\n // ours *and* one of react-native-svg's, so leaving it there hands native an element name.\n claimHost(this.host);\n for (const input of Object.keys(\n (NgIcon as { ɵcmp?: { inputs?: object } }).ɵcmp?.inputs ?? {},\n )) {\n delete this.host.props[input];\n }\n // The shapes are created rather than templated: an icon's tree is data, and a template that\n // could express it would be a component per tag with a recursive switch between them.\n effect(() => this.draw());\n }\n\n private draw(): void {\n const root = this.root();\n for (const child of [...this.host.children]) this.renderer.removeChild(this.host, child);\n if (!root) return;\n\n // Everything hangs off one group carrying the root's presentation attributes, which is how\n // react-native-svg's own `Svg` does it: the svg view itself holds no paint, so a root that\n // says `stroke=\"currentColor\"` needs a group for its children to inherit from.\n const group = this.create('svg-g', root);\n for (const child of root.children) this.append(group, child);\n this.renderer.appendChild(this.host, group);\n }\n\n private append(parent: unknown, node: SvgNode): void {\n const element = own(SVG_ELEMENTS, node.tag);\n if (!element) return;\n const shape = this.create(element, node);\n for (const child of node.children) this.append(shape, child);\n this.renderer.appendChild(parent, shape);\n }\n\n private create(element: string, node: SvgNode): unknown {\n const shape = this.renderer.createElement(element) as EngineNode;\n // Created here rather than by a template, so nothing else will account for it: without this\n // the engine reports every shape as an element whose component was forgotten.\n claimHost(shape);\n const attrs = {\n ...node.attrs,\n // A `style` attribute is where ng-icons puts the stroke width, as a custom property.\n ...styleAttributes(node.attrs['style'] ?? '', {\n '--ng-icon__stroke-width': this.strokeWidth(),\n }),\n };\n const props = nativeProps(node.tag, attrs, { color: (value) => this.engine.color(value) });\n // A paint that reads a custom property is settled by the cascade, with the tokens in scope\n // for the shape, and follows them. It stays in `propList`, which says the shape has one.\n const cascade = this.engine as Partial<Pick<Engine, 'setBoundStyle'>>;\n for (const paint of PAINT) {\n if (!isTokenPaint(attrs[paint]) || !cascade.setBoundStyle?.(shape, paint, attrs[paint]))\n continue;\n delete props[paint];\n }\n for (const [prop, value] of Object.entries(props)) {\n this.renderer.setProperty(shape, prop, value);\n }\n return shape;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ng-icon.js","sourceRoot":"","sources":["../src/ng-icon.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * An icon, from the same `@ng-icons` packages a web app uses.\n *\n * An app imports `NgIcon`, provides the icons it uses with ng-icons' own `provideIcons`, and\n * writes `<ng-icon name=\"heroBookOpen\" [size]=\"28\" color=\"#ff9f0a\" />`. The imports are the same\n * ones a web app writes:\n *\n * ```ts\n * import { NgIcon } from '@ng-native/icons';\n * import { provideIcons } from '@ng-icons/core';\n * import { heroBookOpen } from '@ng-icons/heroicons/outline';\n * ```\n *\n * The icon *packages* are the reusable part: each set ships its icons as plain strings of SVG\n * markup, and `provideIcons` is ordinary dependency injection. What cannot be reused is\n * `@ng-icons/core`'s own `NgIcon`, which inserts that markup with `innerHTML` and sizes it with\n * CSS custom properties. This is the same component against react-native-svg's native views: the\n * markup is parsed, translated, and committed as real shapes.\n *\n * The two things ng-icons expresses in CSS become inputs here. `color` is set on the host, which\n * is what native paints a `currentColor` brush from - so a bound colour changes every stroke in\n * the icon without re-parsing it. `strokeWidth` fills in `var(--ng-icon__stroke-width, 1.5)`,\n * which is how the heroicons outline set carries its weight.\n */\nimport {\n Component,\n ElementRef,\n Renderer2,\n computed,\n effect,\n inject,\n input,\n numberAttribute,\n type Signal,\n} from '@angular/core';\nimport { claimHost, type Engine, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NgIconsToken } from '@ng-icons/core';\nimport { parseSvg, type SvgNode } from './parse-svg.ts';\nimport { registerSvgComponents } from './svg-elements.ts';\nimport {\n PAINT,\n SVG_ELEMENTS,\n UNDRAWN,\n gradientProps,\n isGradient,\n isTokenPaint,\n nativeProps,\n own,\n stopColor,\n styleAttributes,\n textProps,\n viewBoxProps,\n} from './svg-props.ts';\n\n/** The tags already reported as not drawn, so a list of icons says it once. */\nconst reported = new Set<string>();\n\n/** ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. */\nfunction toPropertyName(name: string): string {\n return name\n .replace(/([^a-zA-Z0-9])+(.)?/g, (_, __, character: string | undefined) =>\n character ? character.toUpperCase() : '',\n )\n .replace(/[^a-zA-Z\\d]/g, '')\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n}\n\n@Component({\n selector: 'ng-icon',\n template: '',\n /*\n * With no size it is as big as the text around it, which is what an icon is on the web:\n * `@ng-icons/core` sizes one `1em`, and a library sizes its icons with a font size. A `size`\n * is an inline style, which beats this.\n */\n styles: `\n :host {\n width: 1em;\n height: 1em;\n }\n `,\n host: {\n '[style]': 'style()',\n '[color]': 'color()',\n '[bbWidth]': 'box()',\n '[bbHeight]': 'box()',\n '[minX]': 'viewBox().minX',\n '[minY]': 'viewBox().minY',\n '[vbWidth]': 'viewBox().vbWidth',\n '[vbHeight]': 'viewBox().vbHeight',\n '[align]': 'viewBox().align',\n '[meetOrSlice]': 'viewBox().meetOrSlice',\n '[accessible]': 'accessibilityLabel() !== undefined',\n '[accessibilityRole]': \"accessibilityLabel() === undefined ? undefined : 'image'\",\n '[accessibilityLabel]': 'accessibilityLabel()',\n },\n})\nexport class NgIcon {\n private readonly host = inject(ElementRef).nativeElement as EngineNode;\n private readonly renderer = inject(Renderer2);\n private readonly engine = inject(HostEngine);\n /** Every `provideIcons` in scope, innermost last, which is how ng-icons layers them. */\n private readonly icons = inject(NgIconsToken, { optional: true }) ?? [];\n\n /** The key the icon was provided under: `heroBookOpen`, or `hero-book-open`. */\n readonly name = input<string>();\n /** Markup, for an icon that comes from somewhere other than a provider. */\n readonly svg = input<string>();\n /**\n * Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static\n * `size=\"32\"` is read as the number it spells. With none, the icon is `1em`: as big as the\n * text around it, and sized by a `font-size` on it or above it, or by a width and height.\n */\n readonly size = input(undefined, {\n transform: (value: number | string | undefined) =>\n value === undefined || value === '' ? undefined : numberAttribute(value, undefined),\n });\n /** What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. */\n readonly color = input<string>();\n /** Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. */\n readonly strokeWidth = input<number | string>();\n /** Absent leaves the icon out of the accessibility tree, which is right for a decorative one. */\n readonly accessibilityLabel = input<string>();\n\n /** The size as an inline style, or nothing for the stylesheet's `1em` to stand. */\n protected readonly style = computed(() => {\n const size = this.size();\n return size === undefined ? {} : { width: size, height: size };\n });\n /** What the view scales its drawing to: the size, or the whole of the box it is laid out as. */\n protected readonly box = computed(() => this.size() ?? '100%');\n\n private readonly markup: Signal<string | undefined> = computed(() => {\n const svg = this.svg();\n if (svg !== undefined) return svg;\n const name = this.name();\n if (name === undefined) return undefined;\n\n const key = toPropertyName(name);\n // Reversed, because a nearer `provideIcons` should win over one further up the tree.\n for (const set of [...this.icons].reverse()) {\n const markup = own(set, key);\n if (markup) return markup;\n }\n if (typeof ngDevMode !== 'undefined' && ngDevMode) {\n console.warn(\n `[angular-native] no icon named ${name}. Pass it to provideIcons() from the set it ` +\n `belongs to, the same way you would on the web.`,\n );\n }\n return undefined;\n });\n\n private readonly root = computed(() => {\n const markup = this.markup();\n return markup === undefined ? null : parseSvg(markup);\n });\n\n protected readonly viewBox = computed(() => viewBoxProps(this.root()?.attrs['viewBox']));\n\n constructor() {\n // Before the first shape is created, which is before this component's own commit.\n registerSvgComponents();\n // Claimed, and stripped of the attributes Angular wrote from static inputs: `name` is one of\n // ours *and* one of react-native-svg's, so leaving it there hands native an element name.\n claimHost(this.host);\n for (const input of Object.keys(\n (NgIcon as { ɵcmp?: { inputs?: object } }).ɵcmp?.inputs ?? {},\n )) {\n delete this.host.props[input];\n }\n // The shapes are created rather than templated: an icon's tree is data, and a template that\n // could express it would be a component per tag with a recursive switch between them.\n effect(() => this.draw());\n }\n\n private draw(): void {\n const root = this.root();\n for (const child of [...this.host.children]) this.renderer.removeChild(this.host, child);\n if (!root) return;\n\n // Everything hangs off one group carrying the root's presentation attributes, which is how\n // react-native-svg's own `Svg` does it: the svg view itself holds no paint, so a root that\n // says `stroke=\"currentColor\"` needs a group for its children to inherit from.\n const group = this.create('svg-g', root);\n for (const child of root.children) this.append(group, child);\n this.renderer.appendChild(this.host, group);\n }\n\n private append(parent: unknown, node: SvgNode): void {\n const element = own(SVG_ELEMENTS, node.tag);\n if (!element) return this.reportUndrawn(node.tag);\n const shape = this.create(element, node);\n for (const child of node.children) this.append(shape, child);\n this.renderer.appendChild(parent, shape);\n }\n\n /**\n * A `currentColor` stop is settled here from the `color` input, where a `currentColor` brush is\n * painted by native from the colour the cascade gives the icon. With no input it is black.\n */\n private reportUntintedStop(gradient: SvgNode): void {\n if (typeof ngDevMode === 'undefined' || !ngDevMode) return;\n if (this.color() !== undefined || reported.has('currentColor')) return;\n if (!gradient.children.some((stop) => stopColor(stop.attrs) === 'currentColor')) return;\n reported.add('currentColor');\n console.warn(\n '[angular-native] <ng-icon> paints a gradient stop written as currentColor from its ' +\n '`color` input, and this icon has none, so the stop is black. Set `color` on the icon.',\n );\n }\n\n /** An incomplete drawing with no message is the hardest failure to track down. */\n private reportUndrawn(tag: string): void {\n if (typeof ngDevMode === 'undefined' || !ngDevMode) return;\n if (UNDRAWN.has(tag) || reported.has(tag)) return;\n reported.add(tag);\n const drawn = ['svg', ...Object.keys(SVG_ELEMENTS), 'stop'].filter((name) => name !== '#text');\n console.warn(\n `[angular-native] <ng-icon> does not draw <${tag}>, so it is left out of the icon. ` +\n `It draws ${drawn.slice(0, -1).join(', ')} and ${drawn.at(-1)}.`,\n );\n }\n\n /** The native props of one element: a gradient's, a text's, or a shape's. */\n private propsOf(node: SvgNode, attrs: Record<string, string>): Record<string, unknown> {\n const context = { color: (value: string) => this.engine.color(value) };\n if (isGradient(node.tag)) {\n this.reportUntintedStop(node);\n return gradientProps(node, context, this.color());\n }\n const props = nativeProps(node.tag, attrs, context);\n if (node.tag === '#text') return { ...props, content: node.text };\n return node.tag === 'text' || node.tag === 'tspan' ? { ...props, ...textProps(attrs) } : props;\n }\n\n private create(element: string, node: SvgNode): unknown {\n const shape = this.renderer.createElement(element) as EngineNode;\n // Created here rather than by a template, so nothing else will account for it: without this\n // the engine reports every shape as an element whose component was forgotten.\n claimHost(shape);\n const attrs = {\n ...node.attrs,\n // A `style` attribute is where ng-icons puts the stroke width, as a custom property.\n ...styleAttributes(node.attrs['style'] ?? '', {\n '--ng-icon__stroke-width': this.strokeWidth(),\n }),\n };\n const props = this.propsOf(node, attrs);\n // A paint that reads a custom property is settled by the cascade, with the tokens in scope\n // for the shape, and follows them. It stays in `propList`, which says the shape has one.\n const cascade = this.engine as Partial<Pick<Engine, 'setBoundStyle'>>;\n for (const paint of PAINT) {\n if (!isTokenPaint(attrs[paint]) || !cascade.setBoundStyle?.(shape, paint, attrs[paint]))\n continue;\n delete props[paint];\n }\n for (const [prop, value] of Object.entries(props)) {\n this.renderer.setProperty(shape, prop, value);\n }\n return shape;\n }\n}\n"]}
|
package/dist/parse-svg.d.ts
CHANGED
|
@@ -16,11 +16,14 @@ export interface SvgNode {
|
|
|
16
16
|
readonly tag: string;
|
|
17
17
|
readonly attrs: Readonly<Record<string, string>>;
|
|
18
18
|
readonly children: SvgNode[];
|
|
19
|
+
/** The characters of a `#text` node, which only a `text` or a `tspan` has. */
|
|
20
|
+
readonly text?: string;
|
|
19
21
|
}
|
|
20
22
|
/**
|
|
21
23
|
* The root element, or null when there is nothing renderable.
|
|
22
24
|
*
|
|
23
|
-
* Only elements are kept
|
|
24
|
-
* screen reader on the web would read, which
|
|
25
|
+
* Only elements are kept, and the characters inside a `text` or a `tspan`: an icon's other text
|
|
26
|
+
* nodes are whitespace, and a `<title>` is a label a screen reader on the web would read, which
|
|
27
|
+
* here is `accessibilityLabel` on the host.
|
|
25
28
|
*/
|
|
26
29
|
export declare function parseSvg(markup: string): SvgNode | null;
|
package/dist/parse-svg.js
CHANGED
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
* missing shape rather than a wrong one. An icon with a `<style>` block or a CSS class would need
|
|
13
13
|
* a real parser, and no set in ng-icons ships one.
|
|
14
14
|
*/
|
|
15
|
+
/** The elements whose characters are drawn. Between any others they are indentation. */
|
|
16
|
+
const TEXT_CONTAINERS = new Set(['text', 'tspan']);
|
|
17
|
+
const ENTITIES = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'" };
|
|
18
|
+
/** Characters as SVG draws them by default: runs of white space as one space, entities read. */
|
|
19
|
+
const characters = (raw) => raw.replace(/\s+/g, ' ').replace(/&(amp|lt|gt|quot|apos);/g, (_, name) => ENTITIES[name]);
|
|
15
20
|
/** `<tag`, `/>`, `</tag>` and the attribute soup between them. */
|
|
16
21
|
const TAG = /<\s*(\/)?\s*([a-zA-Z][\w:-]*)((?:[^>"']|"[^"]*"|'[^']*')*)(\/)?>/g;
|
|
17
22
|
const ATTRIBUTE = /([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
|
|
@@ -29,8 +34,9 @@ function attributesOf(source) {
|
|
|
29
34
|
/**
|
|
30
35
|
* The root element, or null when there is nothing renderable.
|
|
31
36
|
*
|
|
32
|
-
* Only elements are kept
|
|
33
|
-
* screen reader on the web would read, which
|
|
37
|
+
* Only elements are kept, and the characters inside a `text` or a `tspan`: an icon's other text
|
|
38
|
+
* nodes are whitespace, and a `<title>` is a label a screen reader on the web would read, which
|
|
39
|
+
* here is `accessibilityLabel` on the host.
|
|
34
40
|
*/
|
|
35
41
|
export function parseSvg(markup) {
|
|
36
42
|
const source = markup.replace(IGNORED, '');
|
|
@@ -38,8 +44,15 @@ export function parseSvg(markup) {
|
|
|
38
44
|
let root = null;
|
|
39
45
|
TAG.lastIndex = 0;
|
|
40
46
|
let match;
|
|
47
|
+
let from = 0;
|
|
41
48
|
while ((match = TAG.exec(source)) !== null) {
|
|
42
49
|
const [, closing, tag, attributes, selfClosing] = match;
|
|
50
|
+
const parent = stack[stack.length - 1];
|
|
51
|
+
const text = characters(source.slice(from, match.index));
|
|
52
|
+
from = TAG.lastIndex;
|
|
53
|
+
if (parent && TEXT_CONTAINERS.has(parent.tag) && text.trim()) {
|
|
54
|
+
parent.children.push({ tag: '#text', attrs: {}, children: [], text });
|
|
55
|
+
}
|
|
43
56
|
if (closing) {
|
|
44
57
|
stack.pop();
|
|
45
58
|
continue;
|
package/dist/parse-svg.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parse-svg.js","sourceRoot":"","sources":["../src/parse-svg.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;
|
|
1
|
+
{"version":3,"file":"parse-svg.js","sourceRoot":"","sources":["../src/parse-svg.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * SVG markup to a tree, for the one kind of SVG an icon set ships.\n *\n * This is not a general XML parser and does not want to be. An icon is a build-time constant from\n * a package like `@ng-icons/heroicons`: no namespaces to resolve, no entities, no CDATA, no\n * external references, and across heroicons, lucide and bootstrap-icons - some five thousand\n * icons - the entire tag surface is `svg`, `path`, `circle`, `rect`, `line`, `ellipse`,\n * `polyline`, `polygon` and `g`.\n *\n * ponytail: a scanner rather than a parser. It ignores anything it does not recognise, which for\n * a trusted constant is the right trade; the failure mode for markup outside that surface is a\n * missing shape rather than a wrong one. An icon with a `<style>` block or a CSS class would need\n * a real parser, and no set in ng-icons ships one.\n */\n\nexport interface SvgNode {\n readonly tag: string;\n readonly attrs: Readonly<Record<string, string>>;\n readonly children: SvgNode[];\n /** The characters of a `#text` node, which only a `text` or a `tspan` has. */\n readonly text?: string;\n}\n\n/** The elements whose characters are drawn. Between any others they are indentation. */\nconst TEXT_CONTAINERS: ReadonlySet<string> = new Set(['text', 'tspan']);\n\nconst ENTITIES: Record<string, string> = { amp: '&', lt: '<', gt: '>', quot: '\"', apos: \"'\" };\n\n/** Characters as SVG draws them by default: runs of white space as one space, entities read. */\nconst characters = (raw: string): string =>\n raw.replace(/\\s+/g, ' ').replace(/&(amp|lt|gt|quot|apos);/g, (_, name) => ENTITIES[name]!);\n\n/** `<tag`, `/>`, `</tag>` and the attribute soup between them. */\nconst TAG = /<\\s*(\\/)?\\s*([a-zA-Z][\\w:-]*)((?:[^>\"']|\"[^\"]*\"|'[^']*')*)(\\/)?>/g;\nconst ATTRIBUTE = /([\\w:-]+)\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)')/g;\n/** Comments and processing instructions, which carry nothing a renderer needs. */\nconst IGNORED = /<!--[\\s\\S]*?-->|<\\?[\\s\\S]*?\\?>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>/g;\n\nfunction attributesOf(source: string): Record<string, string> {\n const attrs: Record<string, string> = {};\n ATTRIBUTE.lastIndex = 0;\n let match: RegExpExecArray | null;\n while ((match = ATTRIBUTE.exec(source)) !== null) {\n attrs[match[1]!] = match[2] ?? match[3] ?? '';\n }\n return attrs;\n}\n\n/**\n * The root element, or null when there is nothing renderable.\n *\n * Only elements are kept, and the characters inside a `text` or a `tspan`: an icon's other text\n * nodes are whitespace, and a `<title>` is a label a screen reader on the web would read, which\n * here is `accessibilityLabel` on the host.\n */\nexport function parseSvg(markup: string): SvgNode | null {\n const source = markup.replace(IGNORED, '');\n const stack: SvgNode[] = [];\n let root: SvgNode | null = null;\n\n TAG.lastIndex = 0;\n let match: RegExpExecArray | null;\n let from = 0;\n while ((match = TAG.exec(source)) !== null) {\n const [, closing, tag, attributes, selfClosing] = match;\n const parent = stack[stack.length - 1];\n const text = characters(source.slice(from, match.index));\n from = TAG.lastIndex;\n if (parent && TEXT_CONTAINERS.has(parent.tag) && text.trim()) {\n parent.children.push({ tag: '#text', attrs: {}, children: [], text });\n }\n\n if (closing) {\n stack.pop();\n continue;\n }\n\n const node: SvgNode = { tag: tag!, attrs: attributesOf(attributes ?? ''), children: [] };\n stack[stack.length - 1]?.children.push(node);\n root ??= node;\n // The attribute run is greedy and swallows the `/` of `<path/>`, so the closing slash is\n // recognised at either end of it. Miss this and every sibling nests inside the one before it,\n // which draws the same icon and inherits paint that was never meant for it.\n if (!selfClosing && !/\\/\\s*$/.test(attributes ?? '')) stack.push(node);\n }\n\n return root;\n}\n"]}
|
package/dist/svg-elements.js
CHANGED
|
@@ -25,6 +25,11 @@ const SVG_VIEW_NAMES = {
|
|
|
25
25
|
'svg-ellipse': 'RNSVGEllipse',
|
|
26
26
|
'svg-rect': 'RNSVGRect',
|
|
27
27
|
'svg-line': 'RNSVGLine',
|
|
28
|
+
'svg-defs': 'RNSVGDefs',
|
|
29
|
+
'svg-linear-gradient': 'RNSVGLinearGradient',
|
|
30
|
+
'svg-radial-gradient': 'RNSVGRadialGradient',
|
|
31
|
+
'svg-text': 'RNSVGText',
|
|
32
|
+
'svg-tspan': 'RNSVGTSpan',
|
|
28
33
|
};
|
|
29
34
|
let registered = false;
|
|
30
35
|
/**
|
package/dist/svg-elements.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg-elements.js","sourceRoot":"","sources":["../src/svg-elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErE;;;;;;;;GAQG;AACH,MAAM,cAAc,GAA2B;IAC7C,OAAO,EAAE,YAAY;IACrB,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,aAAa;IAC3B,aAAa,EAAE,cAAc;IAC7B,UAAU,EAAE,WAAW;IACvB,UAAU,EAAE,WAAW;
|
|
1
|
+
{"version":3,"file":"svg-elements.js","sourceRoot":"","sources":["../src/svg-elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErE;;;;;;;;GAQG;AACH,MAAM,cAAc,GAA2B;IAC7C,OAAO,EAAE,YAAY;IACrB,UAAU,EAAE,WAAW;IACvB,YAAY,EAAE,aAAa;IAC3B,aAAa,EAAE,cAAc;IAC7B,UAAU,EAAE,WAAW;IACvB,UAAU,EAAE,WAAW;IACvB,UAAU,EAAE,WAAW;IACvB,qBAAqB,EAAE,qBAAqB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,UAAU,EAAE,WAAW;IACvB,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,IAAI,UAAU,GAAG,KAAK,CAAC;AAEvB;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB;IACnC,IAAI,UAAU;QAAE,OAAO;IACvB,UAAU,GAAG,IAAI,CAAC;IAClB,gBAAgB,CACd,SAAS,EACT,cAAc,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,cAAc,CACxE,CAAC;IACF,KAAK,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;QACjE,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACtC,CAAC;AACH,CAAC","sourcesContent":["/**\n * react-native-svg, driven directly.\n *\n * The same arrangement as react-native-screens in the router: the native side is a set of\n * codegen'd Fabric components, and their React wrappers are unreachable, so the engine is taught\n * the element names and the shapes are created with `createElement`. The app installs\n * `react-native-svg` for the native half; none of its JavaScript is imported.\n *\n * No decorators here: tests import this at runtime.\n */\nimport { nativePlatform, registerViewName } from '@ng-native/fabric';\n\n/**\n * Element name -> Fabric component. Lowercase, because the compiler drops a template with a\n * capitalized element name, and prefixed, because `path` and\n * `line` are words an app might reasonably want for a component of its own.\n *\n * The root is the one that differs per platform: iOS draws into `RNSVGSvgView`, Android into\n * `RNSVGSvgViewAndroid`, and react-native-svg keeps them as separate specs because their props\n * are not the same.\n */\nconst SVG_VIEW_NAMES: Record<string, string> = {\n 'svg-g': 'RNSVGGroup',\n 'svg-path': 'RNSVGPath',\n 'svg-circle': 'RNSVGCircle',\n 'svg-ellipse': 'RNSVGEllipse',\n 'svg-rect': 'RNSVGRect',\n 'svg-line': 'RNSVGLine',\n 'svg-defs': 'RNSVGDefs',\n 'svg-linear-gradient': 'RNSVGLinearGradient',\n 'svg-radial-gradient': 'RNSVGRadialGradient',\n 'svg-text': 'RNSVGText',\n 'svg-tspan': 'RNSVGTSpan',\n};\n\nlet registered = false;\n\n/**\n * Teach the engine the shape elements and `ng-icon`, `NgIcon`'s own host, as the root. Called by\n * `NgIcon`, so importing it is the whole setup - the same lesson as `AnimatedStyle`, which stopped\n * needing a bootstrap provider for the same reason.\n *\n * A name the native side does not know renders as `UnimplementedNativeView` rather than erroring,\n * so an app that has not installed `react-native-svg` sees blank boxes where its icons were.\n */\nexport function registerSvgComponents(): void {\n if (registered) return;\n registered = true;\n registerViewName(\n 'ng-icon',\n nativePlatform() === 'android' ? 'RNSVGSvgViewAndroid' : 'RNSVGSvgView',\n );\n for (const [element, viewName] of Object.entries(SVG_VIEW_NAMES)) {\n registerViewName(element, viewName);\n }\n}\n"]}
|
package/dist/svg-props.d.ts
CHANGED
|
@@ -31,6 +31,8 @@ export declare function own<T>(table: Readonly<Record<string, T>>, key: string):
|
|
|
31
31
|
* no component for either and converts their points to a `d`, so this does too.
|
|
32
32
|
*/
|
|
33
33
|
export declare const SVG_ELEMENTS: Record<string, string>;
|
|
34
|
+
/** The tags that are no view and are not missed: a label, and what a gradient reads itself. */
|
|
35
|
+
export declare const UNDRAWN: ReadonlySet<string>;
|
|
34
36
|
/** The presentation attributes that are a paint. */
|
|
35
37
|
export declare const PAINT: ReadonlySet<string>;
|
|
36
38
|
/** Whether a paint is a `var()`, which only the cascade can settle. */
|
|
@@ -40,6 +42,32 @@ export interface SvgContext {
|
|
|
40
42
|
color(value: string): unknown;
|
|
41
43
|
}
|
|
42
44
|
export declare function brushOf(value: string, context: SvgContext): Brush;
|
|
45
|
+
export declare const isGradient: (tag: string) => boolean;
|
|
46
|
+
/**
|
|
47
|
+
* A gradient's native props: its name, where it runs, and its stops.
|
|
48
|
+
*
|
|
49
|
+
* A `<stop>` is not a view. react-native-svg reads the stops in JavaScript and hands the gradient
|
|
50
|
+
* one flat list, `[offset, colour, offset, colour]`, in offset order, each colour a single number
|
|
51
|
+
* with the stop's opacity in its alpha. `currentColor` is the colour passed in: native has no
|
|
52
|
+
* brush for it inside a gradient, so it is settled here.
|
|
53
|
+
*/
|
|
54
|
+
export declare function gradientProps(node: {
|
|
55
|
+
tag: string;
|
|
56
|
+
attrs: Readonly<Record<string, string>>;
|
|
57
|
+
children: readonly SvgNodeLike[];
|
|
58
|
+
}, context: SvgContext, currentColor?: string): Record<string, unknown>;
|
|
59
|
+
interface SvgNodeLike {
|
|
60
|
+
readonly tag: string;
|
|
61
|
+
readonly attrs: Readonly<Record<string, string>>;
|
|
62
|
+
}
|
|
63
|
+
/** The stop colour of a stop, from its attribute or its `style`. */
|
|
64
|
+
export declare const stopColor: (attrs: Readonly<Record<string, string>>) => string;
|
|
65
|
+
/**
|
|
66
|
+
* What a `text` or a `tspan` takes beside its paint: its font as one object, and each of its
|
|
67
|
+
* positions as a list, since SVG places a glyph at a time. The first family of a `font-family` is
|
|
68
|
+
* the one asked for, as react-native-svg reads it.
|
|
69
|
+
*/
|
|
70
|
+
export declare function textProps(attrs: Readonly<Record<string, string>>): Record<string, unknown>;
|
|
43
71
|
/** `M x,y L x,y ...`, which is what a polyline or polygon is once native sees it. */
|
|
44
72
|
export declare function pointsToPath(points: string, close: boolean): string;
|
|
45
73
|
/** `stroke-width:2;opacity:.5` as attributes, with `var(--name, fallback)` resolved. */
|
|
@@ -62,3 +90,4 @@ export declare function transformMatrix(transform: string): number[] | undefined
|
|
|
62
90
|
* paints black instead of the colour its parent carries.
|
|
63
91
|
*/
|
|
64
92
|
export declare function nativeProps(tag: string, attrs: Readonly<Record<string, string>>, context: SvgContext): Record<string, unknown>;
|
|
93
|
+
export {};
|
package/dist/svg-props.js
CHANGED
|
@@ -35,7 +35,16 @@ export const SVG_ELEMENTS = {
|
|
|
35
35
|
line: 'svg-line',
|
|
36
36
|
polyline: 'svg-path',
|
|
37
37
|
polygon: 'svg-path',
|
|
38
|
+
defs: 'svg-defs',
|
|
39
|
+
linearGradient: 'svg-linear-gradient',
|
|
40
|
+
radialGradient: 'svg-radial-gradient',
|
|
41
|
+
text: 'svg-text',
|
|
42
|
+
tspan: 'svg-tspan',
|
|
43
|
+
// The characters of a text: react-native-svg draws them as a span of their own.
|
|
44
|
+
'#text': 'svg-tspan',
|
|
38
45
|
};
|
|
46
|
+
/** The tags that are no view and are not missed: a label, and what a gradient reads itself. */
|
|
47
|
+
export const UNDRAWN = new Set(['title', 'desc', 'stop']);
|
|
39
48
|
/** Geometry, per tag. Everything else on a shape is presentation and shared. */
|
|
40
49
|
const GEOMETRY = {
|
|
41
50
|
path: ['d'],
|
|
@@ -97,6 +106,136 @@ export function brushOf(value, context) {
|
|
|
97
106
|
return { type: 1, brushRef: reference[1] };
|
|
98
107
|
return { type: 0, payload: context.color(value) };
|
|
99
108
|
}
|
|
109
|
+
const GRADIENT_UNITS = { objectBoundingBox: 0, userSpaceOnUse: 1 };
|
|
110
|
+
/** Where a gradient runs when the markup does not say, as react-native-svg's components default. */
|
|
111
|
+
const GRADIENT_LINE = {
|
|
112
|
+
linearGradient: { x1: '0%', y1: '0%', x2: '100%', y2: '0%' },
|
|
113
|
+
radialGradient: { cx: '50%', cy: '50%' },
|
|
114
|
+
};
|
|
115
|
+
export const isGradient = (tag) => Object.hasOwn(GRADIENT_LINE, tag);
|
|
116
|
+
/**
|
|
117
|
+
* A gradient's native props: its name, where it runs, and its stops.
|
|
118
|
+
*
|
|
119
|
+
* A `<stop>` is not a view. react-native-svg reads the stops in JavaScript and hands the gradient
|
|
120
|
+
* one flat list, `[offset, colour, offset, colour]`, in offset order, each colour a single number
|
|
121
|
+
* with the stop's opacity in its alpha. `currentColor` is the colour passed in: native has no
|
|
122
|
+
* brush for it inside a gradient, so it is settled here.
|
|
123
|
+
*/
|
|
124
|
+
export function gradientProps(node, context, currentColor) {
|
|
125
|
+
const { attrs } = node;
|
|
126
|
+
const stops = node.children
|
|
127
|
+
.filter((child) => child.tag === 'stop')
|
|
128
|
+
.map((stop) => stopOf(stop.attrs, context, currentColor))
|
|
129
|
+
.filter((stop) => stop !== null)
|
|
130
|
+
.sort((a, b) => a[0] - b[0]);
|
|
131
|
+
return {
|
|
132
|
+
name: attrs['id'],
|
|
133
|
+
...gradientLine(node.tag, attrs),
|
|
134
|
+
gradient: stops.flat(),
|
|
135
|
+
gradientUnits: own(GRADIENT_UNITS, attrs['gradientUnits'] ?? '') ?? 0,
|
|
136
|
+
gradientTransform: transformMatrix(attrs['gradientTransform'] ?? '') ?? null,
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
/** Where a gradient runs: what the markup set, over what react-native-svg defaults. */
|
|
140
|
+
function gradientLine(tag, attrs) {
|
|
141
|
+
const line = { ...own(GRADIENT_LINE, tag) };
|
|
142
|
+
for (const name of Object.keys(line))
|
|
143
|
+
line[name] = attrs[name] ?? line[name];
|
|
144
|
+
if (tag !== 'radialGradient')
|
|
145
|
+
return line;
|
|
146
|
+
const radius = attrs['r'] ?? '50%';
|
|
147
|
+
return {
|
|
148
|
+
...line,
|
|
149
|
+
rx: attrs['rx'] ?? radius,
|
|
150
|
+
ry: attrs['ry'] ?? radius,
|
|
151
|
+
fx: attrs['fx'] ?? line['cx'],
|
|
152
|
+
fy: attrs['fy'] ?? line['cy'],
|
|
153
|
+
};
|
|
154
|
+
}
|
|
155
|
+
/** The stop colour of a stop, from its attribute or its `style`. */
|
|
156
|
+
export const stopColor = (attrs) => /(?:^|;)\s*stop-color\s*:\s*([^;]+)/.exec(attrs['style'] ?? '')?.[1]?.trim() ??
|
|
157
|
+
attrs['stop-color'] ??
|
|
158
|
+
'#000';
|
|
159
|
+
/**
|
|
160
|
+
* One stop as `[offset, colour]`, its attributes read from its `style` where they are there, or
|
|
161
|
+
* null for a colour the host cannot convert, such as a `var()`: native takes a list of numbers,
|
|
162
|
+
* and one that is not there would be worse than a stop left out.
|
|
163
|
+
*/
|
|
164
|
+
function stopOf(attrs, context, currentColor) {
|
|
165
|
+
const all = { ...attrs, ...styleAttributes(attrs['style'] ?? '', {}) };
|
|
166
|
+
const written = stopColor(attrs);
|
|
167
|
+
const colour = context.color(written === 'currentColor' ? (currentColor ?? '#000') : written);
|
|
168
|
+
if (colour === null || colour === undefined)
|
|
169
|
+
return null;
|
|
170
|
+
return [fraction(all['offset'], 0), withOpacity(colour, fraction(all['stop-opacity'], 1))];
|
|
171
|
+
}
|
|
172
|
+
/** A number or a percentage as a fraction, or the fallback for one that is neither. */
|
|
173
|
+
function fraction(value, fallback) {
|
|
174
|
+
const number = Number.parseFloat(value ?? '');
|
|
175
|
+
if (Number.isNaN(number))
|
|
176
|
+
return fallback;
|
|
177
|
+
return value.trim().endsWith('%') ? number / 100 : number;
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* A processed colour at a fraction of its own opacity: a device's is one number, AARRGGBB, and
|
|
181
|
+
* the web host's is the CSS colour it was given, which a mix with nothing fades the same way.
|
|
182
|
+
*/
|
|
183
|
+
function withOpacity(colour, fraction) {
|
|
184
|
+
const opacity = Math.min(1, Math.max(0, fraction));
|
|
185
|
+
if (typeof colour !== 'number') {
|
|
186
|
+
return opacity === 1 ? colour : `color-mix(in srgb, ${colour} ${opacity * 100}%, transparent)`;
|
|
187
|
+
}
|
|
188
|
+
const alpha = Math.round((colour >>> 24) * opacity);
|
|
189
|
+
return (colour & 0x00ffffff) | (alpha << 24);
|
|
190
|
+
}
|
|
191
|
+
/** SVG attribute -> key of the `font` object react-native-svg's text views read. */
|
|
192
|
+
const FONT = {
|
|
193
|
+
'font-size': 'fontSize',
|
|
194
|
+
'font-weight': 'fontWeight',
|
|
195
|
+
'font-style': 'fontStyle',
|
|
196
|
+
'font-family': 'fontFamily',
|
|
197
|
+
'font-variant': 'fontVariant',
|
|
198
|
+
'font-stretch': 'fontStretch',
|
|
199
|
+
'text-anchor': 'textAnchor',
|
|
200
|
+
'text-decoration': 'textDecoration',
|
|
201
|
+
'letter-spacing': 'letterSpacing',
|
|
202
|
+
'word-spacing': 'wordSpacing',
|
|
203
|
+
kerning: 'kerning',
|
|
204
|
+
};
|
|
205
|
+
const lengthList = (value) => value === undefined
|
|
206
|
+
? []
|
|
207
|
+
: value
|
|
208
|
+
.trim()
|
|
209
|
+
.split(/[\s,]+/)
|
|
210
|
+
.filter(Boolean);
|
|
211
|
+
/**
|
|
212
|
+
* What a `text` or a `tspan` takes beside its paint: its font as one object, and each of its
|
|
213
|
+
* positions as a list, since SVG places a glyph at a time. The first family of a `font-family` is
|
|
214
|
+
* the one asked for, as react-native-svg reads it.
|
|
215
|
+
*/
|
|
216
|
+
export function textProps(attrs) {
|
|
217
|
+
const font = {};
|
|
218
|
+
for (const [name, value] of Object.entries(attrs)) {
|
|
219
|
+
const key = own(FONT, name);
|
|
220
|
+
if (!key)
|
|
221
|
+
continue;
|
|
222
|
+
font[key] =
|
|
223
|
+
key === 'fontFamily'
|
|
224
|
+
? value
|
|
225
|
+
.split(',')[0]
|
|
226
|
+
.trim()
|
|
227
|
+
.replace(/^["']|["']$/g, '')
|
|
228
|
+
: value;
|
|
229
|
+
}
|
|
230
|
+
return {
|
|
231
|
+
x: lengthList(attrs['x']),
|
|
232
|
+
y: lengthList(attrs['y']),
|
|
233
|
+
dx: lengthList(attrs['dx']),
|
|
234
|
+
dy: lengthList(attrs['dy']),
|
|
235
|
+
rotate: lengthList(attrs['rotate']),
|
|
236
|
+
font,
|
|
237
|
+
};
|
|
238
|
+
}
|
|
100
239
|
/** `M x,y L x,y ...`, which is what a polyline or polygon is once native sees it. */
|
|
101
240
|
export function pointsToPath(points, close) {
|
|
102
241
|
const numbers = points
|
package/dist/svg-props.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg-props.js","sourceRoot":"","sources":["../src/svg-props.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * SVG attributes to the props react-native-svg's native views actually take.\n *\n * They are not the same thing, and the difference is the whole reason this file exists. `fill`\n * and `stroke` are not colours but *brushes*, a tagged struct that says whether the paint is a\n * colour, the view's own `color`, or a reference to a gradient. `stroke-linecap`, `stroke-linejoin`\n * and `fill-rule` are integers, not the keywords they are written as. And a shape has to declare\n * which props it set - `propList` - because anything absent is inherited from the group above it,\n * which is exactly how an icon whose root carries `stroke=\"currentColor\"` paints its paths.\n *\n * Send the attributes through unchanged and every one of those reads as nothing at all, with no\n * error: the shape draws in the default black, or does not draw.\n *\n * All of this is what react-native-svg does in JavaScript before its props reach native. Its\n * components are React, so this is the same translation rather than a call into it.\n */\n\n/** The paint on a shape: a colour, the view's own colour, or a reference to a gradient. */\nexport type Brush =\n | null\n | { readonly type: 0; readonly payload: unknown }\n | { readonly type: 1; readonly brushRef: string }\n | { readonly type: 2 };\n\nconst LINECAP: Record<string, number> = { butt: 0, round: 1, square: 2 };\nconst LINEJOIN: Record<string, number> = { miter: 0, round: 1, bevel: 2 };\nconst FILL_RULE: Record<string, number> = { evenodd: 0, nonzero: 1 };\n\nconst URL_REFERENCE = /^url\\(#(.+)\\)$/;\n\n/** `table[key]`, but never off `Object.prototype`: a tag or attribute named `constructor` is unknown. */\nexport function own<T>(table: Readonly<Record<string, T>>, key: string): T | undefined {\n return Object.hasOwn(table, key) ? table[key] : undefined;\n}\n\n/**\n * Which element each SVG tag commits as. `polyline` and `polygon` are paths: react-native-svg has\n * no component for either and converts their points to a `d`, so this does too.\n */\nexport const SVG_ELEMENTS: Record<string, string> = {\n g: 'svg-g',\n path: 'svg-path',\n circle: 'svg-circle',\n ellipse: 'svg-ellipse',\n rect: 'svg-rect',\n line: 'svg-line',\n polyline: 'svg-path',\n polygon: 'svg-path',\n};\n\n/** Geometry, per tag. Everything else on a shape is presentation and shared. */\nconst GEOMETRY: Record<string, readonly string[]> = {\n path: ['d'],\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n rect: ['x', 'y', 'width', 'height', 'rx', 'ry'],\n line: ['x1', 'y1', 'x2', 'y2'],\n};\n\n/** A shape's geometry, as written, and 0 for what react-native-svg defaults and it left out. */\nfunction geometry(\n tag: string,\n attrs: Readonly<Record<string, string>>,\n props: Record<string, unknown>,\n): void {\n for (const name of own(GEOMETRY, tag) ?? []) {\n if (attrs[name] !== undefined) props[name] = attrs[name];\n }\n for (const name of own(ZERO_BY_DEFAULT, tag) ?? []) props[name] ??= 0;\n}\n\n/**\n * The geometry each shape defaults to 0 when absent, as react-native-svg's `Rect`, `Circle`,\n * `Ellipse` and `Line` do before they commit. Android's shape views read a missing length as null\n * and crash drawing it, and design tools often leave out a `y=\"0\"`.\n */\nconst ZERO_BY_DEFAULT: Record<string, readonly string[]> = {\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n rect: ['x', 'y', 'width', 'height'],\n line: ['x1', 'y1', 'x2', 'y2'],\n};\n\n/** SVG attribute -> native prop, for the presentation attributes shapes and groups share. */\nconst PRESENTATION: Record<string, string> = {\n fill: 'fill',\n 'fill-opacity': 'fillOpacity',\n 'fill-rule': 'fillRule',\n stroke: 'stroke',\n 'stroke-opacity': 'strokeOpacity',\n 'stroke-width': 'strokeWidth',\n 'stroke-linecap': 'strokeLinecap',\n 'stroke-linejoin': 'strokeLinejoin',\n 'stroke-dasharray': 'strokeDasharray',\n 'stroke-dashoffset': 'strokeDashoffset',\n 'stroke-miterlimit': 'strokeMiterlimit',\n 'clip-rule': 'clipRule',\n opacity: 'opacity',\n};\n\n/** The presentation attributes that are a paint. */\nexport const PAINT: ReadonlySet<string> = new Set(['fill', 'stroke']);\n\n/** Whether a paint is a `var()`, which only the cascade can settle. */\nexport const isTokenPaint = (value: string | undefined): value is string =>\n value !== undefined && /^\\s*var\\(/i.test(value);\n\nexport interface SvgContext {\n /** The host's colour conversion, which a brush payload is the result of. */\n color(value: string): unknown;\n}\n\nexport function brushOf(value: string, context: SvgContext): Brush {\n if (value === 'none') return null;\n // Deliberately kept as a brush rather than resolved here: native paints it from the view's own\n // `color`, so a bound `[color]` on the icon changes every `currentColor` shape without a\n // re-parse.\n if (value === 'currentColor') return { type: 2 };\n const reference = URL_REFERENCE.exec(value);\n if (reference) return { type: 1, brushRef: reference[1]! };\n return { type: 0, payload: context.color(value) };\n}\n\n/** `M x,y L x,y ...`, which is what a polyline or polygon is once native sees it. */\nexport function pointsToPath(points: string, close: boolean): string {\n const numbers = points\n .trim()\n .split(/[\\s,]+/)\n .filter(Boolean);\n let path = '';\n for (let index = 0; index + 1 < numbers.length; index += 2) {\n path += `${index === 0 ? 'M' : 'L'}${numbers[index]},${numbers[index + 1]}`;\n }\n return close && path ? `${path}Z` : path;\n}\n\n/** `stroke-width:2;opacity:.5` as attributes, with `var(--name, fallback)` resolved. */\nexport function styleAttributes(\n style: string,\n variables: Readonly<Record<string, string | number | undefined>>,\n): Record<string, string> {\n const attrs: Record<string, string> = {};\n for (const declaration of style.split(';')) {\n const colon = declaration.indexOf(':');\n if (colon === -1) continue;\n const name = declaration.slice(0, colon).trim();\n const value = declaration.slice(colon + 1).trim();\n // A paint's `var()` is kept as written: the cascade settles it, with the tokens in scope.\n const resolved = resolveVar(value, variables) ?? (PAINT.has(name) ? value : undefined);\n if (name && resolved !== undefined) attrs[name] = resolved;\n }\n return attrs;\n}\n\nfunction resolveVar(\n value: string,\n variables: Readonly<Record<string, string | number | undefined>>,\n): string | undefined {\n const match = /^var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*([^)]*))?\\)$/.exec(value);\n if (!match) return value;\n const supplied = variables[match[1]!];\n if (supplied !== undefined) return String(supplied);\n return match[2]?.trim() || undefined;\n}\n\n/** The four numbers of a `viewBox`, as the props the svg view takes them as. */\nexport function viewBoxProps(viewBox: string | undefined): Record<string, unknown> {\n if (!viewBox) return {};\n const parts = viewBox.trim().replace(/,/g, ' ').split(/\\s+/).map(Number);\n if (parts.length !== 4 || parts.some(Number.isNaN)) return {};\n const [minX, minY, vbWidth, vbHeight] = parts;\n return { minX, minY, vbWidth, vbHeight, align: 'xMidYMid', meetOrSlice: 0 };\n}\n\nconst TRANSFORM = /([a-zA-Z]+)\\s*\\(([^)]*)\\)/g;\n\n/**\n * A `transform` attribute as a 2x3 matrix, which is the only form native takes.\n *\n * Rare in icon sets - one occurrence across bootstrap-icons and lucide, and that one is already a\n * `matrix()` - but a shape drawn in the wrong place is worse than one not drawn, so the other\n * three forms compose rather than being ignored.\n */\nexport function transformMatrix(transform: string): number[] | undefined {\n let matrix: number[] | undefined;\n TRANSFORM.lastIndex = 0;\n let match: RegExpExecArray | null;\n while ((match = TRANSFORM.exec(transform)) !== null) {\n const values = match[2]!\n .trim()\n .split(/[\\s,]+/)\n .map(Number);\n const next = matrixFor(match[1]!, values);\n if (next) matrix = matrix ? multiply(matrix, next) : next;\n }\n return matrix;\n}\n\n/** `translate(4)` and `scale(2)` mean something for the missing argument; `rotate(90)` means 0. */\nconst at = (values: number[], index: number, fallback: number) => values[index] ?? fallback;\n\nfunction matrixFor(name: string, values: number[]): number[] | undefined {\n const first = at(values, 0, 0);\n if (name === 'matrix') return values.length === 6 ? values : undefined;\n if (name === 'translate') return [1, 0, 0, 1, first, at(values, 1, 0)];\n if (name === 'scale') return [first, 0, 0, at(values, 1, first), 0, 0];\n if (name === 'rotate') return rotation(first, at(values, 1, 0), at(values, 2, 0));\n return undefined;\n}\n\nfunction rotation(degrees: number, cx: number, cy: number): number[] {\n const radians = (degrees * Math.PI) / 180;\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n // Rotating about a point is the rotation with the point moved to the origin and back.\n return [cos, sin, -sin, cos, cx - cos * cx + sin * cy, cy - sin * cx - cos * cy];\n}\n\n/** `[a, b, c, d, tx, ty]`, in SVG's own order. */\nfunction multiply(left: number[], right: number[]): number[] {\n const [a1, b1, c1, d1, e1, f1] = left as [number, number, number, number, number, number];\n const [a2, b2, c2, d2, e2, f2] = right as [number, number, number, number, number, number];\n return [\n a1 * a2 + c1 * b2,\n b1 * a2 + d1 * b2,\n a1 * c2 + c1 * d2,\n b1 * c2 + d1 * d2,\n a1 * e2 + c1 * f2 + e1,\n b1 * e2 + d1 * f2 + f1,\n ];\n}\n\n/**\n * One element's native props.\n *\n * `propList` is the load-bearing part: it names the props this element set itself, and native\n * inherits everything else from the group above. Omit it and a path with no `fill` of its own\n * paints black instead of the colour its parent carries.\n */\nexport function nativeProps(\n tag: string,\n attrs: Readonly<Record<string, string>>,\n context: SvgContext,\n): Record<string, unknown> {\n const props: Record<string, unknown> = {};\n const propList: string[] = [];\n\n for (const [name, value] of Object.entries(attrs)) {\n const prop = own(PRESENTATION, name);\n if (!prop) continue;\n props[prop] = presentationValue(prop, value, context);\n propList.push(prop);\n }\n if (propList.length > 0) props['propList'] = propList;\n\n geometry(tag, attrs, props);\n if (tag === 'polyline' || tag === 'polygon') {\n props['d'] = pointsToPath(attrs['points'] ?? '', tag === 'polygon');\n }\n if (attrs['transform']) {\n const matrix = transformMatrix(attrs['transform']);\n if (matrix) props['matrix'] = matrix;\n }\n return props;\n}\n\n/**\n * The props react-native-svg's Android view manager declares as `float` rather than `Dynamic`,\n * with the default it applies when the prop is absent.\n *\n * `Dynamic` reads whatever arrives, so an SVG attribute can stay the string it was written as -\n * which is what `strokeWidth` and every geometry attribute do. These five cannot: the Android\n * manager takes a `float` parameter, and a string reaching one throws `java.lang.String cannot be\n * cast to java.lang.Double` out of `setProperty` while the view is being created, which takes the\n * whole screen down. iOS never noticed, because folly's `dynamic` coerces a numeric string on the\n * way into a `Float` prop. react-native-svg's own JavaScript sends numbers here too, through\n * `extractOpacity`, so this is the same translation and not an Android workaround.\n */\nconst NUMERIC: Record<string, number> = {\n opacity: 1,\n fillOpacity: 1,\n strokeOpacity: 1,\n strokeDashoffset: 0,\n strokeMiterlimit: 4,\n};\n\nfunction presentationValue(prop: string, value: string, context: SvgContext): unknown {\n if (prop === 'fill' || prop === 'stroke') return brushOf(value, context);\n if (prop === 'strokeLinecap') return own(LINECAP, value) ?? 0;\n if (prop === 'strokeLinejoin') return own(LINEJOIN, value) ?? 0;\n if (prop === 'fillRule' || prop === 'clipRule') return own(FILL_RULE, value) ?? 1;\n if (prop === 'strokeDasharray')\n return value\n .trim()\n .split(/[\\s,]+/)\n .filter(Boolean);\n return prop in NUMERIC ? numberFor(prop, value) : value;\n}\n\n/** The attribute as the float Android's view manager takes, or the default it applies. */\nfunction numberFor(prop: string, value: string): number {\n const number = Number.parseFloat(value);\n return Number.isNaN(number) ? NUMERIC[prop]! : number;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"svg-props.js","sourceRoot":"","sources":["../src/svg-props.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * SVG attributes to the props react-native-svg's native views actually take.\n *\n * They are not the same thing, and the difference is the whole reason this file exists. `fill`\n * and `stroke` are not colours but *brushes*, a tagged struct that says whether the paint is a\n * colour, the view's own `color`, or a reference to a gradient. `stroke-linecap`, `stroke-linejoin`\n * and `fill-rule` are integers, not the keywords they are written as. And a shape has to declare\n * which props it set - `propList` - because anything absent is inherited from the group above it,\n * which is exactly how an icon whose root carries `stroke=\"currentColor\"` paints its paths.\n *\n * Send the attributes through unchanged and every one of those reads as nothing at all, with no\n * error: the shape draws in the default black, or does not draw.\n *\n * All of this is what react-native-svg does in JavaScript before its props reach native. Its\n * components are React, so this is the same translation rather than a call into it.\n */\n\n/** The paint on a shape: a colour, the view's own colour, or a reference to a gradient. */\nexport type Brush =\n | null\n | { readonly type: 0; readonly payload: unknown }\n | { readonly type: 1; readonly brushRef: string }\n | { readonly type: 2 };\n\nconst LINECAP: Record<string, number> = { butt: 0, round: 1, square: 2 };\nconst LINEJOIN: Record<string, number> = { miter: 0, round: 1, bevel: 2 };\nconst FILL_RULE: Record<string, number> = { evenodd: 0, nonzero: 1 };\n\nconst URL_REFERENCE = /^url\\(#(.+)\\)$/;\n\n/** `table[key]`, but never off `Object.prototype`: a tag or attribute named `constructor` is unknown. */\nexport function own<T>(table: Readonly<Record<string, T>>, key: string): T | undefined {\n return Object.hasOwn(table, key) ? table[key] : undefined;\n}\n\n/**\n * Which element each SVG tag commits as. `polyline` and `polygon` are paths: react-native-svg has\n * no component for either and converts their points to a `d`, so this does too.\n */\nexport const SVG_ELEMENTS: Record<string, string> = {\n g: 'svg-g',\n path: 'svg-path',\n circle: 'svg-circle',\n ellipse: 'svg-ellipse',\n rect: 'svg-rect',\n line: 'svg-line',\n polyline: 'svg-path',\n polygon: 'svg-path',\n defs: 'svg-defs',\n linearGradient: 'svg-linear-gradient',\n radialGradient: 'svg-radial-gradient',\n text: 'svg-text',\n tspan: 'svg-tspan',\n // The characters of a text: react-native-svg draws them as a span of their own.\n '#text': 'svg-tspan',\n};\n\n/** The tags that are no view and are not missed: a label, and what a gradient reads itself. */\nexport const UNDRAWN: ReadonlySet<string> = new Set(['title', 'desc', 'stop']);\n\n/** Geometry, per tag. Everything else on a shape is presentation and shared. */\nconst GEOMETRY: Record<string, readonly string[]> = {\n path: ['d'],\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n rect: ['x', 'y', 'width', 'height', 'rx', 'ry'],\n line: ['x1', 'y1', 'x2', 'y2'],\n};\n\n/** A shape's geometry, as written, and 0 for what react-native-svg defaults and it left out. */\nfunction geometry(\n tag: string,\n attrs: Readonly<Record<string, string>>,\n props: Record<string, unknown>,\n): void {\n for (const name of own(GEOMETRY, tag) ?? []) {\n if (attrs[name] !== undefined) props[name] = attrs[name];\n }\n for (const name of own(ZERO_BY_DEFAULT, tag) ?? []) props[name] ??= 0;\n}\n\n/**\n * The geometry each shape defaults to 0 when absent, as react-native-svg's `Rect`, `Circle`,\n * `Ellipse` and `Line` do before they commit. Android's shape views read a missing length as null\n * and crash drawing it, and design tools often leave out a `y=\"0\"`.\n */\nconst ZERO_BY_DEFAULT: Record<string, readonly string[]> = {\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n rect: ['x', 'y', 'width', 'height'],\n line: ['x1', 'y1', 'x2', 'y2'],\n};\n\n/** SVG attribute -> native prop, for the presentation attributes shapes and groups share. */\nconst PRESENTATION: Record<string, string> = {\n fill: 'fill',\n 'fill-opacity': 'fillOpacity',\n 'fill-rule': 'fillRule',\n stroke: 'stroke',\n 'stroke-opacity': 'strokeOpacity',\n 'stroke-width': 'strokeWidth',\n 'stroke-linecap': 'strokeLinecap',\n 'stroke-linejoin': 'strokeLinejoin',\n 'stroke-dasharray': 'strokeDasharray',\n 'stroke-dashoffset': 'strokeDashoffset',\n 'stroke-miterlimit': 'strokeMiterlimit',\n 'clip-rule': 'clipRule',\n opacity: 'opacity',\n};\n\n/** The presentation attributes that are a paint. */\nexport const PAINT: ReadonlySet<string> = new Set(['fill', 'stroke']);\n\n/** Whether a paint is a `var()`, which only the cascade can settle. */\nexport const isTokenPaint = (value: string | undefined): value is string =>\n value !== undefined && /^\\s*var\\(/i.test(value);\n\nexport interface SvgContext {\n /** The host's colour conversion, which a brush payload is the result of. */\n color(value: string): unknown;\n}\n\nexport function brushOf(value: string, context: SvgContext): Brush {\n if (value === 'none') return null;\n // Deliberately kept as a brush rather than resolved here: native paints it from the view's own\n // `color`, so a bound `[color]` on the icon changes every `currentColor` shape without a\n // re-parse.\n if (value === 'currentColor') return { type: 2 };\n const reference = URL_REFERENCE.exec(value);\n if (reference) return { type: 1, brushRef: reference[1]! };\n return { type: 0, payload: context.color(value) };\n}\n\nconst GRADIENT_UNITS: Record<string, number> = { objectBoundingBox: 0, userSpaceOnUse: 1 };\n\n/** Where a gradient runs when the markup does not say, as react-native-svg's components default. */\nconst GRADIENT_LINE: Record<string, Readonly<Record<string, string>>> = {\n linearGradient: { x1: '0%', y1: '0%', x2: '100%', y2: '0%' },\n radialGradient: { cx: '50%', cy: '50%' },\n};\n\nexport const isGradient = (tag: string): boolean => Object.hasOwn(GRADIENT_LINE, tag);\n\n/**\n * A gradient's native props: its name, where it runs, and its stops.\n *\n * A `<stop>` is not a view. react-native-svg reads the stops in JavaScript and hands the gradient\n * one flat list, `[offset, colour, offset, colour]`, in offset order, each colour a single number\n * with the stop's opacity in its alpha. `currentColor` is the colour passed in: native has no\n * brush for it inside a gradient, so it is settled here.\n */\nexport function gradientProps(\n node: { tag: string; attrs: Readonly<Record<string, string>>; children: readonly SvgNodeLike[] },\n context: SvgContext,\n currentColor?: string,\n): Record<string, unknown> {\n const { attrs } = node;\n const stops = node.children\n .filter((child) => child.tag === 'stop')\n .map((stop) => stopOf(stop.attrs, context, currentColor))\n .filter((stop) => stop !== null)\n .sort((a, b) => a[0] - b[0]);\n return {\n name: attrs['id'],\n ...gradientLine(node.tag, attrs),\n gradient: stops.flat(),\n gradientUnits: own(GRADIENT_UNITS, attrs['gradientUnits'] ?? '') ?? 0,\n gradientTransform: transformMatrix(attrs['gradientTransform'] ?? '') ?? null,\n };\n}\n\n/** Where a gradient runs: what the markup set, over what react-native-svg defaults. */\nfunction gradientLine(\n tag: string,\n attrs: Readonly<Record<string, string>>,\n): Record<string, unknown> {\n const line: Record<string, unknown> = { ...own(GRADIENT_LINE, tag) };\n for (const name of Object.keys(line)) line[name] = attrs[name] ?? line[name];\n if (tag !== 'radialGradient') return line;\n const radius = attrs['r'] ?? '50%';\n return {\n ...line,\n rx: attrs['rx'] ?? radius,\n ry: attrs['ry'] ?? radius,\n fx: attrs['fx'] ?? line['cx'],\n fy: attrs['fy'] ?? line['cy'],\n };\n}\n\ninterface SvgNodeLike {\n readonly tag: string;\n readonly attrs: Readonly<Record<string, string>>;\n}\n\n/** The stop colour of a stop, from its attribute or its `style`. */\nexport const stopColor = (attrs: Readonly<Record<string, string>>): string =>\n /(?:^|;)\\s*stop-color\\s*:\\s*([^;]+)/.exec(attrs['style'] ?? '')?.[1]?.trim() ??\n attrs['stop-color'] ??\n '#000';\n\n/**\n * One stop as `[offset, colour]`, its attributes read from its `style` where they are there, or\n * null for a colour the host cannot convert, such as a `var()`: native takes a list of numbers,\n * and one that is not there would be worse than a stop left out.\n */\nfunction stopOf(\n attrs: Readonly<Record<string, string>>,\n context: SvgContext,\n currentColor: string | undefined,\n): [number, unknown] | null {\n const all = { ...attrs, ...styleAttributes(attrs['style'] ?? '', {}) };\n const written = stopColor(attrs);\n const colour = context.color(written === 'currentColor' ? (currentColor ?? '#000') : written);\n if (colour === null || colour === undefined) return null;\n return [fraction(all['offset'], 0), withOpacity(colour, fraction(all['stop-opacity'], 1))];\n}\n\n/** A number or a percentage as a fraction, or the fallback for one that is neither. */\nfunction fraction(value: string | undefined, fallback: number): number {\n const number = Number.parseFloat(value ?? '');\n if (Number.isNaN(number)) return fallback;\n return value!.trim().endsWith('%') ? number / 100 : number;\n}\n\n/**\n * A processed colour at a fraction of its own opacity: a device's is one number, AARRGGBB, and\n * the web host's is the CSS colour it was given, which a mix with nothing fades the same way.\n */\nfunction withOpacity(colour: unknown, fraction: number): unknown {\n const opacity = Math.min(1, Math.max(0, fraction));\n if (typeof colour !== 'number') {\n return opacity === 1 ? colour : `color-mix(in srgb, ${colour} ${opacity * 100}%, transparent)`;\n }\n const alpha = Math.round((colour >>> 24) * opacity);\n return (colour & 0x00ffffff) | (alpha << 24);\n}\n\n/** SVG attribute -> key of the `font` object react-native-svg's text views read. */\nconst FONT: Record<string, string> = {\n 'font-size': 'fontSize',\n 'font-weight': 'fontWeight',\n 'font-style': 'fontStyle',\n 'font-family': 'fontFamily',\n 'font-variant': 'fontVariant',\n 'font-stretch': 'fontStretch',\n 'text-anchor': 'textAnchor',\n 'text-decoration': 'textDecoration',\n 'letter-spacing': 'letterSpacing',\n 'word-spacing': 'wordSpacing',\n kerning: 'kerning',\n};\n\nconst lengthList = (value: string | undefined): string[] =>\n value === undefined\n ? []\n : value\n .trim()\n .split(/[\\s,]+/)\n .filter(Boolean);\n\n/**\n * What a `text` or a `tspan` takes beside its paint: its font as one object, and each of its\n * positions as a list, since SVG places a glyph at a time. The first family of a `font-family` is\n * the one asked for, as react-native-svg reads it.\n */\nexport function textProps(attrs: Readonly<Record<string, string>>): Record<string, unknown> {\n const font: Record<string, string> = {};\n for (const [name, value] of Object.entries(attrs)) {\n const key = own(FONT, name);\n if (!key) continue;\n font[key] =\n key === 'fontFamily'\n ? value\n .split(',')[0]!\n .trim()\n .replace(/^[\"']|[\"']$/g, '')\n : value;\n }\n return {\n x: lengthList(attrs['x']),\n y: lengthList(attrs['y']),\n dx: lengthList(attrs['dx']),\n dy: lengthList(attrs['dy']),\n rotate: lengthList(attrs['rotate']),\n font,\n };\n}\n\n/** `M x,y L x,y ...`, which is what a polyline or polygon is once native sees it. */\nexport function pointsToPath(points: string, close: boolean): string {\n const numbers = points\n .trim()\n .split(/[\\s,]+/)\n .filter(Boolean);\n let path = '';\n for (let index = 0; index + 1 < numbers.length; index += 2) {\n path += `${index === 0 ? 'M' : 'L'}${numbers[index]},${numbers[index + 1]}`;\n }\n return close && path ? `${path}Z` : path;\n}\n\n/** `stroke-width:2;opacity:.5` as attributes, with `var(--name, fallback)` resolved. */\nexport function styleAttributes(\n style: string,\n variables: Readonly<Record<string, string | number | undefined>>,\n): Record<string, string> {\n const attrs: Record<string, string> = {};\n for (const declaration of style.split(';')) {\n const colon = declaration.indexOf(':');\n if (colon === -1) continue;\n const name = declaration.slice(0, colon).trim();\n const value = declaration.slice(colon + 1).trim();\n // A paint's `var()` is kept as written: the cascade settles it, with the tokens in scope.\n const resolved = resolveVar(value, variables) ?? (PAINT.has(name) ? value : undefined);\n if (name && resolved !== undefined) attrs[name] = resolved;\n }\n return attrs;\n}\n\nfunction resolveVar(\n value: string,\n variables: Readonly<Record<string, string | number | undefined>>,\n): string | undefined {\n const match = /^var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*([^)]*))?\\)$/.exec(value);\n if (!match) return value;\n const supplied = variables[match[1]!];\n if (supplied !== undefined) return String(supplied);\n return match[2]?.trim() || undefined;\n}\n\n/** The four numbers of a `viewBox`, as the props the svg view takes them as. */\nexport function viewBoxProps(viewBox: string | undefined): Record<string, unknown> {\n if (!viewBox) return {};\n const parts = viewBox.trim().replace(/,/g, ' ').split(/\\s+/).map(Number);\n if (parts.length !== 4 || parts.some(Number.isNaN)) return {};\n const [minX, minY, vbWidth, vbHeight] = parts;\n return { minX, minY, vbWidth, vbHeight, align: 'xMidYMid', meetOrSlice: 0 };\n}\n\nconst TRANSFORM = /([a-zA-Z]+)\\s*\\(([^)]*)\\)/g;\n\n/**\n * A `transform` attribute as a 2x3 matrix, which is the only form native takes.\n *\n * Rare in icon sets - one occurrence across bootstrap-icons and lucide, and that one is already a\n * `matrix()` - but a shape drawn in the wrong place is worse than one not drawn, so the other\n * three forms compose rather than being ignored.\n */\nexport function transformMatrix(transform: string): number[] | undefined {\n let matrix: number[] | undefined;\n TRANSFORM.lastIndex = 0;\n let match: RegExpExecArray | null;\n while ((match = TRANSFORM.exec(transform)) !== null) {\n const values = match[2]!\n .trim()\n .split(/[\\s,]+/)\n .map(Number);\n const next = matrixFor(match[1]!, values);\n if (next) matrix = matrix ? multiply(matrix, next) : next;\n }\n return matrix;\n}\n\n/** `translate(4)` and `scale(2)` mean something for the missing argument; `rotate(90)` means 0. */\nconst at = (values: number[], index: number, fallback: number) => values[index] ?? fallback;\n\nfunction matrixFor(name: string, values: number[]): number[] | undefined {\n const first = at(values, 0, 0);\n if (name === 'matrix') return values.length === 6 ? values : undefined;\n if (name === 'translate') return [1, 0, 0, 1, first, at(values, 1, 0)];\n if (name === 'scale') return [first, 0, 0, at(values, 1, first), 0, 0];\n if (name === 'rotate') return rotation(first, at(values, 1, 0), at(values, 2, 0));\n return undefined;\n}\n\nfunction rotation(degrees: number, cx: number, cy: number): number[] {\n const radians = (degrees * Math.PI) / 180;\n const cos = Math.cos(radians);\n const sin = Math.sin(radians);\n // Rotating about a point is the rotation with the point moved to the origin and back.\n return [cos, sin, -sin, cos, cx - cos * cx + sin * cy, cy - sin * cx - cos * cy];\n}\n\n/** `[a, b, c, d, tx, ty]`, in SVG's own order. */\nfunction multiply(left: number[], right: number[]): number[] {\n const [a1, b1, c1, d1, e1, f1] = left as [number, number, number, number, number, number];\n const [a2, b2, c2, d2, e2, f2] = right as [number, number, number, number, number, number];\n return [\n a1 * a2 + c1 * b2,\n b1 * a2 + d1 * b2,\n a1 * c2 + c1 * d2,\n b1 * c2 + d1 * d2,\n a1 * e2 + c1 * f2 + e1,\n b1 * e2 + d1 * f2 + f1,\n ];\n}\n\n/**\n * One element's native props.\n *\n * `propList` is the load-bearing part: it names the props this element set itself, and native\n * inherits everything else from the group above. Omit it and a path with no `fill` of its own\n * paints black instead of the colour its parent carries.\n */\nexport function nativeProps(\n tag: string,\n attrs: Readonly<Record<string, string>>,\n context: SvgContext,\n): Record<string, unknown> {\n const props: Record<string, unknown> = {};\n const propList: string[] = [];\n\n for (const [name, value] of Object.entries(attrs)) {\n const prop = own(PRESENTATION, name);\n if (!prop) continue;\n props[prop] = presentationValue(prop, value, context);\n propList.push(prop);\n }\n if (propList.length > 0) props['propList'] = propList;\n\n geometry(tag, attrs, props);\n if (tag === 'polyline' || tag === 'polygon') {\n props['d'] = pointsToPath(attrs['points'] ?? '', tag === 'polygon');\n }\n if (attrs['transform']) {\n const matrix = transformMatrix(attrs['transform']);\n if (matrix) props['matrix'] = matrix;\n }\n return props;\n}\n\n/**\n * The props react-native-svg's Android view manager declares as `float` rather than `Dynamic`,\n * with the default it applies when the prop is absent.\n *\n * `Dynamic` reads whatever arrives, so an SVG attribute can stay the string it was written as -\n * which is what `strokeWidth` and every geometry attribute do. These five cannot: the Android\n * manager takes a `float` parameter, and a string reaching one throws `java.lang.String cannot be\n * cast to java.lang.Double` out of `setProperty` while the view is being created, which takes the\n * whole screen down. iOS never noticed, because folly's `dynamic` coerces a numeric string on the\n * way into a `Float` prop. react-native-svg's own JavaScript sends numbers here too, through\n * `extractOpacity`, so this is the same translation and not an Android workaround.\n */\nconst NUMERIC: Record<string, number> = {\n opacity: 1,\n fillOpacity: 1,\n strokeOpacity: 1,\n strokeDashoffset: 0,\n strokeMiterlimit: 4,\n};\n\nfunction presentationValue(prop: string, value: string, context: SvgContext): unknown {\n if (prop === 'fill' || prop === 'stroke') return brushOf(value, context);\n if (prop === 'strokeLinecap') return own(LINECAP, value) ?? 0;\n if (prop === 'strokeLinejoin') return own(LINEJOIN, value) ?? 0;\n if (prop === 'fillRule' || prop === 'clipRule') return own(FILL_RULE, value) ?? 1;\n if (prop === 'strokeDasharray')\n return value\n .trim()\n .split(/[\\s,]+/)\n .filter(Boolean);\n return prop in NUMERIC ? numberFor(prop, value) : value;\n}\n\n/** The attribute as the float Android's view manager takes, or the default it applies. */\nfunction numberFor(prop: string, value: string): number {\n const number = Number.parseFloat(value);\n return Number.isNaN(number) ? NUMERIC[prop]! : number;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-native/icons",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "@ng-icons rendered as native react-native-svg shapes in Angular Native.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"type": "module",
|
|
18
18
|
"main": "dist/index.js",
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@ng-native/fabric": "0.
|
|
20
|
+
"@ng-native/fabric": "0.5.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@angular/core": "^22.0.0",
|