My Custom Icons

A highly optimized, tree-shakeable SVG icon library for React. Built with TypeScript, exported in ESM and CJS formats, and featuring a built-in Next.js interactive documentation gallery.

This library supports both monochrome icons (which automatically inherit CSS colors) and colored icons (which preserve their original multi-color palettes).

📦 Installation (For Consumers)

Install the library via your preferred package manager:

npm install zi-icons
# or
yarn add zi-icons
# or
pnpm add zi-icons

Usage

TypeScript

import { AirplaneLanding, ColoredLogo } from 'zi-icons';

export default function App() {
  return (
    <div>
      {/* Monochrome icons inherit CSS color and accept sizing props */}
      <AirplaneLanding size="ls" style={{ color: 'red' }} />
      
      {/* Colored icons retain their original designer colors */}
      <ColoredLogo size="md" />
    </div>
  );
}

Available Size Props: xs (16px), sm (20px - default), md (24px), ls (32px), xl (64px).

🛠️ Development & Maintenance Guide

This repository contains both the source code for the npm library and a Next.js application used to preview the icons.

1. Adding New Icons

Do not manually create React components. Instead, place your raw .svg files into the appropriate folder:

• 📂 raw_icons/monochrome/: Place line-art or solid single-color icons here. The build process will forcefully strip hardcoded colors and apply fill="currentColor", allowing them to react to CSS styles.

• 📂 raw_icons/colored/: Place multi-colored icons here. The build process will optimize the SVG but preserve all original hex codes and colors.

2. Generating the React Components

Once your .svg files are in place, run the generation script:

npm run generate:icons

What this does: This uses @svgr/cli to read the SVGs, optimize them using SVGO, wrap them in a custom React template with strict TypeScript definitions, and output them to src/lib/icons/.

3. Previewing the Icons (Documentation Site)

To view the interactive gallery, search for icons, and test click-to-copy functionality, start the Next.js development server:

npm run dev

Open http://localhost:3000 in your browser.

4. Building the NPM Library

When you are ready to publish a new version of the library, run the build command:

npm run build:lib

What this does: This uses tsup to bundle the generated React components inside src/lib/icons/index.ts. It outputs highly optimized files to the dist/ directory in three formats:

• index.js (CommonJS for older Node environments)

• index.mjs (ES Modules for modern bundlers and tree-shaking)

• index.d.ts (TypeScript definition files)

5. Publishing to NPM

1. Update the "version" in package.json (e.g., "1.0.1").

2. Run npm run build:lib to ensure the dist/ folder is up to date.

3. Run npm publish.

🏗️ Architecture & Tools Used

• SVGR: Transforms raw SVG files into React components automatically. We use custom templates (svgr-template.mono.js and svgr-template.js) to ensure strict prop typing and proper color inheritance.

• SVGO: The underlying optimizer for SVGR. It reduces file size by stripping unnecessary XML tags, metadata, and (for monochrome icons) hardcoded designer colors.

• tsup: A zero-config, blazing fast TypeScript bundler powered by esbuild. We use it to compile the final npm package into ESM and CJS formats so it is instantly compatible with any modern or legacy React project.

• Next.js (App Router): Used purely as the documentation and gallery frontend, making it easy to search, test, and copy imports for the icons. (Built via npm run build:docs).

• React 17+ Compatibility: The library is compiled with standard React paradigms (peerDependencies include >=17.0.0) to ensure it works in both older and bleeding-edge (React 19) codebases without throwing Multiple React Instance or Invalid Hook Call errors.