npm - @ng-native/icons - Versions diffs - 0.7.0 → 0.9.0 - Mend

@ng-native/icons 0.7.0 → 0.9.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 (3) hide show

package/dist/ng-icon.js CHANGED Viewed

@@ -38,6 +38,20 @@ function toPropertyName(name) {
         .replace(/[^a-zA-Z\d]/g, '')
         .replace(/^([A-Z])/, (match) => match.toLowerCase());
 }
+/**
+ * A size in points: a number, a number as a string, or one with the unit a web app writes it
+ * with, `18px` or `1.5rem`. Anything else is no size, and the icon is as big as the text around it.
+ */
+function pointsOf(value) {
+    if (value === undefined || value === '')
+        return undefined;
+    const text = typeof value === 'string' ? value.trim() : '';
+    const rem = /^([\d.]+)rem$/.exec(text);
+    const px = /^([\d.]+)px$/.exec(text);
+    // `..rem` fits the pattern and is no number: NaN either way, and so no size.
+    const points = rem ? Number(rem[1]) * 16 : numberAttribute(px ? px[1] : value, Number.NaN);
+    return Number.isNaN(points) ? undefined : points;
+}
 export class NgIcon {
     host = inject(ElementRef).nativeElement;
     renderer = inject(Renderer2);
@@ -55,7 +69,7 @@ export class NgIcon {
      * `size="32"` is read as the number it spells. With none, the icon is `1em`: as big as the
      * text around it, and sized by a `font-size` on it or above it, or by a width and height.
      */
-    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === '' ? undefined : numberAttribute(value, undefined) });
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (value) => pointsOf(value) });
     /** 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 */ []));

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 Engine, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NgIconsToken } from '@ng-icons/core';\nimport { parseSvg, type SvgNode } from './parse-svg.ts';\nimport { registerSvgComponents } from './svg-elements.ts';\nimport {\n PAINT,\n SVG_ELEMENTS,\n UNDRAWN,\n gradientProps,\n isGradient,\n isTokenPaint,\n nativeProps,\n own,\n stopColor,\n styleAttributes,\n textProps,\n viewBoxProps,\n} from './svg-props.ts';\n\n/* The tags already reported as not drawn, so a list of icons says it once. /\nconst reported = new Set<string>();\n\n/* ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. /\nfunction toPropertyName(name: string): string {\n return name\n .replace(/([^a-zA-Z0-9])+(.)?/g, (_, __, character: string \| undefined) =>\n character ? character.toUpperCase() : '',\n )\n .replace(/[^a-zA-Z\\d]/g, '')\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n}\n\n@Component({\n selector: 'ng-icon',\n template: '',\n /\n * With no size it is as big as the text around it, which is what an icon is on the web:\n * `@ng-icons/core` sizes one `1em`, and a library sizes its icons with a font size. A `size`\n * is an inline style, which beats this.\n /\n styles: `\n :host {\n width: 1em;\n height: 1em;\n }\n `,\n host: {\n '[style]': 'style()',\n '[color]': 'color()',\n '[bbWidth]': 'box()',\n '[bbHeight]': 'box()',\n '[minX]': 'viewBox().minX',\n '[minY]': 'viewBox().minY',\n '[vbWidth]': 'viewBox().vbWidth',\n '[vbHeight]': 'viewBox().vbHeight',\n '[align]': 'viewBox().align',\n '[meetOrSlice]': 'viewBox().meetOrSlice',\n '[accessible]': 'accessibilityLabel() !== undefined',\n '[accessibilityRole]': \"accessibilityLabel() === undefined ? undefined : 'image'\",\n '[accessibilityLabel]': 'accessibilityLabel()',\n },\n})\nexport class NgIcon {\n private readonly host = inject(ElementRef).nativeElement as EngineNode;\n private readonly renderer = inject(Renderer2);\n private readonly engine = inject(HostEngine);\n /* Every `provideIcons` in scope, innermost last, which is how ng-icons layers them. /\n private readonly icons = inject(NgIconsToken, { optional: true }) ?? [];\n\n /* The key the icon was provided under: `heroBookOpen`, or `hero-book-open`. /\n readonly name = input<string>();\n /* Markup, for an icon that comes from somewhere other than a provider. /\n readonly svg = input<string>();\n /\n Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static\n * `size=\"32\"` is read as the number it spells. With none, the icon is `1em`: as big as the\n * text around it, and sized by a `font-size` on it or above it, or by a width and height.\n /\n readonly size = input(undefined, {\n transform: (value: number \| string \| undefined) =>\n value === undefined \|\| value === '' ? undefined : numberAttribute(value, undefined),\n });\n /* What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. /\n readonly color = input<string>();\n /* Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. /\n readonly strokeWidth = input<number \| string>();\n /* Absent leaves the icon out of the accessibility tree, which is right for a decorative one. /\n readonly accessibilityLabel = input<string>();\n\n /* The size as an inline style, or nothing for the stylesheet's `1em` to stand. /\n protected readonly style = computed(() => {\n const size = this.size();\n return size === undefined ? {} : { width: size, height: size };\n });\n /* What the view scales its drawing to: the size, or the whole of the box it is laid out as. /\n protected readonly box = computed(() => this.size() ?? '100%');\n\n private readonly markup: Signal<string \| undefined> = computed(() => {\n const svg = this.svg();\n if (svg !== undefined) return svg;\n const name = this.name();\n if (name === undefined) return undefined;\n\n const key = toPropertyName(name);\n // Reversed, because a nearer `provideIcons` should win over one further up the tree.\n for (const set of [...this.icons].reverse()) {\n const markup = own(set, key);\n if (markup) return markup;\n }\n if (typeof ngDevMode !== 'undefined' && ngDevMode) {\n console.warn(\n `[angular-native] no icon named ${name}. Pass it to provideIcons() from the set it ` +\n `belongs to, the same way you would on the web.`,\n );\n }\n return undefined;\n });\n\n private readonly root = computed(() => {\n const markup = this.markup();\n return markup === undefined ? null : parseSvg(markup);\n });\n\n protected readonly viewBox = computed(() => viewBoxProps(this.root()?.attrs['viewBox']));\n\n constructor() {\n // Before the first shape is created, which is before this component's own commit.\n registerSvgComponents();\n // Claimed, and stripped of the attributes Angular wrote from static inputs: `name` is one of\n // ours and* one of react-native-svg's, so leaving it there hands native an element name.\n claimHost(this.host);\n for (const input of Object.keys(\n (NgIcon as { ɵcmp?: { inputs?: object } }).ɵcmp?.inputs ?? {},\n )) {\n delete this.host.props[input];\n }\n // The shapes are created rather than templated: an icon's tree is data, and a template that\n // could express it would be a component per tag with a recursive switch between them.\n effect(() => this.draw());\n }\n\n private draw(): void {\n const root = this.root();\n for (const child of [...this.host.children]) this.renderer.removeChild(this.host, child);\n if (!root) return;\n\n // Everything hangs off one group carrying the root's presentation attributes, which is how\n // react-native-svg's own `Svg` does it: the svg view itself holds no paint, so a root that\n // says `stroke=\"currentColor\"` needs a group for its children to inherit from.\n const group = this.create('svg-g', root);\n for (const child of root.children) this.append(group, child);\n this.renderer.appendChild(this.host, group);\n }\n\n private append(parent: unknown, node: SvgNode): void {\n const element = own(SVG_ELEMENTS, node.tag);\n if (!element) return this.reportUndrawn(node.tag);\n const shape = this.create(element, node);\n for (const child of node.children) this.append(shape, child);\n this.renderer.appendChild(parent, shape);\n }\n\n /*\n A `currentColor` stop is settled here from the `color` input, where a `currentColor` brush is\n * painted by native from the colour the cascade gives the icon. With no input it is black.\n /\n private reportUntintedStop(gradient: SvgNode): void {\n if (typeof ngDevMode === 'undefined' \|\| !ngDevMode) return;\n if (this.color() !== undefined \|\| reported.has('currentColor')) return;\n if (!gradient.children.some((stop) => stopColor(stop.attrs) === 'currentColor')) return;\n reported.add('currentColor');\n console.warn(\n '[angular-native] <ng-icon> paints a gradient stop written as currentColor from its ' +\n '`color` input, and this icon has none, so the stop is black. Set `color` on the icon.',\n );\n }\n\n /* An incomplete drawing with no message is the hardest failure to track down. /\n private reportUndrawn(tag: string): void {\n if (typeof ngDevMode === 'undefined' \|\| !ngDevMode) return;\n if (UNDRAWN.has(tag) \|\| reported.has(tag)) return;\n reported.add(tag);\n const drawn = ['svg', ...Object.keys(SVG_ELEMENTS), 'stop'].filter((name) => name !== '#text');\n console.warn(\n `[angular-native] <ng-icon> does not draw <${tag}>, so it is left out of the icon. ` +\n `It draws ${drawn.slice(0, -1).join(', ')} and ${drawn.at(-1)}.`,\n );\n }\n\n /* The native props of one element: a gradient's, a text's, or a shape's. */\n private propsOf(node: SvgNode, attrs: Record<string, string>): Record<string, unknown> {\n const context = { color: (value: string) => this.engine.color(value) };\n if (isGradient(node.tag)) {\n this.reportUntintedStop(node);\n return gradientProps(node, context, this.color());\n }\n const props = nativeProps(node.tag, attrs, context);\n if (node.tag === '#text') return { ...props, content: node.text };\n return node.tag === 'text' \|\| node.tag === 'tspan' ? { ...props, ...textProps(attrs) } : props;\n }\n\n private create(element: string, node: SvgNode): unknown {\n const shape = this.renderer.createElement(element) as EngineNode;\n // Created here rather than by a template, so nothing else will account for it: without this\n // the engine reports every shape as an element whose component was forgotten.\n claimHost(shape);\n const attrs = {\n ...node.attrs,\n // A `style` attribute is where ng-icons puts the stroke width, as a custom property.\n ...styleAttributes(node.attrs['style'] ?? '', {\n '--ng-icon__stroke-width': this.strokeWidth(),\n }),\n };\n const props = this.propsOf(node, attrs);\n // A paint that reads a custom property is settled by the cascade, with the tokens in scope\n // for the shape, and follows them. It stays in `propList`, which says the shape has one.\n const cascade = this.engine as Partial<Pick<Engine, 'setBoundStyle'>>;\n for (const paint of PAINT) {\n if (!isTokenPaint(attrs[paint]) \|\| !cascade.setBoundStyle?.(shape, paint, attrs[paint]))\n continue;\n delete props[paint];\n }\n for (const [prop, value] of Object.entries(props)) {\n this.renderer.setProperty(shape, prop, value);\n }\n return shape;\n }\n}\n"]}
1	+ {"version":3,"file":"ng-icon.js","sourceRoot":"","sources":["../src/ng-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EACL,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,eAAe,GAEhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAgC,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAgB,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACL,KAAK,EACL,YAAY,EACZ,OAAO,EACP,aAAa,EACb,UAAU,EACV,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,eAAe,EACf,SAAS,EACT,YAAY,GACb,MAAM,gBAAgB,CAAC;;AAExB,+EAA+E;AAC/E,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAU,CAAC;AAEnC,+FAA+F;AAC/F,SAAS,cAAc,CAAC,IAAY;IAClC,OAAO,IAAI;SACR,OAAO,CAAC,sBAAsB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,SAA6B,EAAE,EAAE,CACxE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CACzC;SACA,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;SAC3B,OAAO,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;AACzD,CAAC;AAED;;;GAGG;AACH,SAAS,QAAQ,CAAC,KAAkC;IAClD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,SAAS,CAAC;IAC1D,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,6EAA6E;IAC7E,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3F,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;AACnD,CAAC;AAgCD,MAAM,OAAO,MAAM;IACA,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,aAA2B,CAAC;IACtD,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,wFAAwF;IACvE,KAAK,GAAG,MAAM,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;IAExE,gFAAgF;IACvE,IAAI,GAAG,KAAK;wFAAU,CAAC;IAChC,2EAA2E;IAClE,GAAG,GAAG,KAAK;uFAAU,CAAC;IAC/B;;;;OAIG;IACM,IAAI,GAAG,KAAK,CAAC,SAAS,4EAC7B,SAAS,EAAE,CAAC,KAAkC,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAClE,CAAC;IACH,+FAA+F;IACtF,KAAK,GAAG,KAAK;yFAAU,CAAC;IACjC,kGAAkG;IACzF,WAAW,GAAG,KAAK;+FAAmB,CAAC;IAChD,iGAAiG;IACxF,kBAAkB,GAAG,KAAK;sGAAU,CAAC;IAE9C,mFAAmF;IAChE,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE;QACvC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IACjE,CAAC;8EAAC,CAAC;IACH,gGAAgG;IAC7E,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,MAAM;4EAAC,CAAC;IAE9C,MAAM,GAA+B,QAAQ,CAAC,GAAG,EAAE;QAClE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO,GAAG,CAAC;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;QAEzC,MAAM,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;QACjC,qFAAqF;QACrF,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5C,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;YAC7B,IAAI,MAAM;gBAAE,OAAO,MAAM,CAAC;QAC5B,CAAC;QACD,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,EAAE,CAAC;YAClD,OAAO,CAAC,IAAI,CACV,kCAAkC,IAAI,8CAA8C;gBAClF,gDAAgD,CACnD,CAAC;QACJ,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;+EAAC,CAAC;IAEc,IAAI,GAAG,QAAQ,CAAC,GAAG,EAAE;QACpC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;6EAAC,CAAC;IAEgB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;gFAAC,CAAC;IAEzF;QACE,kFAAkF;QAClF,qBAAqB,EAAE,CAAC;QACxB,6FAA6F;QAC7F,0FAA0F;QAC1F,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrB,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,IAAI,CAC5B,MAAyC,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE,CAC9D,EAAE,CAAC;YACF,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QACD,4FAA4F;QAC5F,sFAAsF;QACtF,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IAEO,IAAI;QACV,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,KAAK,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;YAAE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzF,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,2FAA2F;QAC3F,2FAA2F;QAC3F,+EAA+E;QAC/E,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACzC,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC9C,CAAC;IAEO,MAAM,CAAC,MAAe,EAAE,IAAa;QAC3C,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5C,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACzC,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACK,kBAAkB,CAAC,QAAiB;QAC1C,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3D,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC;YAAE,OAAO;QACvE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,cAAc,CAAC;YAAE,OAAO;QACxF,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC7B,OAAO,CAAC,IAAI,CACV,qFAAqF;YACnF,uFAAuF,CAC1F,CAAC;IACJ,CAAC;IAED,kFAAkF;IAC1E,aAAa,CAAC,GAAW;QAC/B,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3D,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,OAAO;QAClD,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAClB,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;QAC/F,OAAO,CAAC,IAAI,CACV,6CAA6C,GAAG,oCAAoC;YAClF,YAAY,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CACnE,CAAC;IACJ,CAAC;IAED,6EAA6E;IACrE,OAAO,CAAC,IAAa,EAAE,KAA6B;QAC1D,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACvE,IAAI,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAC9B,OAAO,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACpD,CAAC;QACD,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QACpD,IAAI,IAAI,CAAC,GAAG,KAAK,OAAO;YAAE,OAAO,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAClE,OAAO,IAAI,CAAC,GAAG,KAAK,MAAM,IAAI,IAAI,CAAC,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IACjG,CAAC;IAEO,MAAM,CAAC,OAAe,EAAE,IAAa;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAe,CAAC;QACjE,4FAA4F;QAC5F,8EAA8E;QAC9E,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,MAAM,KAAK,GAAG;YACZ,GAAG,IAAI,CAAC,KAAK;YACb,qFAAqF;YACrF,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE;gBAC5C,yBAAyB,EAAE,IAAI,CAAC,WAAW,EAAE;aAC9C,CAAC;SACH,CAAC;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACxC,2FAA2F;QAC3F,yFAAyF;QACzF,MAAM,OAAO,GAAG,IAAI,CAAC,MAAgD,CAAC;QACtE,KAAK,MAAM,KAAK,IAAI,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;gBACrF,SAAS;YACX,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QACD,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;uGAnKU,MAAM;2FAAN,MAAM,oyCA5BP,EAAE;;2FA4BD,MAAM;kBA9BlB,SAAS;+BACE,SAAS,YACT,EAAE,QAYN;wBACJ,SAAS,EAAE,SAAS;wBACpB,SAAS,EAAE,SAAS;wBACpB,WAAW,EAAE,OAAO;wBACpB,YAAY,EAAE,OAAO;wBACrB,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,gBAAgB;wBAC1B,WAAW,EAAE,mBAAmB;wBAChC,YAAY,EAAE,oBAAoB;wBAClC,SAAS,EAAE,iBAAiB;wBAC5B,eAAe,EAAE,uBAAuB;wBACxC,cAAc,EAAE,oCAAoC;wBACpD,qBAAqB,EAAE,0DAA0D;wBACjF,sBAAsB,EAAE,sBAAsB;qBAC/C","sourcesContent":["/*\n An icon, from the same `@ng-icons` packages a web app uses.\n \n An app imports `NgIcon`, provides the icons it uses with ng-icons' own `provideIcons`, and\n * writes `<ng-icon name=\"heroBookOpen\" [size]=\"28\" color=\"#ff9f0a\" />`. The imports are the same\n * ones a web app writes:\n \n ```ts\n * import { NgIcon } from '@ng-native/icons';\n * import { provideIcons } from '@ng-icons/core';\n * import { heroBookOpen } from '@ng-icons/heroicons/outline';\n * ```\n \n The icon packages are the reusable part: each set ships its icons as plain strings of SVG\n * markup, and `provideIcons` is ordinary dependency injection. What cannot be reused is\n * `@ng-icons/core`'s own `NgIcon`, which inserts that markup with `innerHTML` and sizes it with\n * CSS custom properties. This is the same component against react-native-svg's native views: the\n * markup is parsed, translated, and committed as real shapes.\n \n The two things ng-icons expresses in CSS become inputs here. `color` is set on the host, which\n * is what native paints a `currentColor` brush from - so a bound colour changes every stroke in\n * the icon without re-parsing it. `strokeWidth` fills in `var(--ng-icon__stroke-width, 1.5)`,\n * which is how the heroicons outline set carries its weight.\n /\nimport {\n Component,\n ElementRef,\n Renderer2,\n computed,\n effect,\n inject,\n input,\n numberAttribute,\n type Signal,\n} from '@angular/core';\nimport { claimHost, type Engine, type EngineNode, HostEngine } from '@ng-native/fabric';\nimport { NgIconsToken } from '@ng-icons/core';\nimport { parseSvg, type SvgNode } from './parse-svg.ts';\nimport { registerSvgComponents } from './svg-elements.ts';\nimport {\n PAINT,\n SVG_ELEMENTS,\n UNDRAWN,\n gradientProps,\n isGradient,\n isTokenPaint,\n nativeProps,\n own,\n stopColor,\n styleAttributes,\n textProps,\n viewBoxProps,\n} from './svg-props.ts';\n\n/* The tags already reported as not drawn, so a list of icons says it once. /\nconst reported = new Set<string>();\n\n/* ng-icons stores icons under a camel-cased key, so `hero-book-open` finds `heroBookOpen`. /\nfunction toPropertyName(name: string): string {\n return name\n .replace(/([^a-zA-Z0-9])+(.)?/g, (_, __, character: string \| undefined) =>\n character ? character.toUpperCase() : '',\n )\n .replace(/[^a-zA-Z\\d]/g, '')\n .replace(/^([A-Z])/, (match) => match.toLowerCase());\n}\n\n/\n A size in points: a number, a number as a string, or one with the unit a web app writes it\n * with, `18px` or `1.5rem`. Anything else is no size, and the icon is as big as the text around it.\n /\nfunction pointsOf(value: number \| string \| undefined): number \| undefined {\n if (value === undefined \|\| value === '') return undefined;\n const text = typeof value === 'string' ? value.trim() : '';\n const rem = /^([\\d.]+)rem$/.exec(text);\n const px = /^([\\d.]+)px$/.exec(text);\n // `..rem` fits the pattern and is no number: NaN either way, and so no size.\n const points = rem ? Number(rem[1]) 16 : numberAttribute(px ? px[1] : value, Number.NaN);\n return Number.isNaN(points) ? undefined : points;\n}\n\n@Component({\n selector: 'ng-icon',\n template: '',\n /\n With no size it is as big as the text around it, which is what an icon is on the web:\n * `@ng-icons/core` sizes one `1em`, and a library sizes its icons with a font size. A `size`\n * is an inline style, which beats this.\n /\n styles: `\n :host {\n width: 1em;\n height: 1em;\n }\n `,\n host: {\n '[style]': 'style()',\n '[color]': 'color()',\n '[bbWidth]': 'box()',\n '[bbHeight]': 'box()',\n '[minX]': 'viewBox().minX',\n '[minY]': 'viewBox().minY',\n '[vbWidth]': 'viewBox().vbWidth',\n '[vbHeight]': 'viewBox().vbHeight',\n '[align]': 'viewBox().align',\n '[meetOrSlice]': 'viewBox().meetOrSlice',\n '[accessible]': 'accessibilityLabel() !== undefined',\n '[accessibilityRole]': \"accessibilityLabel() === undefined ? undefined : 'image'\",\n '[accessibilityLabel]': 'accessibilityLabel()',\n },\n})\nexport class NgIcon {\n private readonly host = inject(ElementRef).nativeElement as EngineNode;\n private readonly renderer = inject(Renderer2);\n private readonly engine = inject(HostEngine);\n /* Every `provideIcons` in scope, innermost last, which is how ng-icons layers them. /\n private readonly icons = inject(NgIconsToken, { optional: true }) ?? [];\n\n /* The key the icon was provided under: `heroBookOpen`, or `hero-book-open`. /\n readonly name = input<string>();\n /* Markup, for an icon that comes from somewhere other than a provider. /\n readonly svg = input<string>();\n /\n Points, square. Icons are drawn from a `viewBox`, so this is the size on screen. A static\n * `size=\"32\"` is read as the number it spells. With none, the icon is `1em`: as big as the\n * text around it, and sized by a `font-size` on it or above it, or by a width and height.\n /\n readonly size = input(undefined, {\n transform: (value: number \| string \| undefined) => pointsOf(value),\n });\n /* What a `currentColor` stroke or fill paints as. Native resolves it, so binding is cheap. /\n readonly color = input<string>();\n /* Fills in `var(--ng-icon__stroke-width, …)`, which is how an outline set carries its weight. /\n readonly strokeWidth = input<number \| string>();\n /* Absent leaves the icon out of the accessibility tree, which is right for a decorative one. /\n readonly accessibilityLabel = input<string>();\n\n /* The size as an inline style, or nothing for the stylesheet's `1em` to stand. /\n protected readonly style = computed(() => {\n const size = this.size();\n return size === undefined ? {} : { width: size, height: size };\n });\n /* What the view scales its drawing to: the size, or the whole of the box it is laid out as. /\n protected readonly box = computed(() => this.size() ?? '100%');\n\n private readonly markup: Signal<string \| undefined> = computed(() => {\n const svg = this.svg();\n if (svg !== undefined) return svg;\n const name = this.name();\n if (name === undefined) return undefined;\n\n const key = toPropertyName(name);\n // Reversed, because a nearer `provideIcons` should win over one further up the tree.\n for (const set of [...this.icons].reverse()) {\n const markup = own(set, key);\n if (markup) return markup;\n }\n if (typeof ngDevMode !== 'undefined' && ngDevMode) {\n console.warn(\n `[angular-native] no icon named ${name}. Pass it to provideIcons() from the set it ` +\n `belongs to, the same way you would on the web.`,\n );\n }\n return undefined;\n });\n\n private readonly root = computed(() => {\n const markup = this.markup();\n return markup === undefined ? null : parseSvg(markup);\n });\n\n protected readonly viewBox = computed(() => viewBoxProps(this.root()?.attrs['viewBox']));\n\n constructor() {\n // Before the first shape is created, which is before this component's own commit.\n registerSvgComponents();\n // Claimed, and stripped of the attributes Angular wrote from static inputs: `name` is one of\n // ours and* one of react-native-svg's, so leaving it there hands native an element name.\n claimHost(this.host);\n for (const input of Object.keys(\n (NgIcon as { ɵcmp?: { inputs?: object } }).ɵcmp?.inputs ?? {},\n )) {\n delete this.host.props[input];\n }\n // The shapes are created rather than templated: an icon's tree is data, and a template that\n // could express it would be a component per tag with a recursive switch between them.\n effect(() => this.draw());\n }\n\n private draw(): void {\n const root = this.root();\n for (const child of [...this.host.children]) this.renderer.removeChild(this.host, child);\n if (!root) return;\n\n // Everything hangs off one group carrying the root's presentation attributes, which is how\n // react-native-svg's own `Svg` does it: the svg view itself holds no paint, so a root that\n // says `stroke=\"currentColor\"` needs a group for its children to inherit from.\n const group = this.create('svg-g', root);\n for (const child of root.children) this.append(group, child);\n this.renderer.appendChild(this.host, group);\n }\n\n private append(parent: unknown, node: SvgNode): void {\n const element = own(SVG_ELEMENTS, node.tag);\n if (!element) return this.reportUndrawn(node.tag);\n const shape = this.create(element, node);\n for (const child of node.children) this.append(shape, child);\n this.renderer.appendChild(parent, shape);\n }\n\n /*\n A `currentColor` stop is settled here from the `color` input, where a `currentColor` brush is\n * painted by native from the colour the cascade gives the icon. With no input it is black.\n /\n private reportUntintedStop(gradient: SvgNode): void {\n if (typeof ngDevMode === 'undefined' \|\| !ngDevMode) return;\n if (this.color() !== undefined \|\| reported.has('currentColor')) return;\n if (!gradient.children.some((stop) => stopColor(stop.attrs) === 'currentColor')) return;\n reported.add('currentColor');\n console.warn(\n '[angular-native] <ng-icon> paints a gradient stop written as currentColor from its ' +\n '`color` input, and this icon has none, so the stop is black. Set `color` on the icon.',\n );\n }\n\n /* An incomplete drawing with no message is the hardest failure to track down. /\n private reportUndrawn(tag: string): void {\n if (typeof ngDevMode === 'undefined' \|\| !ngDevMode) return;\n if (UNDRAWN.has(tag) \|\| reported.has(tag)) return;\n reported.add(tag);\n const drawn = ['svg', ...Object.keys(SVG_ELEMENTS), 'stop'].filter((name) => name !== '#text');\n console.warn(\n `[angular-native] <ng-icon> does not draw <${tag}>, so it is left out of the icon. ` +\n `It draws ${drawn.slice(0, -1).join(', ')} and ${drawn.at(-1)}.`,\n );\n }\n\n /* The native props of one element: a gradient's, a text's, or a shape's. */\n private propsOf(node: SvgNode, attrs: Record<string, string>): Record<string, unknown> {\n const context = { color: (value: string) => this.engine.color(value) };\n if (isGradient(node.tag)) {\n this.reportUntintedStop(node);\n return gradientProps(node, context, this.color());\n }\n const props = nativeProps(node.tag, attrs, context);\n if (node.tag === '#text') return { ...props, content: node.text };\n return node.tag === 'text' \|\| node.tag === 'tspan' ? { ...props, ...textProps(attrs) } : props;\n }\n\n private create(element: string, node: SvgNode): unknown {\n const shape = this.renderer.createElement(element) as EngineNode;\n // Created here rather than by a template, so nothing else will account for it: without this\n // the engine reports every shape as an element whose component was forgotten.\n claimHost(shape);\n const attrs = {\n ...node.attrs,\n // A `style` attribute is where ng-icons puts the stroke width, as a custom property.\n ...styleAttributes(node.attrs['style'] ?? '', {\n '--ng-icon__stroke-width': this.strokeWidth(),\n }),\n };\n const props = this.propsOf(node, attrs);\n // A paint that reads a custom property is settled by the cascade, with the tokens in scope\n // for the shape, and follows them. It stays in `propList`, which says the shape has one.\n const cascade = this.engine as Partial<Pick<Engine, 'setBoundStyle'>>;\n for (const paint of PAINT) {\n if (!isTokenPaint(attrs[paint]) \|\| !cascade.setBoundStyle?.(shape, paint, attrs[paint]))\n continue;\n delete props[paint];\n }\n for (const [prop, value] of Object.entries(props)) {\n this.renderer.setProperty(shape, prop, value);\n }\n return shape;\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/icons",
-  "version": "0.7.0",
+  "version": "0.9.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.7.0"
+    "@ng-native/fabric": "0.9.0"
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",