@developershre/icona 2.0.0 → 2.0.2

package/README.md

@@ -1,266 +1,59 @@
-# Icona - Icon Library Generator
+# Icona
 
-A powerful TypeScript icon library generator that creates optimized React, React Native, and Vue components from local or remote SVG sources. Features automatic SVG optimization using SVGO, remote icon fetching from cloud storage, and intelligent nested folder support.
+A lightweight, modern SVG icon library designed for web applications. Built with TypeScript support and framework-agnostic architecture for seamless integration across your projects.
 
-## ✨ Features
-
-- 🎨 **Multi-Framework Support**: Generate components for React, React Native, and Vue
-- 🌐 **Remote Icon Sources**: Fetch icons from GitHub, CDNs, cloud storage (S3, Supabase, etc.)
-- ⚡ **SVG Optimization**: Automatic optimization using SVGO (reduces file sizes by 20-50%)
-- 📁 **Nested Structure**: Maintains folder hierarchies for organized icon categories
-- 🔧 **Environment-Based Config**: Configure sources via environment variables
-- 📦 **Type Safety**: Full TypeScript support with generated components
-- 📤 **Ready-to-Publish**: Build and publish your own icon library
-
-## 🚀 Quick Start
-
-### Installation
+## Installation
 
 ```bash
 npm install @developershre/icona
 ```
 
-### Basic Setup
-
-1. **Configure Environment**: Copy `.env.example` to `.env` and configure your icon source
-2. **Generate Icons**: Run the generator to create components
-3. **Use Components**: Import and use generated icons in your projects
-
-### Local Icons
-
-```bash
-# .env
-ICONS_SOURCE=local
-ICONS_LOCAL_PATH=./icons
-ENABLE_SVG_OPTIMIZATION=true
-```
-
-Place your SVG files in the `icons/` directory and run:
+## Quick Start
 
 ```typescript
-import { generateIcons } from '@developershre/icona';
-await generateIcons();
-```
-
-### Remote Icons (GitHub)
-
-```bash
-# .env
-ICONS_SOURCE=remote
-ICONS_REMOTE_URL=https://api.github.com/repos/feathericons/feather/contents/icons
-ICONS_AUTH_TOKEN=your_github_token_here
-ENABLE_SVG_OPTIMIZATION=true
-```
-
-## 🌐 Remote Sources Support
-
-### GitHub Repositories
-
-Fetch icons directly from GitHub repositories like Feather Icons, Tabler Icons, etc.
-
-```bash
-# .env for GitHub
-ICONS_SOURCE=remote
-ICONS_REMOTE_URL=https://api.github.com/repos/feathericons/feather/contents/icons
-ICONS_AUTH_TOKEN=ghp_your_github_token_here
-```
-
-Examples of popular icon repositories:
-- **Feather**: `https://api.github.com/repos/feathericons/feather/contents/icons`
-- **Tabler**: `https://api.github.com/repos/tabler/tabler-icons/contents/icons`  
-- **Lucide**: `https://api.github.com/repos/lucide-icons/lucide/contents/icons`
-- **Heroicons**: `https://api.github.com/repos/tailwindlabs/heroicons/contents/src`
-
-## ⚡ Generated Components
-
-After running the generator, you'll get framework-specific components:
-
-### React Usage
-
-```tsx
-import { ActivityIcon, AirplayIcon, AlertCircleIcon } from './dist/react';
-
-function App() {
-  return (
-    <div>
-      <ActivityIcon size={24} color="blue" />
-      <AirplayIcon size={32} className="text-red-500" />
-      <AlertCircleIcon size={20} style={{ color: '#green' }} />
-    </div>
-  );
-}
-```
-
-### Vue 3 Usage
-
-```vue
-<template>
-  <div>
-    <ActivityIcon :size="24" color="blue" />
-    <AirplayIcon :size="32" class="text-red-500" />
-    <AlertCircleIcon :size="20" :style="{ color: 'green' }" />
-  </div>
-</template>
-
-<script setup>
-import { ActivityIcon, AirplayIcon, AlertCircleIcon } from './dist/vue';
-</script>
-```
+import { Icon } from 'icona';
 
-### React Native Usage
-
-```tsx
-import { ActivityIcon, AirplayIcon, AlertCircleIcon } from './dist/react-native';
-
-function App() {
-  return (
-    <View>
-      <ActivityIcon size={24} color="blue" />
-      <AirplayIcon size={32} color="red" />
-      <AlertCircleIcon size={20} color="green" />
-    </View>
-  );
+export default function App() {
+  return <Icon name="arrow-right" size={24} />;
 }
 ```
 
-## 🎨 Component Props
-
-All generated components support consistent props:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `number \| string` | `24` | Width and height |
-| `color` | `string` | `'currentColor'` | Icon color |
-| `className` | `string` | - | CSS classes (React/Vue) |
-| `style` | `object` | - | Inline styles |
-| `title` | `string` | - | Accessibility title |
-| `aria-label` | `string` | - | ARIA label |
+## Features
 
-## ⚙️ Configuration
+- **Lightweight SVG Icons** - Minimal file sizes with optimized SVG format
+- **TypeScript Support** - Full type definitions for better development experience
+- **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JavaScript
+- **Customizable** - Control colors, sizes, and stroke widths on the fly
+- **Tree-Shakeable** - Import only the icons you need for smaller bundle sizes
 
-### Environment Variables
+## Available Icons
 
-| Variable | Type | Default | Description |
-|----------|------|---------|-------------|
-| `ICONS_SOURCE` | `local\|remote` | `local` | Source type |
-| `ICONS_LOCAL_PATH` | `string` | `./icons` | Local icons directory |  
-| `ICONS_REMOTE_URL` | `string` | - | GitHub repository URL |
-| `ICONS_AUTH_TOKEN` | `string` | - | GitHub authentication token |
-| `ICONS_TIMEOUT` | `number` | `30000` | Request timeout (ms) |
-| `BUILD_OUTPUT_DIR` | `string` | `./dist` | Output directory |
-| `BUILD_REACT` | `boolean` | `true` | Generate React components |
-| `BUILD_VUE` | `boolean` | `true` | Generate Vue components |
-| `BUILD_REACT_NATIVE` | `boolean` | `true` | Generate RN components |
-| `ENABLE_SVG_OPTIMIZATION` | `boolean` | `true` | Enable SVGO optimization |
+Browse the complete icon collection at the [icon showcase](https://icona.dev/icons).
 
-### Programmatic Configuration
-
-```typescript
-import { generateIcons, reactOnlyConfig } from '@developershre/icona';
-
-// Use environment + custom config
-await generateIcons({
-  config: {
-    output: {
-      directory: './my-icons',
-      react: true,
-      vue: false,
-      reactNative: false
-    },
-    optimization: {
-      enabled: true
-    }
-  }
-});
-```
-
-## 🏗️ Building Your Own Icon Library
-
-### 1. Setup Project
-
-```bash
-mkdir my-icon-library
-cd my-icon-library
-npm init -y
-npm install @developershre/icona
-```
-
-### 2. Configure Icons
-
-```bash
-# .env
-ICONS_SOURCE=remote
-ICONS_REMOTE_URL=https://api.github.com/repos/your-org/your-icons/contents/icons
-ICONS_AUTH_TOKEN=your_github_token
-```
-
-### 3. Generate & Build
-
-```json
-// package.json scripts
-{
-  "scripts": {
-    "generate": "node -e \"require('@developershre/icona').generateIcons()\"",
-    "build": "npm run generate && tsc",
-    "prepublishOnly": "npm run build"
-  }
-}
-```
-
-### 4. Publish
-
-```bash
-npm run build
-npm publish
-```
-
-Now users can install your icon library:
-
-```bash
-npm install your-icon-library
-```
-
-```tsx
-import { YourIcon } from 'your-icon-library/dist/react';
-```
-
-## 🔧 SVG Optimization
-
-Powered by [SVGO](https://github.com/svg/svgo) with sensible defaults:
-
-- Removes comments, metadata, and unused elements
-- Optimizes paths and transforms
-- Reduces file size by 20-50% typically
-- Maintains icon quality and accessibility
-
-Modify optimization in your config or environment:
-
-```bash
-ENABLE_SVG_OPTIMIZATION=true
-```
+## Props
 
-## 📚 Examples
+| Prop          | Type   | Default      | Description                      |
+| ------------- | ------ | ------------ | -------------------------------- |
+| `name`        | string | required     | Icon name identifier             |
+| `size`        | number | 24           | Icon size in pixels              |
+| `color`       | string | currentColor | Icon color (any CSS color value) |
+| `strokeWidth` | number | 2            | Stroke width for outlined icons  |
 
-See working examples in the repository:
-- [Local icons example](./examples/local)
-- [GitHub remote example](./examples/github-remote)
-- [Cloud storage example](./examples/cloud-storage)
+## Browser Support
 
-## 🤝 Contributing
+Compatible with all modern browsers supporting SVG and ES6+.
 
-We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md).
+## Credits
 
-## 📄 License
+Icon designs created and curated by our Figma design team. We extend our gratitude to the Figma community for their contributions to icon design and refinement.
+## Inspiration
 
-MIT License - see [LICENSE](LICENSE) file for details.
+The following resources inspired our icon design:
 
-## 🙏 Attribution
+- [Hicon](https://www.figma.com/community/file/1023171235158207826/hicon-free-icon-pack-2700-editable-icons) - Free icon pack with 2700 editable icons
+- [Wave Icons](https://www.figma.com/community/file/1200076315140068212/wave-icons-essential-icons-community) - Essential icons community collection
 
-Built for the community. Icons in examples may be sourced from:
-- [Feather Icons](https://feathericons.com/)
-- [Tabler Icons](https://tabler-icons.io/)
-- [Lucide Icons](https://lucide.dev/)
 
----
+## License
 
-**Build beautiful, optimized icon libraries from any source! 🎨✨**
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developershre/icona",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A TypeScript icon library generator for React, React Native, and Vue with nested folder support",
   "main": "dist/exports.js",
   "types": "dist/exports.d.ts",