JSPM

@structyl/icons

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q60161F
  • License MIT

The structyl icon set: 1000+ tree-shakeable SVG icon components re-exported from lucide-react, typed for React 18 and 19.

Package Exports

  • @structyl/icons

Readme

@structyl/icons

The structyl icon set — 1000+ accessible, tree-shakeable SVG icons for React.

npm license

The icon layer for structyl. It re-exports the full lucide-react icon set as individual React components, fully typed for React 18 and 19. Using it through @structyl/icons keeps your imports on the structyl scope, so the underlying icon source can evolve without changing your application code.

Installation

# pnpm
pnpm add @structyl/icons

# npm
npm install @structyl/icons

# yarn
yarn add @structyl/icons

react is a peer dependency (^18.0.0 || ^19.0.0) and must be installed in your project.

Usage

Import icons by name. Each icon is a standalone component that accepts the standard SVG props plus size, color, strokeWidth, and absoluteStrokeWidth.

import { Camera, ChevronRight, Settings } from '@structyl/icons';

export function Toolbar() {
  return (
    <div className="flex items-center gap-2">
      <Camera size={20} />
      <Settings size={20} strokeWidth={1.5} />
      <ChevronRight className="text-muted-foreground" aria-hidden />
    </div>
  );
}

Decorative icons should be marked aria-hidden. Icons that convey meaning on their own should be given an accessible label:

import { Trash2 } from '@structyl/icons';

<button aria-label="Delete item">
  <Trash2 size={16} aria-hidden />
</button>;

Because the package is side-effect free, named imports are tree-shaken — only the icons you reference are included in your bundle.

Features

  • Over 1000 SVG icon components, re-exported from lucide-react.
  • Tree-shakeable: "sideEffects": false means unused icons are dropped by your bundler.
  • Fully typed for TypeScript, including the LucideProps and LucideIcon types.
  • Consistent stroke-based design, sizable via size and styleable with className (Tailwind-friendly).
  • React 18 and 19 compatible.
  • Ships ESM and CJS builds with type declarations.

API

@structyl/icons re-exports the public surface of lucide-react:

Export Description
Named icon components (e.g. Camera, ChevronRight, Settings) Individual SVG icon components accepting size, color, strokeWidth, absoluteStrokeWidth, and standard SVG props.
Icon Generic component for rendering an icon from raw node data.
createLucideIcon Factory for building a custom icon component with the lucide API.
icons Object map of every icon keyed by name, for dynamic/programmatic lookup.
LucideProps (type) Props shared by all icon components.
LucideIcon (type) Type of an icon component.

For the full searchable icon catalog, see lucide.dev/icons.

Part of structyl

This package is part of structyl — see the documentation for the full component library.

License

MIT