Inkbridgeinkbridge
Free

Icon Registry

SVG icons used in your components are scanned, catalogued, and rendered correctly in Figma.

How it works

The scanner detects icon import patterns (e.g. from `lucide-react` or local SVG files) across your component files and builds an icon registry. When the plugin renders a component that includes an icon, it looks up the registry and draws the correct SVG vector node in Figma — so icon buttons and icon-prefixed inputs look identical to the browser.

Usage

  1. 1

    No setup required — the scanner detects icon imports automatically.

  2. 2

    Supports `lucide-react`, `@heroicons/react`, and local SVG imports.

  3. 3

    Each discovered icon is resolved to its SVG path data and stored in the registry.

  4. 4

    When the plugin renders a component with an icon, it draws the matching SVG vector node in Figma.

  5. 5

    Icon size and colour follow the Tailwind classes on the icon element (e.g. `size-4 text-muted-foreground`).

iconssvgscanner

Related