# dqev/reicon architecture

> Architecture diagram of the GitHub repository dqev/reicon, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dqev/reicon
- Repository: https://github.com/dqev/reicon
- Video tour (about a minute): https://gitdiagram.com/dqev/reicon/video

## Overview

Reicon combines an icon-discovery website with framework-specific icon packages and MCP tooling. A visitor browses or searches icons, opens a detail view to preview styles and copy or download assets, and can consult package guidance or install an integration. The README documents adapters beyond the sampled source; their internal wiring is therefore summarized at package level. MCP components are represented from the tree, with no speculative internal call chain.

Main entry points: [`apps/web/src/App.tsx`](https://github.com/dqev/reicon/blob/main/apps/web/src/App.tsx) (App router), [`apps/web/src/pages/icon`](https://github.com/dqev/reicon/tree/main/apps/web/src/pages/icon) (Icon detail), [`packages/reicon-mcp/src/server/index.ts`](https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/server/index.ts) (MCP server), [`packages/reicon-mcp/src/server/tools`](https://github.com/dqev/reicon/tree/main/packages/reicon-mcp/src/server/tools) (MCP tools)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Website experience"]
  node_app["App router<br/>[App.tsx]"]
  node_home["Home playground"]
  node_catalog["Icon catalog"]
  node_searchhook["Search hook<br/>[useIconSearch.ts]"]
  node_searchdata["Search data<br/>[search-data.ts]"]
  node_detail["Icon detail"]
  node_icondata["Icon data loader<br/>[icon-data.ts]"]
  node_reiconloader["Runtime loader<br/>[reicon-loader.ts]"]
  node_duotone["Duotone data<br/>[useDuotoneData.ts]"]
  node_downloads["Raster export<br/>[download-raster.ts]"]
  node_docs["Docs pages"]
  node_packagespage["Package directory"]
end

subgraph group_runtime["Icon runtimes"]
  node_reactpkg["React package<br/>[createIcon.js]"]
  node_jspkg["JavaScript package<br/>[createIcon.js]"]
  node_nativepkg["React Native package<br/>[createIcon.js]"]
  node_frameworkpkgs["Framework packages"]
end

subgraph group_mcp["MCP tooling"]
  node_mcpserver["MCP server<br/>[index.ts]"]
  node_mcptools["MCP tools"]
  node_mcpsearch["MCP search<br/>[search.ts]"]
  node_mcpindex["MCP index<br/>[load-index.ts]"]
end

subgraph group_ecosystem["Design integrations"]
  node_figma["Figma plugin<br/>[code.ts]"]
  node_vscode["VS Code extension<br/>[extension.js]"]
end

node_visitor(("Visitor"))
node_client(("MCP client"))

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_catalog
node_app -->|"routes"| node_detail
node_app -->|"routes"| node_docs
node_app -->|"routes"| node_packagespage
node_searchhook -->|"queries"| node_searchdata
node_detail -->|"loads data"| node_icondata
node_detail -->|"waits for"| node_reiconloader
node_detail -->|"exports raster"| node_downloads
node_detail -->|"reads styles"| node_duotone
node_client -->|"connects"| node_mcpserver
node_mcpserver -->|"dispatches"| node_mcptools
node_mcptools -->|"searches"| node_mcpsearch
node_mcpsearch -->|"loads index"| node_mcpindex

click node_app "https://github.com/dqev/reicon/blob/main/apps/web/src/App.tsx"
click node_home "https://github.com/dqev/reicon/tree/main/apps/web/src/pages/home"
click node_catalog "https://github.com/dqev/reicon/tree/main/apps/web/src/pages/icons"
click node_searchhook "https://github.com/dqev/reicon/blob/main/apps/web/src/hooks/useIconSearch.ts"
click node_searchdata "https://github.com/dqev/reicon/blob/main/apps/web/src/data/search-data.ts"
click node_detail "https://github.com/dqev/reicon/tree/main/apps/web/src/pages/icon"
click node_icondata "https://github.com/dqev/reicon/blob/main/apps/web/src/lib/icon-data.ts"
click node_reiconloader "https://github.com/dqev/reicon/blob/main/apps/web/src/lib/reicon-loader.ts"
click node_duotone "https://github.com/dqev/reicon/blob/main/apps/web/src/hooks/useDuotoneData.ts"
click node_downloads "https://github.com/dqev/reicon/blob/main/apps/web/src/lib/download-raster.ts"
click node_docs "https://github.com/dqev/reicon/tree/main/apps/web/src/pages"
click node_packagespage "https://github.com/dqev/reicon/tree/main/apps/web/src/pages/packages"
click node_reactpkg "https://github.com/dqev/reicon/blob/main/packages/reicon-react/src/createIcon.js"
click node_jspkg "https://github.com/dqev/reicon/blob/main/packages/reicon/src/createIcon.js"
click node_nativepkg "https://github.com/dqev/reicon/blob/main/packages/reicon-react-native/src/createIcon.js"
click node_frameworkpkgs "https://github.com/dqev/reicon/tree/main/packages"
click node_mcpserver "https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/server/index.ts"
click node_mcptools "https://github.com/dqev/reicon/tree/main/packages/reicon-mcp/src/server/tools"
click node_mcpsearch "https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/core/search.ts"
click node_mcpindex "https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/core/load-index.ts"
click node_figma "https://github.com/dqev/reicon/blob/main/packages/reicon-figma/Reicon/code.ts"
click node_vscode "https://github.com/dqev/reicon/blob/main/packages/reicon-vscode/extension.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_home,node_catalog,node_searchhook,node_searchdata,node_detail,node_icondata,node_reiconloader,node_duotone,node_downloads,node_docs,node_packagespage,node_client toneBlue
class node_reactpkg,node_jspkg,node_nativepkg,node_frameworkpkgs toneAmber
class node_mcpserver,node_mcptools,node_mcpsearch,node_mcpindex toneMint
class node_figma,node_vscode toneRose
class node_visitor toneIndigo
```

## Components

### Website experience

- [App router](https://github.com/dqev/reicon/blob/main/apps/web/src/App.tsx): `apps/web/src/App.tsx`
- [Home playground](https://github.com/dqev/reicon/tree/main/apps/web/src/pages/home): `apps/web/src/pages/home`
- [Icon catalog](https://github.com/dqev/reicon/tree/main/apps/web/src/pages/icons): `apps/web/src/pages/icons`
- [Search hook](https://github.com/dqev/reicon/blob/main/apps/web/src/hooks/useIconSearch.ts): `apps/web/src/hooks/useIconSearch.ts`
- [Search data](https://github.com/dqev/reicon/blob/main/apps/web/src/data/search-data.ts): `apps/web/src/data/search-data.ts`
- [Icon detail](https://github.com/dqev/reicon/tree/main/apps/web/src/pages/icon): `apps/web/src/pages/icon`
- [Icon data loader](https://github.com/dqev/reicon/blob/main/apps/web/src/lib/icon-data.ts): `apps/web/src/lib/icon-data.ts`
- [Runtime loader](https://github.com/dqev/reicon/blob/main/apps/web/src/lib/reicon-loader.ts): `apps/web/src/lib/reicon-loader.ts`
- [Duotone data](https://github.com/dqev/reicon/blob/main/apps/web/src/hooks/useDuotoneData.ts): `apps/web/src/hooks/useDuotoneData.ts`
- [Raster export](https://github.com/dqev/reicon/blob/main/apps/web/src/lib/download-raster.ts): `apps/web/src/lib/download-raster.ts`
- [Docs pages](https://github.com/dqev/reicon/tree/main/apps/web/src/pages): `apps/web/src/pages`
- [Package directory](https://github.com/dqev/reicon/tree/main/apps/web/src/pages/packages): `apps/web/src/pages/packages`

### Icon runtimes

- [React package](https://github.com/dqev/reicon/blob/main/packages/reicon-react/src/createIcon.js): `packages/reicon-react/src/createIcon.js`
- [JavaScript package](https://github.com/dqev/reicon/blob/main/packages/reicon/src/createIcon.js): `packages/reicon/src/createIcon.js`
- [React Native package](https://github.com/dqev/reicon/blob/main/packages/reicon-react-native/src/createIcon.js): `packages/reicon-react-native/src/createIcon.js`
- [Framework packages](https://github.com/dqev/reicon/tree/main/packages): `packages`

### MCP tooling

- [MCP server](https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/server/index.ts): `packages/reicon-mcp/src/server/index.ts`
- [MCP tools](https://github.com/dqev/reicon/tree/main/packages/reicon-mcp/src/server/tools): `packages/reicon-mcp/src/server/tools`
- [MCP search](https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/core/search.ts): `packages/reicon-mcp/src/core/search.ts`
- [MCP index](https://github.com/dqev/reicon/blob/main/packages/reicon-mcp/src/core/load-index.ts): `packages/reicon-mcp/src/core/load-index.ts`

### Design integrations

- [Figma plugin](https://github.com/dqev/reicon/blob/main/packages/reicon-figma/Reicon/code.ts): `packages/reicon-figma/Reicon/code.ts`
- [VS Code extension](https://github.com/dqev/reicon/blob/main/packages/reicon-vscode/extension.js): `packages/reicon-vscode/extension.js`

### Other components

- **Visitor**
- **MCP client**

## Connections

- Visitor → App router: opens
- App router → Home playground: routes
- App router → Icon catalog: routes
- App router → Icon detail: routes
- App router → Docs pages: routes
- App router → Package directory: routes
- Search hook → Search data: queries
- Icon detail → Icon data loader: loads data
- Icon detail → Runtime loader: waits for
- Icon detail → Raster export: exports raster
- Icon detail → Duotone data: reads styles
- MCP client → MCP server: connects
- MCP server → MCP tools: dispatches
- MCP tools → MCP search: searches
- MCP search → MCP index: loads index