# iconode

A modern, developer‑friendly, colorful SVG icon library and website.

- React + TypeScript + Vite
- TailwindCSS with class‑based light/dark
- Framer Motion animations
- Accessible (ARIA labels, keyboard navigation)

Live app (dev): `/` homepage, `/docs` documentation.

## Repository structure

```
src/                        # Icon component library (npm package source)
  categories/               # Icon SVG data by category
  createIcon.tsx            # Icon component factory
  types.ts                  # TypeScript types
  index.ts                  # Package entry point
client/                     # Docs website (SPA) built with Vite + React Router
public/                     # Static assets for the website
```

## Requirements

- Node.js >= 18
- pnpm (preferred)

## Install & run

```bash
pnpm install
pnpm dev          # Dev server (Vite)
# open http://localhost:8080
```

## Build & publish the npm package

```bash
pnpm version patch   # Increment version in package.json
pnpm build           # Builds the icon library with tsup
npm publish --access public
```

Build the docs website:

```bash
pnpm build:site      # Builds SPA to dist/spa
```

## Using the icon package

Once published to npm as `@iconode/react`:

```tsx
import { Icon } from '@iconode/react';

export default function Example() {
  return (
    <div>
      <Icon name='AdobePhotoshop' size={24} aria-label='Adobe Photoshop' />
      <Icon name='VSCode' size={48} className='align-middle' />
    </div>
  );
}
```

Props supported by every icon component:

- `size?: number` (pixels; default 24)
- `className?: string`
- `style?: React.CSSProperties`
- `aria-label?: string`
- `onClick?: (e: React.MouseEvent) => void`

## SEO Implementation

The project includes a pre-configured SEO setup using `react-helmet-async`. To add SEO to your pages:

1. Import the SEO component:

```tsx
import { SEO } from '@/components/SEO';
```

2. Use it in your pages with custom metadata:

```tsx
function YourPage() {
  return (
    <>
      <SEO
        title='Your Page Title'
        description='Your page description for search engines'
        image='/path-to-social-image.png' // Optional: Social media preview image
        canonical='https://your-site/path' // Optional: Canonical URL
        type='website' // Optional: og:type (default: website)
      />
      {/* Your page content */}
    </>
  );
}
```

3. Default SEO values are pre-configured for:

- Base title suffix: "| Iconode"
- Default description
- Open Graph metadata
- Twitter Cards
- Basic PWA metadata

The SEO component automatically handles:

- Title formatting
- Meta descriptions
- Open Graph tags
- Twitter Card metadata
- Canonical URLs
- Mobile viewport settings
- Theme color

## Library authoring

Icons are defined by category files under:

```
src/categories/
  AI.ts
  Apps.ts
  DesignTools.ts
  Frameworks.ts
  Other.ts
  Programming.ts
  Tools.ts
```

Each file exports `const iconsData: IconData[]`, where an `IconData` is:

```ts
interface IconData {
  name: string;
  category: string;
  keywords: string[];
  svgContent: string; // raw <svg>…</svg> with original brand colors/gradients
}
```

The component factory lives at `src/createIcon.tsx` and safely renders colorful SVG using `dangerouslySetInnerHTML` with width/height normalization.

To add an icon:

1. Pick a category file (or create a new one) and append a new `IconData` with original brand SVG (no color stripping).
2. The icon is automatically available — `src/index.ts` auto‑builds components from the data set and re‑exports named icons.

## Accessibility

- All icons accept `aria-label`; default label equals the icon name.
- Keyboard: Enter/Space triggers `onClick` handlers.

## Deploying the website

- Vercel or Render are recommended. Build command: `pnpm build:site`, output directory: `dist/spa`.

## Performance notes

- Glassmorphism is scoped to cards and shells; avoid full‑page heavy blur when possible.
- Animations use short durations (≈120ms) and layout transitions are limited for smoother route changes.

## License

This project is licensed under the [Socheath License](./LICENSE).
