@iconode/react 2.6.2

package/LICENSE

@@ -0,0 +1,11 @@
+Socheath License
+
+Copyright (c) 2025 Socheath
+
+Permission is granted to use, copy, modify, and distribute this software under the following terms:
+1. You may use this software for personal, educational, or commercial purposes.
+2. You may not use this software for any illegal or unethical activities.
+3. You must include this license in any copies or substantial portions of the software.
+4. The software is provided "as is", without warranty of any kind, express or implied.
+5. In no event shall the authors be liable for any claim, damages, or other liability arising from, out of, or in connection with the software or the use or other dealings in the software.
+For more information, please contact:

package/README.md

@@ -0,0 +1,172 @@
+# 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).