Contributing to Reicon 💜

September 15, 2026 · View on GitHub

Contributing to Reicon 💜

Welcome! Thank you for helping to make Reicon better. This guide provides a direct, concise reference for setting up the project, understanding the codebase structure, using key scripts, and submitting contributions.

🚀 Quick Start

Fork and Clone the repository:

git clone https://github.com/<your-username>/reicon.git
cd reicon

Install dependencies:
```
npm install
```
Start the local development server:
```
npm run dev
```
The site will be available at http://localhost:3000.

📁 Repository Structure

Reicon is organized as a monorepo. Here is a breakdown of what each folder contains:

Directory / File	Description
`data/icon-data.json`	Single source of truth. Every icon's raw SVG markup (Outline & Filled weights) and metadata live here.
`packages/`	Framework packages rebuilt automatically from `data/icon-data.json`.
├─ `reicon/`	Vanilla JS & CDN core library.
├─ `reicon-react/`	React wrapper components.
├─ `reicon-angular/`	Angular 20+ standalone wrapper components.
├─ `reicon-vue/`	Vue 3 wrapper components.
├─ `reicon-svelte/`	Svelte wrapper components.
├─ `reicon-figma/`	Figma plugin build environment.
└─ `reicon-vscode/`	VS Code Extension helper.
`scripts/`	Build and tooling utilities (Sitemap, SEO auditing, OG image generation).
`src/`	Reicon documentation website source (Vite + React).
`public/`	Website static assets, favicons, `robots.txt`, and `llms.txt`.
`docs/`	Additional guides and design system references.
`cdn/`	Generated CDN bundles (git-ignored, compiled from JS build).

Warning

Never manually edit files inside the packages/ or cdn/ output directories. They are automatically regenerated from data/icon-data.json.

🛠️ Key Scripts & Usage

Run these scripts from the repository root:

Package Generation & Builds

Build all downstream packages and CDN assets:
```
npm run build:packages
```
Build individual packages:
- React: npm run build:react
- Angular 20+: npm run build:angular
- Vue 3: npm run build:vue
- Svelte: npm run build:svelte
- Vanilla JS: npm run build:js
- CDN Web Component: npm run build:cdn (followed by npm run build:cdn:min)
- Figma Plugin: npm run build:figma
- VS Code Extension: npm run build:vscode

Website Development & Auditing

Start Vite dev server:
```
npm run dev
```
Production site build (Site compilation + SEO meta prerendering):
```
npm run build
```
Preview the production build:
```
npm run preview
```
Audit website SEO:
```
npm run seo:check
```
Lint codebase / Type-check:
```
npm run lint
```

🎨 Contributing New Icons

Reicon maintains strict design guidelines for consistency:

Format: SVGs must be built on a 24x24 px viewbox.
Stroke: Stroke width and corner radiuses must match existing icons.
Colors: Avoid hardcoded hex codes. Use currentColor so users can change icon colors dynamically.
Weights: Provide both Outline and Filled weights where applicable.
Optimization: Optimize SVGs (e.g. using svgo) to strip editor metadata and minimize path codes.

Step-by-Step Icon Integration:

Open data/icon-data.json.

Insert your new icon inside the appropriate category using lowercase kebab-case:

"my-new-icon": {
  "description": ["tags", "for", "search"],
  "weights": {
    "Outline": { "code": "<path ... />" },
    "Filled": { "code": "<path ... />" }
  }
}

Compile all packages:
```
npm run build:packages
```
Run npm run dev to preview your changes on the local site.

💻 Submitting Code Changes

Create a branch:

git checkout -b feature/your-feature-name
# OR
git checkout -b fix/bug-description

Make your changes and verify type safety:
```
npm run lint
npm run build
```

Commit using Conventional Commits:

feat: add my-new-icon
fix: adjust alignment of close icon
docs: improve installation instructions

Push and open a Pull Request against the main branch.