Lynx/Modules/Lucide Icons/Usage
@sigx/lynx-icons-lucide · Beta

Using Lucide Icons#

Render Lucide glyphs in your Lynx app — either through the generic Icon with set="lucide", or the pinned LucideIcon component.

@sigx/lynx-icons-lucide is a pure-TypeScript adapter for @sigx/lynx-icons. It ships no native code and needs no permissions. Lucide is distributed as SVG only, so this adapter renders in SVG mode — there is no font fallback.

Install#

Install the adapter alongside its peer dependencies. All three are required.

Terminal 
pnpm add @sigx/lynx-icons @sigx/lynx-icons-lucide lucide

Register the icon set#

Register Lucide as an icon set in your project config (signalx.config.ts) so the build pipeline can resolve and bundle the glyphs you reference.

TypeScript 
import { defineLynxConfig } from '@sigx/lynx-cli/config';

export default defineLynxConfig({
    iconSets: [
        { id: 'lucide', source: '@sigx/lynx-icons-lucide' },
    ],
});

Basic usage#

With the set registered, render any Lucide glyph with the generic Icon component. Names are kebab-case (for example chevron-right, a-arrow-down).

TSX 
import { Icon } from '@sigx/lynx-icons';

export function Toolbar() {
    return (
        <>
            <Icon set="lucide" name="search" />
            <Icon set="lucide" name="chevron-right" size={20} color="#0D9488" />
            <Icon set="lucide" name="bell" size={24} />
        </>
    );
}

Pin the set with LucideIcon#

If you only ever use Lucide, import the pinned LucideIcon component from the /components subpath. It renders <Icon set="lucide" .../> for you, so callers supply just a name (plus optional size, color, class). The set cannot be overridden.

TSX 
import { LucideIcon } from '@sigx/lynx-icons-lucide/components';

export function Toolbar() {
    return (
        <>
            <LucideIcon name="search" />
            <LucideIcon name="bell" size={24} color="#0D9488" />
        </>
    );
}

name is required; size, color, and class are optional. Themes (such as DaisyUI) can augment the props via declaration merging — for example adding a variant prop — and LucideIcon accepts those extra props transparently.

Bundling JSON-driven icons#

The build normally bundles only the glyph names it can find by statically scanning your source. When icon names come from data at runtime (for example a JSON-driven menu) the scanner cannot see them. In that case set include: ['*'] on the icon set to bundle the entire Lucide catalog (~1500 glyphs).

TypeScript 
import { defineLynxConfig } from '@sigx/lynx-cli/config';

export default defineLynxConfig({
    iconSets: [
        { id: 'lucide', source: '@sigx/lynx-icons-lucide', include: ['*'] },
    ],
});

Use the wildcard only when names are not statically scannable — bundling the full catalog adds significant size.

Notes#

  • SVG mode only. Lucide ships no font, so only SVG mode is emitted. Build-time validation that rejects mode: 'font' for this set arrives in v1.1.
  • Glyphs are stroked, not filled. The adapter renders each glyph with a viewBox="0 0 24 24", fill="none", and a stroke that the @sigx/lynx-icons pipeline colors — so color controls the stroke.
  • Unknown names. If a name is not in the Lucide catalog, the adapter resolves nothing for that glyph; double-check the kebab-case spelling against the Lucide catalog.
  • No native setup. This is a pure-TS adapter — no iOS/Android project changes and no permissions required.

See also#