$ show iconoir-icons/iconoir
Iconoir is an open-source icon library (MIT) providing over 1600 SVG icons in 24×24 grid, distributed as framework-specific packages for React, React Native, Vue, SolidJS, Flutter, and CSS. The repository is a monorepo containing the raw SVG icons, a build pipeline that generates typed component libraries from those SVGs, and a Next.js website for browsing and downloading icons with search, filtering, and customization. The build system (bin/build/index.js) uses a plugin architecture to produce components for each target framework, while the website includes virtualized rendering for performance. Despite the large surface area, the codebase is well-organized with clear separation between icon sources, build tooling, and distribution packages. The primary architectural pattern is code generation: SVGs are transformed into framework-specific components via templates, enabling consistent cross-platform delivery. Notable components include the build pipeline's template system (e.g., icon-template.js), the website's virtualized icon list with React Window, and a Python script for enriching icon metadata from naming conventions.
The LLM identified 5 files worth highlighting for reuse:
Main build script that orchestrates generating framework-specific icon components from SVG source files. Uses a plugin architecture with target modules (React, Vue, Flutter, SolidJS) that each define how to transform SVG data into components. This pattern is reusable for any codebase needing to generate multiple output formats from a single asset source.
Template for generating React icon components. Wraps SVG markup with a React component that accepts size, strokeWidth, and color props. Demonstrates a clean pattern for generating framework-specific components from raw assets, reusable for any SVG-to-React code generation pipeline.
Virtualized icon list using react-window for efficient rendering of thousands of icons. Integrates search filtering by name and tag, and passes customization props (size, stroke, color) to each icon. This pattern is reusable for any large grid display with real-time filtering.
Python script that reads the icons.csv metadata and enriches tags by extracting keywords from icon filenames (e.g., 'arrow-down-circle' → 'arrow,down,circle') and applying category-specific boosts. Demonstrates a maintainable approach to deriving search tags from naming conventions, reusable for any asset catalog.
Template for generating Flutter icon widgets from SVG paths. Uses a function that returns a widget with configurable size, color, and semantics. This pattern is reusable for generating Flutter asset widgets from any SVG collection.