@ng-native/icons 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ashley Hunter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,50 @@
 # @ng-native/icons
 
-A placeholder: this version has no code. See https://ng-native.com.
+Renders `@ng-icons` icon sets as real native shapes, through `NgIcon` and react-native-svg, instead
+of the `innerHTML` a web app uses.
+
+Alpha: APIs may change before 1.0.
+
+## Install
+
+```sh
+npm install @ng-native/icons @ng-icons/core react-native-svg
+npm install @ng-icons/heroicons   # or whichever @ng-icons/* set you use
+```
+
+## Example
+
+```ts
+import { Component } from '@angular/core';
+import { NgIcon } from '@ng-native/icons';
+import { provideIcons } from '@ng-icons/core';
+import { heroBookOpen, heroAcademicCap } from '@ng-icons/heroicons/outline';
+
+@Component({
+  selector: 'app-root',
+  imports: [NgIcon],
+  providers: [provideIcons({ heroBookOpen, heroAcademicCap })],
+  template: `<ng-icon name="heroBookOpen" [size]="28" color="#ff9f0a" />`,
+})
+export class App {}
+```
+
+`provideIcons` works exactly as it does with `@ng-icons/core` on the web - only the rendering
+underneath `NgIcon` changes.
+
+## What's in the package
+
+- `NgIcon` - the component, taking `name` or `svg`, plus `size`, `color`, `strokeWidth` and
+  `accessibilityLabel`.
+- A narrow SVG parser (`svg`, `g`, `path`, `circle`, `ellipse`, `rect`, `line`, `polyline`,
+  `polygon`) that covers every set ng-icons ships.
+
+## Docs
+
+- [Icons](https://ng-native.com/packages/icons)
+- [Root README](https://github.com/ng-native/ng-native/blob/main/README.md) and
+  [ARCHITECTURE.md](https://github.com/ng-native/ng-native/blob/main/ARCHITECTURE.md)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Icons, from the `@ng-icons` packages a web app already uses.
+ *
+ * The icon sets are plain strings of SVG markup and `provideIcons` is ordinary DI, so both come
+ * across untouched; what this replaces is the rendering, which on the web is `innerHTML` and here
+ * is react-native-svg's native shapes.
+ */
+export { NgIcon } from './ng-icon.ts';
+export { type SvgNode } from './parse-svg.ts';
+export { brushOf, nativeProps, viewBoxProps, type Brush, type SvgContext } from './svg-props.ts';

package/dist/index.js

@@ -0,0 +1,11 @@
+/**
+ * Icons, from the `@ng-icons` packages a web app already uses.
+ *
+ * The icon sets are plain strings of SVG markup and `provideIcons` is ordinary DI, so both come
+ * across untouched; what this replaces is the rendering, which on the web is `innerHTML` and here
+ * is react-native-svg's native shapes.
+ */
+export { NgIcon } from "./ng-icon.js";
+export {} from "./parse-svg.js";
+export { brushOf, nativeProps, viewBoxProps } from "./svg-props.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAgB,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAA+B,MAAM,gBAAgB,CAAC","sourcesContent":["/**\n * Icons, from the `@ng-icons` packages a web app already uses.\n *\n * The icon sets are plain strings of SVG markup and `provideIcons` is ordinary DI, so both come\n * across untouched; what this replaces is the rendering, which on the web is `innerHTML` and here\n * is react-native-svg's native shapes.\n */\nexport { NgIcon } from './ng-icon.ts';\nexport { type SvgNode } from './parse-svg.ts';\nexport { brushOf, nativeProps, viewBoxProps, type Brush, type SvgContext } from './svg-props.ts';\n"]}

package/dist/ng-icon.d.ts

@@ -0,0 +1,61 @@
+/**
+ * An icon, from the same `@ng-icons` packages a web app uses.
+ *
+ * An app imports `NgIcon`, provides the icons it uses with ng-icons' own `provideIcons`, and
+ * writes `<ng-icon name="heroBookOpen" [size]="28" color="#ff9f0a" />`. The imports are the same
+ * ones a web app writes:
+ *
+ * ```ts
+ * import { NgIcon } from '@ng-native/icons';
+ * import { provideIcons } from '@ng-icons/core';
+ * import { heroBookOpen } from '@ng-icons/heroicons/outline';
+ * ```
+ *
+ * The icon *packages* are the reusable part: each set ships its icons as plain strings of SVG
+ * markup, and `provideIcons` is ordinary dependency injection. What cannot be reused is
+ * `@ng-icons/core`'s own `NgIcon`, which inserts that markup with `innerHTML` and sizes it with
+ * CSS custom properties. This is the same component against react-native-svg's native views: the
+ * markup is parsed, translated, and committed as real shapes.
+ *
+ * The two things ng-icons expresses in CSS become inputs here. `color` is set on the host, which
+ * is what native paints a `currentColor` brush from - so a bound colour changes every stroke in
+ * the icon without re-parsing it. `strokeWidth` fills in `var(--ng-icon__stroke-width, 1.5)`,
+ * which is how the heroicons outline set carries its weight.
+ */
+import { type Signal } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class NgIcon {
+    private readonly host;
+    private readonly renderer;
+    private readonly engine;
+    /** Every `provideIcons` in scope, innermost last, which is how ng-icons layers them. */
+    private readonly icons;
+    /** The key the icon was provided under: `heroBookOpen`, or `hero-book-open`. */
+    readonly name: import("@angular/core").InputSignal<string | undefined>;
+    /** Markup, for an icon that comes from somewhere other than a provider. */
+    readonly svg: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static
+     * `size="32"` is read as the number it spells.
+     */
+    readonly size: import("@angular/core").InputSignalWithTransform<number, string | number>;
+    /** What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. */
+    readonly color: import("@angular/core").InputSignal<string | undefined>;
+    /** Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. */
+    readonly strokeWidth: import("@angular/core").InputSignal<string | number | undefined>;
+    /** Absent leaves the icon out of the accessibility tree, which is right for a decorative one. */
+    readonly accessibilityLabel: import("@angular/core").InputSignal<string | undefined>;
+    protected readonly style: Signal<{
+        width: number;
+        height: number;
+    }>;
+    private readonly markup;
+    private readonly root;
+    protected readonly viewBox: Signal<Record<string, unknown>>;
+    constructor();
+    private draw;
+    private append;
+    private create;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgIcon, never>;
+    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

@@ -0,0 +1,173 @@
+/**
+ * An icon, from the same `@ng-icons` packages a web app uses.
+ *
+ * An app imports `NgIcon`, provides the icons it uses with ng-icons' own `provideIcons`, and
+ * writes `<ng-icon name="heroBookOpen" [size]="28" color="#ff9f0a" />`. The imports are the same
+ * ones a web app writes:
+ *
+ * ```ts
+ * import { NgIcon } from '@ng-native/icons';
+ * import { provideIcons } from '@ng-icons/core';
+ * import { heroBookOpen } from '@ng-icons/heroicons/outline';
+ * ```
+ *
+ * The icon *packages* are the reusable part: each set ships its icons as plain strings of SVG
+ * markup, and `provideIcons` is ordinary dependency injection. What cannot be reused is
+ * `@ng-icons/core`'s own `NgIcon`, which inserts that markup with `innerHTML` and sizes it with
+ * CSS custom properties. This is the same component against react-native-svg's native views: the
+ * markup is parsed, translated, and committed as real shapes.
+ *
+ * The two things ng-icons expresses in CSS become inputs here. `color` is set on the host, which
+ * is what native paints a `currentColor` brush from - so a bound colour changes every stroke in
+ * the icon without re-parsing it. `strokeWidth` fills in `var(--ng-icon__stroke-width, 1.5)`,
+ * which is how the heroicons outline set carries its weight.
+ */
+import { Component, ElementRef, Renderer2, computed, effect, inject, input, numberAttribute, } from '@angular/core';
+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 * as i0 from "@angular/core";
+/** ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. */
+function toPropertyName(name) {
+    return name
+        .replace(/([^a-zA-Z0-9])+(.)?/g, (_, __, character) => character ? character.toUpperCase() : '')
+        .replace(/[^a-zA-Z\d]/g, '')
+        .replace(/^([A-Z])/, (match) => match.toLowerCase());
+}
+export class NgIcon {
+    host = inject(ElementRef).nativeElement;
+    renderer = inject(Renderer2);
+    engine = inject(HostEngine);
+    /** Every `provideIcons` in scope, innermost last, which is how ng-icons layers them. */
+    icons = inject(NgIconsToken, { optional: true }) ?? [];
+    /** The key the icon was provided under: `heroBookOpen`, or `hero-book-open`. */
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Markup, for an icon that comes from somewhere other than a provider. */
+    svg = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "svg" }] : /* istanbul ignore next */ []));
+    /**
+     * Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static
+     * `size="32"` is read as the number it spells.
+     */
+    size = input(24, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 24) });
+    /** What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. */
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. */
+    strokeWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Absent leaves the icon out of the accessibility tree, which is right for a decorative one. */
+    accessibilityLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
+    style = computed(() => ({ width: this.size(), height: this.size() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    markup = computed(() => {
+        const svg = this.svg();
+        if (svg !== undefined)
+            return svg;
+        const name = this.name();
+        if (name === undefined)
+            return undefined;
+        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];
+        }
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn(`[angular-native] no icon named ${name}. Pass it to provideIcons() from the set it ` +
+                `belongs to, the same way you would on the web.`);
+        }
+        return undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markup" }] : /* istanbul ignore next */ []));
+    root = computed(() => {
+        const markup = this.markup();
+        return markup === undefined ? null : parseSvg(markup);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => viewBoxProps(this.root()?.attrs['viewBox']), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Before the first shape is created, which is before this component's own commit.
+        registerSvgComponents();
+        // Claimed, and stripped of the attributes Angular wrote from static inputs: `name` is one of
+        // ours *and* one of react-native-svg's, so leaving it there hands native an element name.
+        claimHost(this.host);
+        for (const input of Object.keys(NgIcon.ɵcmp?.inputs ?? {})) {
+            delete this.host.props[input];
+        }
+        // The shapes are created rather than templated: an icon's tree is data, and a template that
+        // could express it would be a component per tag with a recursive switch between them.
+        effect(() => this.draw());
+    }
+    draw() {
+        const root = this.root();
+        for (const child of [...this.host.children])
+            this.renderer.removeChild(this.host, child);
+        if (!root)
+            return;
+        // Everything hangs off one group carrying the root's presentation attributes, which is how
+        // react-native-svg's own `Svg` does it: the svg view itself holds no paint, so a root that
+        // says `stroke="currentColor"` needs a group for its children to inherit from.
+        const group = this.create('svg-g', root);
+        for (const child of root.children)
+            this.append(group, child);
+        this.renderer.appendChild(this.host, group);
+    }
+    append(parent, node) {
+        const element = SVG_ELEMENTS[node.tag];
+        if (!element)
+            return;
+        const shape = this.create(element, node);
+        for (const child of node.children)
+            this.append(shape, child);
+        this.renderer.appendChild(parent, shape);
+    }
+    create(element, node) {
+        const shape = this.renderer.createElement(element);
+        // Created here rather than by a template, so nothing else will account for it: without this
+        // the engine reports every shape as an element whose component was forgotten.
+        claimHost(shape);
+        const attrs = {
+            ...node.attrs,
+            // A `style` attribute is where ng-icons puts the stroke width, as a custom property.
+            ...styleAttributes(node.attrs['style'] ?? '', {
+                '--ng-icon__stroke-width': this.strokeWidth(),
+            }),
+        };
+        const props = nativeProps(node.tag, attrs, { color: (value) => this.engine.color(value) });
+        for (const [prop, value] of Object.entries(props)) {
+            this.renderer.setProperty(shape, prop, value);
+        }
+        return shape;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NgIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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": "size()", "bbHeight": "size()", "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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: NgIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-icon',
+                    template: '',
+                    host: {
+                        '[style]': 'style()',
+                        '[color]': 'color()',
+                        '[bbWidth]': 'size()',
+                        '[bbHeight]': 'size()',
+                        '[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()',
+                    },
+                }]
+        }], 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 }] }] } });
+//# sourceMappingURL=ng-icon.js.map

package/dist/ng-icon.js.map

@@ -0,0 +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"]}

package/dist/parse-svg.d.ts

@@ -0,0 +1,26 @@
+/**
+ * SVG markup to a tree, for the one kind of SVG an icon set ships.
+ *
+ * This is not a general XML parser and does not want to be. An icon is a build-time constant from
+ * a package like `@ng-icons/heroicons`: no namespaces to resolve, no entities, no CDATA, no
+ * external references, and across heroicons, lucide and bootstrap-icons - some five thousand
+ * icons - the entire tag surface is `svg`, `path`, `circle`, `rect`, `line`, `ellipse`,
+ * `polyline`, `polygon` and `g`.
+ *
+ * ponytail: a scanner rather than a parser. It ignores anything it does not recognise, which for
+ * a trusted constant is the right trade; the failure mode for markup outside that surface is a
+ * missing shape rather than a wrong one. An icon with a `<style>` block or a CSS class would need
+ * a real parser, and no set in ng-icons ships one.
+ */
+export interface SvgNode {
+    readonly tag: string;
+    readonly attrs: Readonly<Record<string, string>>;
+    readonly children: SvgNode[];
+}
+/**
+ * The root element, or null when there is nothing renderable.
+ *
+ * Only elements are kept: an icon's text nodes are whitespace, and a `<title>` is a label a
+ * screen reader on the web would read, which here is `accessibilityLabel` on the host.
+ */
+export declare function parseSvg(markup: string): SvgNode | null;

package/dist/parse-svg.js

@@ -0,0 +1,58 @@
+/**
+ * SVG markup to a tree, for the one kind of SVG an icon set ships.
+ *
+ * This is not a general XML parser and does not want to be. An icon is a build-time constant from
+ * a package like `@ng-icons/heroicons`: no namespaces to resolve, no entities, no CDATA, no
+ * external references, and across heroicons, lucide and bootstrap-icons - some five thousand
+ * icons - the entire tag surface is `svg`, `path`, `circle`, `rect`, `line`, `ellipse`,
+ * `polyline`, `polygon` and `g`.
+ *
+ * ponytail: a scanner rather than a parser. It ignores anything it does not recognise, which for
+ * a trusted constant is the right trade; the failure mode for markup outside that surface is a
+ * missing shape rather than a wrong one. An icon with a `<style>` block or a CSS class would need
+ * a real parser, and no set in ng-icons ships one.
+ */
+/** `<tag`, `/>`, `</tag>` and the attribute soup between them. */
+const TAG = /<\s*(\/)?\s*([a-zA-Z][\w:-]*)((?:[^>"']|"[^"]*"|'[^']*')*)(\/)?>/g;
+const ATTRIBUTE = /([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g;
+/** Comments and processing instructions, which carry nothing a renderer needs. */
+const IGNORED = /<!--[\s\S]*?-->|<\?[\s\S]*?\?>|<!\[CDATA\[[\s\S]*?\]\]>/g;
+function attributesOf(source) {
+    const attrs = {};
+    ATTRIBUTE.lastIndex = 0;
+    let match;
+    while ((match = ATTRIBUTE.exec(source)) !== null) {
+        attrs[match[1]] = match[2] ?? match[3] ?? '';
+    }
+    return attrs;
+}
+/**
+ * The root element, or null when there is nothing renderable.
+ *
+ * Only elements are kept: an icon's text nodes are whitespace, and a `<title>` is a label a
+ * screen reader on the web would read, which here is `accessibilityLabel` on the host.
+ */
+export function parseSvg(markup) {
+    const source = markup.replace(IGNORED, '');
+    const stack = [];
+    let root = null;
+    TAG.lastIndex = 0;
+    let match;
+    while ((match = TAG.exec(source)) !== null) {
+        const [, closing, tag, attributes, selfClosing] = match;
+        if (closing) {
+            stack.pop();
+            continue;
+        }
+        const node = { tag: tag, attrs: attributesOf(attributes ?? ''), children: [] };
+        stack[stack.length - 1]?.children.push(node);
+        root ??= node;
+        // The attribute run is greedy and swallows the `/` of `<path/>`, so the closing slash is
+        // recognised at either end of it. Miss this and every sibling nests inside the one before it,
+        // which draws the same icon and inherits paint that was never meant for it.
+        if (!selfClosing && !/\/\s*$/.test(attributes ?? ''))
+            stack.push(node);
+    }
+    return root;
+}
+//# sourceMappingURL=parse-svg.js.map

package/dist/parse-svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-svg.js","sourceRoot":"","sources":["../src/parse-svg.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAQH,kEAAkE;AAClE,MAAM,GAAG,GAAG,mEAAmE,CAAC;AAChF,MAAM,SAAS,GAAG,0CAA0C,CAAC;AAC7D,kFAAkF;AAClF,MAAM,OAAO,GAAG,0DAA0D,CAAC;AAE3E,SAAS,YAAY,CAAC,MAAc;IAClC,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,SAAS,CAAC,SAAS,GAAG,CAAC,CAAC;IACxB,IAAI,KAA6B,CAAC;IAClC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QACjD,KAAK,CAAC,KAAK,CAAC,CAAC,CAAE,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAChD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,MAAc;IACrC,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAc,EAAE,CAAC;IAC5B,IAAI,IAAI,GAAmB,IAAI,CAAC;IAEhC,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC;IAClB,IAAI,KAA6B,CAAC;IAClC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;QAC3C,MAAM,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC;QAExD,IAAI,OAAO,EAAE,CAAC;YACZ,KAAK,CAAC,GAAG,EAAE,CAAC;YACZ,SAAS;QACX,CAAC;QAED,MAAM,IAAI,GAAY,EAAE,GAAG,EAAE,GAAI,EAAE,KAAK,EAAE,YAAY,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;QACzF,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,KAAK,IAAI,CAAC;QACd,yFAAyF;QACzF,8FAA8F;QAC9F,4EAA4E;QAC5E,IAAI,CAAC,WAAW,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;YAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC","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}\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: an icon's text nodes are whitespace, and a `<title>` is a label a\n * screen reader on the web would read, which 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  while ((match = TAG.exec(source)) !== null) {\n    const [, closing, tag, attributes, selfClosing] = match;\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.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare function registerSvgComponents(): void;

package/dist/svg-elements.js

@@ -0,0 +1,57 @@
+/**
+ * react-native-svg, driven directly.
+ *
+ * The same arrangement as react-native-screens in the router: the native side is a set of
+ * codegen'd Fabric components, and their React wrappers are unreachable, so the engine is taught
+ * the element names and the shapes are created with `createElement`. The app installs
+ * `react-native-svg` for the native half; none of its JavaScript is imported.
+ *
+ * No decorators here: tests import this at runtime.
+ */
+import { nativePlatform, registerViewName } from '@ng-native/fabric';
+/**
+ * Element name -> Fabric component. Lowercase, because the compiler drops a template with a
+ * capitalized element name, and prefixed, because `path` and
+ * `line` are words an app might reasonably want for a component of its own.
+ *
+ * The root is the one that differs per platform: iOS draws into `RNSVGSvgView`, Android into
+ * `RNSVGSvgViewAndroid`, and react-native-svg keeps them as separate specs because their props
+ * are not the same.
+ */
+const SVG_VIEW_NAMES = {
+    'svg-g': 'RNSVGGroup',
+    'svg-path': 'RNSVGPath',
+    'svg-circle': 'RNSVGCircle',
+    'svg-ellipse': 'RNSVGEllipse',
+    '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.
+ *
+ * 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.
+ */
+export function registerSvgComponents() {
+    if (registered)
+        return;
+    registered = true;
+    const rootViewName = nativePlatform() === 'android' ? 'RNSVGSvgViewAndroid' : 'RNSVGSvgView';
+    for (const root of SVG_ROOT_NAMES) {
+        registerViewName(root, rootViewName);
+    }
+    for (const [element, viewName] of Object.entries(SVG_VIEW_NAMES)) {
+        registerViewName(element, viewName);
+    }
+}
+//# sourceMappingURL=svg-elements.js.map

package/dist/svg-elements.js.map

@@ -0,0 +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"]}

package/dist/svg-props.d.ts

@@ -0,0 +1,58 @@
+/**
+ * SVG attributes to the props react-native-svg's native views actually take.
+ *
+ * They are not the same thing, and the difference is the whole reason this file exists. `fill`
+ * and `stroke` are not colours but *brushes*, a tagged struct that says whether the paint is a
+ * colour, the view's own `color`, or a reference to a gradient. `stroke-linecap`, `stroke-linejoin`
+ * and `fill-rule` are integers, not the keywords they are written as. And a shape has to declare
+ * which props it set - `propList` - because anything absent is inherited from the group above it,
+ * which is exactly how an icon whose root carries `stroke="currentColor"` paints its paths.
+ *
+ * Send the attributes through unchanged and every one of those reads as nothing at all, with no
+ * error: the shape draws in the default black, or does not draw.
+ *
+ * All of this is what react-native-svg does in JavaScript before its props reach native. Its
+ * components are React, so this is the same translation rather than a call into it.
+ */
+/** The paint on a shape: a colour, the view's own colour, or a reference to a gradient. */
+export type Brush = null | {
+    readonly type: 0;
+    readonly payload: unknown;
+} | {
+    readonly type: 1;
+    readonly brushRef: string;
+} | {
+    readonly type: 2;
+};
+/**
+ * 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>;
+export interface SvgContext {
+    /** The host's colour conversion, which a brush payload is the result of. */
+    color(value: string): unknown;
+}
+export declare function brushOf(value: string, context: SvgContext): Brush;
+/** `M x,y L x,y ...`, which is what a polyline or polygon is once native sees it. */
+export declare function pointsToPath(points: string, close: boolean): string;
+/** `stroke-width:2;opacity:.5` as attributes, with `var(--name, fallback)` resolved. */
+export declare function styleAttributes(style: string, variables: Readonly<Record<string, string | number | undefined>>): Record<string, string>;
+/** The four numbers of a `viewBox`, as the props the svg view takes them as. */
+export declare function viewBoxProps(viewBox: string | undefined): Record<string, unknown>;
+/**
+ * A `transform` attribute as a 2x3 matrix, which is the only form native takes.
+ *
+ * Rare in icon sets - one occurrence across bootstrap-icons and lucide, and that one is already a
+ * `matrix()` - but a shape drawn in the wrong place is worse than one not drawn, so the other
+ * three forms compose rather than being ignored.
+ */
+export declare function transformMatrix(transform: string): number[] | undefined;
+/**
+ * One element's native props.
+ *
+ * `propList` is the load-bearing part: it names the props this element set itself, and native
+ * inherits everything else from the group above. Omit it and a path with no `fill` of its own
+ * paints black instead of the colour its parent carries.
+ */
+export declare function nativeProps(tag: string, attrs: Readonly<Record<string, string>>, context: SvgContext): Record<string, unknown>;

package/dist/svg-props.js

@@ -0,0 +1,248 @@
+/**
+ * SVG attributes to the props react-native-svg's native views actually take.
+ *
+ * They are not the same thing, and the difference is the whole reason this file exists. `fill`
+ * and `stroke` are not colours but *brushes*, a tagged struct that says whether the paint is a
+ * colour, the view's own `color`, or a reference to a gradient. `stroke-linecap`, `stroke-linejoin`
+ * and `fill-rule` are integers, not the keywords they are written as. And a shape has to declare
+ * which props it set - `propList` - because anything absent is inherited from the group above it,
+ * which is exactly how an icon whose root carries `stroke="currentColor"` paints its paths.
+ *
+ * Send the attributes through unchanged and every one of those reads as nothing at all, with no
+ * error: the shape draws in the default black, or does not draw.
+ *
+ * All of this is what react-native-svg does in JavaScript before its props reach native. Its
+ * components are React, so this is the same translation rather than a call into it.
+ */
+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\(#(.+)\)$/;
+/**
+ * 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 const SVG_ELEMENTS = {
+    g: 'svg-g',
+    path: 'svg-path',
+    circle: 'svg-circle',
+    ellipse: 'svg-ellipse',
+    rect: 'svg-rect',
+    line: 'svg-line',
+    polyline: 'svg-path',
+    polygon: 'svg-path',
+};
+/** Geometry, per tag. Everything else on a shape is presentation and shared. */
+const GEOMETRY = {
+    path: ['d'],
+    circle: ['cx', 'cy', 'r'],
+    ellipse: ['cx', 'cy', 'rx', 'ry'],
+    rect: ['x', 'y', 'width', 'height', 'rx', 'ry'],
+    line: ['x1', 'y1', 'x2', 'y2'],
+};
+/** SVG attribute -> native prop, for the presentation attributes shapes and groups share. */
+const PRESENTATION = {
+    fill: 'fill',
+    'fill-opacity': 'fillOpacity',
+    'fill-rule': 'fillRule',
+    stroke: 'stroke',
+    'stroke-opacity': 'strokeOpacity',
+    'stroke-width': 'strokeWidth',
+    'stroke-linecap': 'strokeLinecap',
+    'stroke-linejoin': 'strokeLinejoin',
+    'stroke-dasharray': 'strokeDasharray',
+    'stroke-dashoffset': 'strokeDashoffset',
+    'stroke-miterlimit': 'strokeMiterlimit',
+    'clip-rule': 'clipRule',
+    opacity: 'opacity',
+};
+export function brushOf(value, context) {
+    if (value === 'none')
+        return null;
+    // Deliberately kept as a brush rather than resolved here: native paints it from the view's own
+    // `color`, so a bound `[color]` on the icon changes every `currentColor` shape without a
+    // re-parse.
+    if (value === 'currentColor')
+        return { type: 2 };
+    const reference = URL_REFERENCE.exec(value);
+    if (reference)
+        return { type: 1, brushRef: reference[1] };
+    return { type: 0, payload: context.color(value) };
+}
+/** `M x,y L x,y ...`, which is what a polyline or polygon is once native sees it. */
+export function pointsToPath(points, close) {
+    const numbers = points
+        .trim()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+    let path = '';
+    for (let index = 0; index + 1 < numbers.length; index += 2) {
+        path += `${index === 0 ? 'M' : 'L'}${numbers[index]},${numbers[index + 1]}`;
+    }
+    return close && path ? `${path}Z` : path;
+}
+/** `stroke-width:2;opacity:.5` as attributes, with `var(--name, fallback)` resolved. */
+export function styleAttributes(style, variables) {
+    const attrs = {};
+    for (const declaration of style.split(';')) {
+        const colon = declaration.indexOf(':');
+        if (colon === -1)
+            continue;
+        const name = declaration.slice(0, colon).trim();
+        const value = declaration.slice(colon + 1).trim();
+        const resolved = resolveVar(value, variables);
+        if (name && resolved !== undefined)
+            attrs[name] = resolved;
+    }
+    return attrs;
+}
+function resolveVar(value, variables) {
+    const match = /^var\(\s*(--[\w-]+)\s*(?:,\s*([^)]*))?\)$/.exec(value);
+    if (!match)
+        return value;
+    const supplied = variables[match[1]];
+    if (supplied !== undefined)
+        return String(supplied);
+    return match[2]?.trim() || undefined;
+}
+/** The four numbers of a `viewBox`, as the props the svg view takes them as. */
+export function viewBoxProps(viewBox) {
+    if (!viewBox)
+        return {};
+    const parts = viewBox.trim().replace(/,/g, ' ').split(/\s+/).map(Number);
+    if (parts.length !== 4 || parts.some(Number.isNaN))
+        return {};
+    const [minX, minY, vbWidth, vbHeight] = parts;
+    return { minX, minY, vbWidth, vbHeight, align: 'xMidYMid', meetOrSlice: 0 };
+}
+const TRANSFORM = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+/**
+ * A `transform` attribute as a 2x3 matrix, which is the only form native takes.
+ *
+ * Rare in icon sets - one occurrence across bootstrap-icons and lucide, and that one is already a
+ * `matrix()` - but a shape drawn in the wrong place is worse than one not drawn, so the other
+ * three forms compose rather than being ignored.
+ */
+export function transformMatrix(transform) {
+    let matrix;
+    TRANSFORM.lastIndex = 0;
+    let match;
+    while ((match = TRANSFORM.exec(transform)) !== null) {
+        const values = match[2]
+            .trim()
+            .split(/[\s,]+/)
+            .map(Number);
+        const next = matrixFor(match[1], values);
+        if (next)
+            matrix = matrix ? multiply(matrix, next) : next;
+    }
+    return matrix;
+}
+/** `translate(4)` and `scale(2)` mean something for the missing argument; `rotate(90)` means 0. */
+const at = (values, index, fallback) => values[index] ?? fallback;
+function matrixFor(name, values) {
+    const first = at(values, 0, 0);
+    if (name === 'matrix')
+        return values.length === 6 ? values : undefined;
+    if (name === 'translate')
+        return [1, 0, 0, 1, first, at(values, 1, 0)];
+    if (name === 'scale')
+        return [first, 0, 0, at(values, 1, first), 0, 0];
+    if (name === 'rotate')
+        return rotation(first, at(values, 1, 0), at(values, 2, 0));
+    return undefined;
+}
+function rotation(degrees, cx, cy) {
+    const radians = (degrees * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    // Rotating about a point is the rotation with the point moved to the origin and back.
+    return [cos, sin, -sin, cos, cx - cos * cx + sin * cy, cy - sin * cx - cos * cy];
+}
+/** `[a, b, c, d, tx, ty]`, in SVG's own order. */
+function multiply(left, right) {
+    const [a1, b1, c1, d1, e1, f1] = left;
+    const [a2, b2, c2, d2, e2, f2] = right;
+    return [
+        a1 * a2 + c1 * b2,
+        b1 * a2 + d1 * b2,
+        a1 * c2 + c1 * d2,
+        b1 * c2 + d1 * d2,
+        a1 * e2 + c1 * f2 + e1,
+        b1 * e2 + d1 * f2 + f1,
+    ];
+}
+/**
+ * One element's native props.
+ *
+ * `propList` is the load-bearing part: it names the props this element set itself, and native
+ * inherits everything else from the group above. Omit it and a path with no `fill` of its own
+ * paints black instead of the colour its parent carries.
+ */
+export function nativeProps(tag, attrs, context) {
+    const props = {};
+    const propList = [];
+    for (const [name, value] of Object.entries(attrs)) {
+        const prop = PRESENTATION[name];
+        if (!prop)
+            continue;
+        props[prop] = presentationValue(prop, value, context);
+        propList.push(prop);
+    }
+    if (propList.length > 0)
+        props['propList'] = propList;
+    for (const name of GEOMETRY[tag] ?? []) {
+        if (attrs[name] !== undefined)
+            props[name] = attrs[name];
+    }
+    if (tag === 'polyline' || tag === 'polygon') {
+        props['d'] = pointsToPath(attrs['points'] ?? '', tag === 'polygon');
+    }
+    if (attrs['transform']) {
+        const matrix = transformMatrix(attrs['transform']);
+        if (matrix)
+            props['matrix'] = matrix;
+    }
+    return props;
+}
+/**
+ * The props react-native-svg's Android view manager declares as `float` rather than `Dynamic`,
+ * with the default it applies when the prop is absent.
+ *
+ * `Dynamic` reads whatever arrives, so an SVG attribute can stay the string it was written as -
+ * which is what `strokeWidth` and every geometry attribute do. These five cannot: the Android
+ * manager takes a `float` parameter, and a string reaching one throws `java.lang.String cannot be
+ * cast to java.lang.Double` out of `setProperty` while the view is being created, which takes the
+ * whole screen down. iOS never noticed, because folly's `dynamic` coerces a numeric string on the
+ * way into a `Float` prop. react-native-svg's own JavaScript sends numbers here too, through
+ * `extractOpacity`, so this is the same translation and not an Android workaround.
+ */
+const NUMERIC = {
+    opacity: 1,
+    fillOpacity: 1,
+    strokeOpacity: 1,
+    strokeDashoffset: 0,
+    strokeMiterlimit: 4,
+};
+function presentationValue(prop, value, context) {
+    if (prop === 'fill' || prop === 'stroke')
+        return brushOf(value, context);
+    if (prop === 'strokeLinecap')
+        return LINECAP[value] ?? 0;
+    if (prop === 'strokeLinejoin')
+        return LINEJOIN[value] ?? 0;
+    if (prop === 'fillRule' || prop === 'clipRule')
+        return FILL_RULE[value] ?? 1;
+    if (prop === 'strokeDasharray')
+        return value
+            .trim()
+            .split(/[\s,]+/)
+            .filter(Boolean);
+    return prop in NUMERIC ? numberFor(prop, value) : value;
+}
+/** The attribute as the float Android's view manager takes, or the default it applies. */
+function numberFor(prop, value) {
+    const number = Number.parseFloat(value);
+    return Number.isNaN(number) ? NUMERIC[prop] : number;
+}
+//# sourceMappingURL=svg-props.js.map

package/dist/svg-props.js.map

@@ -0,0 +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"]}

package/package.json

@@ -1,12 +1,64 @@
 {
   "name": "@ng-native/icons",
-  "version": "0.0.1",
-  "description": "Reserved for ng-native. The first release follows.",
+  "version": "0.1.0",
+  "description": "@ng-icons rendered as native react-native-svg shapes in Angular Native.",
+  "keywords": [
+    "angular",
+    "react-native",
+    "angular-native",
+    "ios",
+    "android",
+    "fabric",
+    "native",
+    "icons",
+    "ng-icons",
+    "svg"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "dependencies": {
+    "@ng-native/fabric": "0.1.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^22.0.0",
+    "@ng-icons/core": ">=30",
+    "react-native-svg": ">=15"
+  },
+  "nx": {
+    "tags": [
+      "scope:icons",
+      "layer:angular"
+    ]
+  },
   "license": "MIT",
+  "homepage": "https://ng-native.com/packages/icons",
+  "bugs": {
+    "url": "https://github.com/ng-native/ng-native/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ng-native/ng-native.git",
     "directory": "packages/icons"
   },
-  "homepage": "https://ng-native.com/packages/icons"
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@angular/core": "22.2.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "ngc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "types": "dist/index.d.ts"
 }