npm - @ng-native/icons - Versions diffs - 0.2.0 → 0.4.0 - Mend

@ng-native/icons 0.2.0 → 0.4.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.

Files changed (9) hide show

package/dist/ng-icon.js CHANGED Viewed

@@ -27,7 +27,7 @@ import { claimHost, HostEngine } from '@ng-native/fabric';
 import { NgIconsToken } from '@ng-icons/core';
 import { parseSvg } from "./parse-svg.js";
 import { registerSvgComponents } from "./svg-elements.js";
-import { SVG_ELEMENTS, nativeProps, styleAttributes, viewBoxProps } from "./svg-props.js";
+import { PAINT, SVG_ELEMENTS, isTokenPaint, nativeProps, own, styleAttributes, viewBoxProps, } from "./svg-props.js";
 import * as i0 from "@angular/core";
 /** ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. */
 function toPropertyName(name) {
@@ -74,8 +74,9 @@ export class NgIcon {
         const key = toPropertyName(name);
         // Reversed, because a nearer `provideIcons` should win over one further up the tree.
         for (const set of [...this.icons].reverse()) {
-            if (set[key])
-                return set[key];
+            const markup = own(set, key);
+            if (markup)
+                return markup;
         }
         if (typeof ngDevMode !== 'undefined' && ngDevMode) {
             console.warn(`[angular-native] no icon named ${name}. Pass it to provideIcons() from the set it ` +
@@ -119,7 +120,7 @@ export class NgIcon {
         this.renderer.appendChild(this.host, group);
     }
     append(parent, node) {
-        const element = SVG_ELEMENTS[node.tag];
+        const element = own(SVG_ELEMENTS, node.tag);
         if (!element)
             return;
         const shape = this.create(element, node);
@@ -140,6 +141,14 @@ export class NgIcon {
             }),
         };
         const props = nativeProps(node.tag, attrs, { color: (value) => this.engine.color(value) });
+        // A paint that reads a custom property is settled by the cascade, with the tokens in scope
+        // for the shape, and follows them. It stays in `propList`, which says the shape has one.
+        const cascade = this.engine;
+        for (const paint of PAINT) {
+            if (!isTokenPaint(attrs[paint]) || !cascade.setBoundStyle?.(shape, paint, attrs[paint]))
+                continue;
+            delete props[paint];
+        }
         for (const [prop, value] of Object.entries(props)) {
             this.renderer.setProperty(shape, prop, value);
         }

package/dist/ng-icon.js.map CHANGED Viewed

	@@ -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 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 { SVG_ELEMENTS, nativeProps, styleAttributes, viewBoxProps } 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 if (set[key]) return set[key];\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 = 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 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 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"]}

package/dist/svg-elements.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
 /**
- * Teach the engine the shape elements and both roots. Called by `NgIcon` and `ChartSvg`, so
- * importing either component is the whole setup - the same lesson as `AnimatedStyle`, which
- * stopped needing a bootstrap provider for the same reason. Exported for an app driving the
- * shapes directly.
+ * Teach the engine the shape elements and `ng-icon`, `NgIcon`'s own host, as the root. Called by
+ * `NgIcon`, so importing it is the whole setup - the same lesson as `AnimatedStyle`, which stopped
+ * needing a bootstrap provider for the same reason.
  *
  * A name the native side does not know renders as `UnimplementedNativeView` rather than erroring,
  * so an app that has not installed `react-native-svg` sees blank boxes where its icons were.

package/dist/svg-elements.js CHANGED Viewed

@@ -26,18 +26,11 @@ const SVG_VIEW_NAMES = {
     'svg-rect': 'RNSVGRect',
     'svg-line': 'RNSVGLine',
 };
-/**
- * The roots: element name -> Fabric component, same iOS/Android split as the shapes above.
- * `ng-icon` is `NgIcon`'s own host; a list because nothing stops two element names sharing one
- * native view.
- */
-const SVG_ROOT_NAMES = ['ng-icon'];
 let registered = false;
 /**
- * Teach the engine the shape elements and both roots. Called by `NgIcon` and `ChartSvg`, so
- * importing either component is the whole setup - the same lesson as `AnimatedStyle`, which
- * stopped needing a bootstrap provider for the same reason. Exported for an app driving the
- * shapes directly.
+ * Teach the engine the shape elements and `ng-icon`, `NgIcon`'s own host, as the root. Called by
+ * `NgIcon`, so importing it is the whole setup - the same lesson as `AnimatedStyle`, which stopped
+ * needing a bootstrap provider for the same reason.
  *
  * A name the native side does not know renders as `UnimplementedNativeView` rather than erroring,
  * so an app that has not installed `react-native-svg` sees blank boxes where its icons were.
@@ -46,10 +39,7 @@ export function registerSvgComponents() {
     if (registered)
         return;
     registered = true;
-    const rootViewName = nativePlatform() === 'android' ? 'RNSVGSvgViewAndroid' : 'RNSVGSvgView';
-    for (const root of SVG_ROOT_NAMES) {
-        registerViewName(root, rootViewName);
-    }
+    registerViewName('ng-icon', nativePlatform() === 'android' ? 'RNSVGSvgViewAndroid' : 'RNSVGSvgView');
     for (const [element, viewName] of Object.entries(SVG_VIEW_NAMES)) {
         registerViewName(element, viewName);
     }

package/dist/svg-elements.js.map CHANGED Viewed

	@@ -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;CACxB,CAAC;AAEF~~;;;;GAIG;AACH~~,~~MAAM,cAAc,GAAG,CAAC,SAAS,CAAC,CAAC;AAEnC,~~IAAI,UAAU,GAAG,KAAK,CAAC;AAEvB~~;;;;;;;;GAQG~~;AACH,MAAM,UAAU,qBAAqB;IACnC,IAAI,UAAU;QAAE,OAAO;IACvB,UAAU,GAAG,IAAI,CAAC;IAClB,~~MAAM~~,~~YAAY~~,~~GAAG~~,cAAc,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,cAAc,~~CAAC;IAC7F~~,~~KAAK,MAAM,IAAI,IAAI,cAAc,EAAE,~~CAAC;~~QAClC~~,~~gBAAgB,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IACvC,CAAC;IACD,~~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};\n\n/\n ~~The~~ ~~roots:~~ ~~element~~ ~~name -> Fabric component, same iOS/Android split as~~ the ~~shapes~~ ~~above.\n~~ * `ng-icon` is `NgIcon`'s own host; a ~~list~~ ~~because~~ ~~nothing~~ ~~stops two element names sharing one~~\n * ~~native view.\n /\nconst SVG_ROOT_NAMES = ['ng-icon'];\n\nlet registered = false;\n\n/\n Teach the engine the shape elements and both roots. Called by~~ `NgIcon~~` and `ChartSvg~~`, so\n * importing ~~either~~ ~~component~~ is the whole setup - the same lesson as `AnimatedStyle`, which\n * ~~stopped~~ needing a bootstrap provider for the same reason~~. Exported for an app driving the\n * shapes directly~~.\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 ~~const rootViewName =~~ nativePlatform() === 'android' ? 'RNSVGSvgViewAndroid' : 'RNSVGSvgView';\n ~~for (const root of SVG_ROOT_NAMES~~) ~~{\n registerViewName(root, rootViewName)~~;\n ~~}\n~~ for (const [element, viewName] of Object.entries(SVG_VIEW_NAMES)) {\n registerViewName(element, viewName);\n }\n}\n"]}
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;CACxB,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};\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 Viewed

@@ -24,11 +24,17 @@ export type Brush = null | {
 } | {
     readonly type: 2;
 };
+/** `table[key]`, but never off `Object.prototype`: a tag or attribute named `constructor` is unknown. */
+export declare function own<T>(table: Readonly<Record<string, T>>, key: string): T | undefined;
 /**
  * Which element each SVG tag commits as. `polyline` and `polygon` are paths: react-native-svg has
  * no component for either and converts their points to a `d`, so this does too.
  */
 export declare const SVG_ELEMENTS: Record<string, string>;
+/** The presentation attributes that are a paint. */
+export declare const PAINT: ReadonlySet<string>;
+/** Whether a paint is a `var()`, which only the cascade can settle. */
+export declare const isTokenPaint: (value: string | undefined) => value is string;
 export interface SvgContext {
     /** The host's colour conversion, which a brush payload is the result of. */
     color(value: string): unknown;

package/dist/svg-props.js CHANGED Viewed

@@ -18,6 +18,10 @@ const LINECAP = { butt: 0, round: 1, square: 2 };
 const LINEJOIN = { miter: 0, round: 1, bevel: 2 };
 const FILL_RULE = { evenodd: 0, nonzero: 1 };
 const URL_REFERENCE = /^url\(#(.+)\)$/;
+/** `table[key]`, but never off `Object.prototype`: a tag or attribute named `constructor` is unknown. */
+export function own(table, key) {
+    return Object.hasOwn(table, key) ? table[key] : undefined;
+}
 /**
  * Which element each SVG tag commits as. `polyline` and `polygon` are paths: react-native-svg has
  * no component for either and converts their points to a `d`, so this does too.
@@ -40,6 +44,26 @@ const GEOMETRY = {
     rect: ['x', 'y', 'width', 'height', 'rx', 'ry'],
     line: ['x1', 'y1', 'x2', 'y2'],
 };
+/** A shape's geometry, as written, and 0 for what react-native-svg defaults and it left out. */
+function geometry(tag, attrs, props) {
+    for (const name of own(GEOMETRY, tag) ?? []) {
+        if (attrs[name] !== undefined)
+            props[name] = attrs[name];
+    }
+    for (const name of own(ZERO_BY_DEFAULT, tag) ?? [])
+        props[name] ??= 0;
+}
+/**
+ * The geometry each shape defaults to 0 when absent, as react-native-svg's `Rect`, `Circle`,
+ * `Ellipse` and `Line` do before they commit. Android's shape views read a missing length as null
+ * and crash drawing it, and design tools often leave out a `y="0"`.
+ */
+const ZERO_BY_DEFAULT = {
+    circle: ['cx', 'cy', 'r'],
+    ellipse: ['cx', 'cy', 'rx', 'ry'],
+    rect: ['x', 'y', 'width', 'height'],
+    line: ['x1', 'y1', 'x2', 'y2'],
+};
 /** SVG attribute -> native prop, for the presentation attributes shapes and groups share. */
 const PRESENTATION = {
     fill: 'fill',
@@ -56,6 +80,10 @@ const PRESENTATION = {
     'clip-rule': 'clipRule',
     opacity: 'opacity',
 };
+/** The presentation attributes that are a paint. */
+export const PAINT = new Set(['fill', 'stroke']);
+/** Whether a paint is a `var()`, which only the cascade can settle. */
+export const isTokenPaint = (value) => value !== undefined && /^\s*var\(/i.test(value);
 export function brushOf(value, context) {
     if (value === 'none')
         return null;
@@ -90,7 +118,8 @@ export function styleAttributes(style, variables) {
             continue;
         const name = declaration.slice(0, colon).trim();
         const value = declaration.slice(colon + 1).trim();
-        const resolved = resolveVar(value, variables);
+        // A paint's `var()` is kept as written: the cascade settles it, with the tokens in scope.
+        const resolved = resolveVar(value, variables) ?? (PAINT.has(name) ? value : undefined);
         if (name && resolved !== undefined)
             attrs[name] = resolved;
     }
@@ -183,7 +212,7 @@ export function nativeProps(tag, attrs, context) {
     const props = {};
     const propList = [];
     for (const [name, value] of Object.entries(attrs)) {
-        const prop = PRESENTATION[name];
+        const prop = own(PRESENTATION, name);
         if (!prop)
             continue;
         props[prop] = presentationValue(prop, value, context);
@@ -191,10 +220,7 @@ export function nativeProps(tag, attrs, context) {
     }
     if (propList.length > 0)
         props['propList'] = propList;
-    for (const name of GEOMETRY[tag] ?? []) {
-        if (attrs[name] !== undefined)
-            props[name] = attrs[name];
-    }
+    geometry(tag, attrs, props);
     if (tag === 'polyline' || tag === 'polygon') {
         props['d'] = pointsToPath(attrs['points'] ?? '', tag === 'polygon');
     }
@@ -228,11 +254,11 @@ function presentationValue(prop, value, context) {
     if (prop === 'fill' || prop === 'stroke')
         return brushOf(value, context);
     if (prop === 'strokeLinecap')
-        return LINECAP[value] ?? 0;
+        return own(LINECAP, value) ?? 0;
     if (prop === 'strokeLinejoin')
-        return LINEJOIN[value] ?? 0;
+        return own(LINEJOIN, value) ?? 0;
     if (prop === 'fillRule' || prop === 'clipRule')
-        return FILL_RULE[value] ?? 1;
+        return own(FILL_RULE, value) ?? 1;
     if (prop === 'strokeDasharray')
         return value
             .trim()

package/dist/svg-props.js.map CHANGED Viewed

	@@ -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/\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/* 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\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 const resolved = resolveVar(value, variables);\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 = 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 for (const name of GEOMETRY[tag] ?? []) {\n if (attrs[name] !== undefined) props[name] = attrs[name];\n }\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 LINECAP[value] ?? 0;\n if (prop === 'strokeLinejoin') return LINEJOIN[value] ?? 0;\n if (prop === 'fillRule' \|\| prop === 'clipRule') return 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};\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 && /^\\svar\\(/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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/icons",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "@ng-icons rendered as native react-native-svg shapes in Angular Native.",
   "keywords": [
     "angular",
@@ -17,7 +17,7 @@
   "type": "module",
   "main": "dist/index.js",
   "dependencies": {
-    "@ng-native/fabric": "0.2.0"
+    "@ng-native/fabric": "0.4.0"
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",
@@ -44,7 +44,8 @@
     "dist"
   ],
   "devDependencies": {
-    "@angular/core": "22.2.0"
+    "@angular/core": "22.2.0",
+    "@babel/core": "^7.29.7"
   },
   "exports": {
     ".": {