@sigx/lynx-icons-fa-free 0.4.1 → 0.4.2

package/README.md

@@ -19,21 +19,36 @@ import { defineLynxConfig } from '@sigx/lynx-cli/config';
 
 export default defineLynxConfig({
     iconSets: [
-        { id: 'fa',  source: '@sigx/lynx-icons-fa-free', styles: ['solid'] },
+        { id: 'fas', source: '@sigx/lynx-icons-fa-free', styles: ['solid'] },
+        { id: 'far', source: '@sigx/lynx-icons-fa-free', styles: ['regular'] },
         { id: 'fab', source: '@sigx/lynx-icons-fa-free', styles: ['brands'] },
     ],
 });
 ```
 
-Each `iconSets` entry maps to one runtime `set` id. Declare one per style you want to use — they're tree-shaken independently.
+**Set ids follow Font Awesome's own prefix convention** — the same strings FA uses in its CSS classes (`fa-solid` / `fa-regular` / `fa-brands`) and JS `IconPrefix` type (`fas` / `far` / `fab`). The pinned components below depend on these exact ids; renaming a set means those components won't find it. Declare one entry per style you want to use — they're tree-shaken independently.
 
 ## Usage
 
+### Pinned per-style components (recommended)
+
+```tsx
+import { FaSolidIcon, FaRegularIcon, FaBrandIcon } from '@sigx/lynx-icons-fa-free/components';
+
+<FaSolidIcon name="user" />
+<FaSolidIcon name="chevron-right" size={20} color="#0D9488" />
+<FaRegularIcon name="bell" size={20} />
+<FaBrandIcon name="github" size={24} />
+```
+
+Each component is a thin wrapper around `<Icon>` from `@sigx/lynx-icons` with the matching `set` pre-filled. Rendering, color sanitization, and theming behavior are identical to the generic form.
+
+### Generic `<Icon>` (dynamic `set` / non-conventional ids)
+
 ```tsx
 import { Icon } from '@sigx/lynx-icons';
 
-<Icon set="fa" name="user" />
-<Icon set="fa" name="chevron-right" size={20} color="#0D9488" />
+<Icon set="fas" name="user" />
 <Icon set="fab" name="github" size={24} />
 ```
 
@@ -55,14 +70,14 @@ If the icon `name` comes from data (a JSON UI tree, a CMS field) the build-time
 
 ```ts
 iconSets: [
-    { id: 'fa', source: '@sigx/lynx-icons-fa-free', styles: ['solid'], include: ['*'] },
+    { id: 'fas', source: '@sigx/lynx-icons-fa-free', styles: ['solid'], include: ['*'] },
 ],
 ```
 
 This bundles **all ~1 900 FA-solid glyphs** (~2 MB of JS). Use it only on sets that need it; mix with normally-tree-shaken sets for the rest. The build prints the exact glyph count:
 
 ```
-[@sigx/lynx-plugin] icons: fa bundling 1956 glyphs (include: ['*'])
+[@sigx/lynx-plugin] icons: fas bundling 1956 glyphs (include: ['*'])
 ```
 
 `@sigx/lynx-icons`'s upcoming font mode (v1.1) will swap SVG-per-glyph for a single subsetted TTF — dramatically smaller for full-catalog scenarios. Stay tuned.
@@ -82,4 +97,4 @@ The adapter is normally consumed by `@sigx/lynx-plugin`'s icons slice — these
 
 ## Reference app
 
-`examples/showcase/src/screens/Settings.tsx` renders `<Icon set="fa" name="user" />`, `house`, `gear`, and `<Icon set="fab" name="github" />` in a card; the build-time scanner picks them up and writes their codepoints into `node_modules/.cache/sigx-lynx-icons/codepoints.mjs`.
+`examples/showcase/src/screens/Settings.tsx` renders `<FaSolidIcon name="user" />`, `house`, `gear`, and `<FaBrandIcon name="github" />` in a card; the build-time scanner picks up the underlying `<Icon set="…" name="…">` calls and writes their codepoints into `node_modules/.cache/sigx-lynx-icons/codepoints.mjs`.

package/dist/components.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Pinned per-style components — ergonomic shortcuts around `<Icon set= name=>`
+ * for the Font Awesome Free adapter. Set ids follow Font Awesome's own
+ * prefix convention (the same strings FA uses in its CSS classes and JS
+ * `IconPrefix` type):
+ *
+ * - `fas` — Solid (the default style most icons live in)
+ * - `far` — Regular
+ * - `fab` — Brands
+ *
+ * For these to resolve, the consumer's `signalx.config.ts` must declare a
+ * matching `iconSets` entry, e.g.
+ * `{ id: 'fas', source: '@sigx/lynx-icons-fa-free', styles: ['solid'] }`.
+ * If a different id is used, the pinned components won't find their set —
+ * fall back to the generic `<Icon set="…" name="…">` or write a one-line
+ * local pin.
+ *
+ * Rendering still goes through `@sigx/lynx-icons`' `<Icon>`, so the
+ * SVG/codepoint/missing-glyph branching, color sanitization, and theming
+ * behavior is shared with the rest of the icons pipeline. These wrappers
+ * only forward props.
+ *
+ * FA Pro styles (duotone, light, thin, sharp) are not shipped by FA Free;
+ * Pro adapters would expose their own pinned components alongside these.
+ */
+import { type Define } from '@sigx/lynx';
+import { type IconPropsExtensions } from '@sigx/lynx-icons';
+type FaIconProps = Define.Prop<'name', string, true> & Define.Prop<'size', number, false> & Define.Prop<'color', string, false> & Define.Prop<'class', string, false>
+/**
+ * Inherit any theme-augmented props (e.g. daisy's `variant?: DaisyColor`).
+ * The augmentation happens in core `@sigx/lynx-icons`'s
+ * `IconPropsExtensions`; intersecting it here keeps the pinned
+ * component's surface in sync without extra forwarding work.
+ */
+ & IconPropsExtensions;
+/** Font Awesome **solid** icon — pins `set="fas"` to match FA's `IconPrefix`. */
+export declare const FaSolidIcon: import("@sigx/runtime-core").ComponentFactory<FaIconProps, void, {}>;
+/** Font Awesome **regular** (outlined) icon — pins `set="far"`. */
+export declare const FaRegularIcon: import("@sigx/runtime-core").ComponentFactory<FaIconProps, void, {}>;
+/** Font Awesome **brands** icon — pins `set="fab"`. */
+export declare const FaBrandIcon: import("@sigx/runtime-core").ComponentFactory<FaIconProps, void, {}>;
+export {};

package/dist/components.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * Pinned per-style components — ergonomic shortcuts around `<Icon set= name=>`
+ * for the Font Awesome Free adapter. Set ids follow Font Awesome's own
+ * prefix convention (the same strings FA uses in its CSS classes and JS
+ * `IconPrefix` type):
+ *
+ * - `fas` — Solid (the default style most icons live in)
+ * - `far` — Regular
+ * - `fab` — Brands
+ *
+ * For these to resolve, the consumer's `signalx.config.ts` must declare a
+ * matching `iconSets` entry, e.g.
+ * `{ id: 'fas', source: '@sigx/lynx-icons-fa-free', styles: ['solid'] }`.
+ * If a different id is used, the pinned components won't find their set —
+ * fall back to the generic `<Icon set="…" name="…">` or write a one-line
+ * local pin.
+ *
+ * Rendering still goes through `@sigx/lynx-icons`' `<Icon>`, so the
+ * SVG/codepoint/missing-glyph branching, color sanitization, and theming
+ * behavior is shared with the rest of the icons pipeline. These wrappers
+ * only forward props.
+ *
+ * FA Pro styles (duotone, light, thin, sharp) are not shipped by FA Free;
+ * Pro adapters would expose their own pinned components alongside these.
+ */
+import { component } from '@sigx/lynx';
+import { Icon } from '@sigx/lynx-icons';
+/** Font Awesome **solid** icon — pins `set="fas"` to match FA's `IconPrefix`. */
+export const FaSolidIcon = component(({ props }) => () => (_jsx(Icon, { ...props, set: "fas" })));
+/** Font Awesome **regular** (outlined) icon — pins `set="far"`. */
+export const FaRegularIcon = component(({ props }) => () => (_jsx(Icon, { ...props, set: "far" })));
+/** Font Awesome **brands** icon — pins `set="fab"`. */
+export const FaBrandIcon = component(({ props }) => () => (_jsx(Icon, { ...props, set: "fab" })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-icons-fa-free",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Font Awesome Free adapter for @sigx/lynx-icons. Provides solid/regular/brands styles via the official @fortawesome/* packages.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,6 +11,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js",
+      "default": "./dist/components.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -23,7 +28,8 @@
     "@fortawesome/free-brands-svg-icons": "^6.0.0",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@sigx/lynx-icons": "^0.4.1"
+    "@sigx/lynx": "^0.4.2",
+    "@sigx/lynx-icons": "^0.4.2"
   },
   "peerDependenciesMeta": {
     "@fortawesome/free-brands-svg-icons": {
@@ -38,10 +44,11 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@types/node": "^25.7.0",
-    "@typescript/native-preview": "7.0.0-dev.20260511.1",
+    "@types/node": "^25.9.1",
+    "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "typescript": "^6.0.3",
-    "@sigx/lynx-icons": "^0.4.1"
+    "@sigx/lynx": "^0.4.2",
+    "@sigx/lynx-icons": "^0.4.2"
   },
   "author": "Andreas Ekdahl",
   "license": "MIT",