{"id":40651601,"url":"https://github.com/azeezabass2005/quickicon","last_synced_at":"2026-01-21T08:26:07.848Z","repository":{"id":318238611,"uuid":"1070450415","full_name":"azeezabass2005/quickicon","owner":"azeezabass2005","description":"Transform SVG files into React components instantly from your clipboard, local files, or remote URLs.","archived":false,"fork":false,"pushed_at":"2025-11-20T07:22:29.000Z","size":183,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-20T09:22:28.745Z","etag":null,"topics":["cli-app","developer-tool","reactjs","rust","rust-cli","svg","svg-icons","typescript"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azeezabass2005.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-06T00:01:13.000Z","updated_at":"2025-11-20T07:22:33.000Z","dependencies_parsed_at":"2025-10-06T02:26:15.319Z","dependency_job_id":"f755bff5-8f89-4e3c-bd47-b5e2f10773ec","html_url":"https://github.com/azeezabass2005/quickicon","commit_stats":null,"previous_names":["azeezabass2005/quickicon"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/azeezabass2005/quickicon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azeezabass2005%2Fquickicon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azeezabass2005%2Fquickicon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azeezabass2005%2Fquickicon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azeezabass2005%2Fquickicon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azeezabass2005","download_url":"https://codeload.github.com/azeezabass2005/quickicon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azeezabass2005%2Fquickicon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28630243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli-app","developer-tool","reactjs","rust","rust-cli","svg","svg-icons","typescript"],"created_at":"2026-01-21T08:26:07.173Z","updated_at":"2026-01-21T08:26:07.843Z","avatar_url":"https://github.com/azeezabass2005.png","language":"Rust","readme":"# QuickIcon CLI\n\n\u003e Transform SVG files into React components instantly from your clipboard, local files, or remote URLs.\n\n![QuickIcon Demo](https://imgur.com/gtwviic.gif)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\u003c!-- [![npm version](https://badge.fury.io/js/quickicon.svg)](https://www.npmjs.com/package/quickicon) --\u003e\n\n## 🚀 What is QuickIcon?\n\nQuickIcon is a blazingly fast command-line tool built with Rust that converts SVG files into ready-to-use React components with proper TypeScript typings, customizable props, and automatic attribute conversion. Stop manually converting SVG attributes to camelCase or wrapping SVGs in component boilerplate!\n\n### ✨ Features\n\n- 📋 **Clipboard Support** - Copy an SVG, run one command\n- 🌐 **Remote URLs** - Fetch SVGs directly from the web\n- 📁 **Local Files** - Process `.svg` files from your filesystem\n- ⚛️ **React Components** - Generates functional components with proper props\n- 🎨 **Smart Defaults** - Automatic size and color props with sensible defaults\n- 📝 **TypeScript \u0026 JavaScript** - Full support for both languages\n- 💾 **Configuration Persistence** - Remember your preferences with `quickicon.json`\n- 🔄 **Attribute Conversion** - Automatic HTML-to-JSX attribute transformation (40+ attributes)\n- ⚡ **Blazingly Fast** - Built with Rust for maximum performance\n- 🌍 **Cross-Platform** - Works on Linux, macOS, and Windows\n\n## 📦 Installation\n\n### Quick Install (Recommended)\n\n#### Linux / macOS\n```bash\ncurl -fsSL https://raw.githubusercontent.com/azeezabass2005/quickicon/main/install.sh | bash\n```\n\n#### Windows (PowerShell - Run as Administrator)\n```powershell\nirm https://raw.githubusercontent.com/azeezabass2005/quickicon/main/install.ps1 | iex\n```\n\n\u003c!-- ### Via npm (All Platforms)\n\n```bash\nnpm install -g quickicon\n```\n\nOr with yarn:\n```bash\nyarn global add quickicon\n``` --\u003e\n\n### Other Installation Methods\n\nSee [INSTALLATION.md](INSTALLATION.md) for:\n- Manual installation\n- Building from source\n- Platform-specific instructions\n- Troubleshooting\n\n## 🎯 Quick Start\n\n### Basic Usage\n\n1. **From Clipboard** (Copy any SVG first)\n```bash\nquickicon --icon-name MyIcon\n```\n\n2. **From Local File**\n```bash\nquickicon --icon-name MyIcon --path ./icons/heart.svg\n```\n\n3. **From Remote URL**\n```bash\nquickicon --icon-name MyIcon --path https://example.com/icon.svg\n```\n\n### Example Output\n\nGiven an SVG input:\n```xml\n\u003csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\u003e\n  \u003cpath d=\"M12 2L2 7l10 5 10-5-10-5z\" fill=\"#000000\" stroke=\"#000000\"/\u003e\n\u003c/svg\u003e\n```\n\nQuickIcon generates (`MyIcon.tsx`):\n```typescript\nimport React, {SVGProps} from \"react\";\n\ninterface MyIconProps extends SVGProps\u003cSVGSVGElement\u003e {\n   size?: `${number}` | number;\n   color?: string;\n}\n\nconst MyIcon = ({ \n    size = 24, \n    color = '#111827', \n    ...props \n} : MyIconProps) =\u003e {\n    return (\n        \u003csvg viewBox=\"0 0 24 24\" fill=\"none\" width={size} height={size} {...props}\u003e\n            \u003cpath d=\"M12 2L2 7l10 5 10-5-10-5z\" fill={color} stroke={color}/\u003e\n        \u003c/svg\u003e\n    );\n};\n\nexport default MyIcon;\n\n// Usage examples:\n// \u003cMyIcon /\u003e\n// \u003cMyIcon size={32} color=\"#3B82F6\" /\u003e\n// \u003cMyIcon className=\"hover:opacity-80\" /\u003e\n```\n\n## 📖 Command Reference\n\n### Options\n\n| Flag | Short | Description | Default |\n|------|-------|-------------|---------|\n| `--icon-name` | `-n` | Name of the React component (required) | - |\n| `--path` | `-p` | Path to local file or remote URL | Clipboard |\n| `--destination` | `-d` | Output directory for the component | `./public/assets/icon` |\n| `--size` | `-s` | The default size props of the component (number) | `24` |\n| `--language` | -l | To change the language to ts or js | `ts` |\n| `--default` | `-D` | Save settings to `quickicon.json` | false |\n\n### Examples\n\n**Generate TypeScript component from clipboard:**\n```bash\nquickicon --icon-name UserIcon\n```\n\n**Generate JavaScript component:**\n```bash\nquickicon --icon-name UserIcon --language javascript\n```\n\n**Custom destination folder:**\n```bash\nquickicon --icon-name UserIcon --destination ./src/components/icons\n```\n\n**Save as default configuration:**\n```bash\nquickicon --icon-name UserIcon --destination ./src/icons --default\n```\n\n**From remote URL:**\n```bash\nquickicon -n GithubIcon -p https://api.iconify.design/mdi/github.svg\n```\n\n**Using npx (no global install needed):**\n```bash\nnpx quickicon --icon-name MyIcon --path ./icon.svg\n```\n\n## ⚙️ Configuration\n\nQuickIcon can save your preferences in a `quickicon.json` file in your project root.\n\n### Creating Configuration\n\nUse the `--default` flag to save current settings:\n```bash\nquickicon --icon-name MyIcon --destination ./src/icons --language javascript --default\n```\n\nThis creates `quickicon.json`:\n```json\n{\n  \"is_javascript\": true,\n  \"destination_folder\": \"./src/icons\"\n}\n```\n\n### Using Saved Configuration\n\nOnce saved, simply run:\n```bash\nquickicon --icon-name AnotherIcon\n```\n\nQuickIcon will use your saved preferences automatically.\n\n## 🔧 How It Works\n\nQuickIcon performs several transformations:\n\n1. **Attribute Conversion**: Converts 40+ SVG attributes to React-compatible camelCase\n   - `fill-rule` → `fillRule`\n   - `stroke-width` → `strokeWidth`\n   - `clip-path` → `clipPath`\n   - `class` → `className`\n   - And many more...\n\n2. **Style Conversion**: Transforms inline styles to React format\n   - `style=\"background-color: red\"` → `style={{ backgroundColor: 'red' }}`\n\n3. **Dimension Props**: Replaces hardcoded dimensions\n   - `width=\"24\"` → `width={size}`\n   - `height=\"24\"` → `height={size}`\n\n4. **Color Props**: Makes colors customizable\n   - `fill=\"#000000\"` → `fill={color}`\n   - `stroke=\"#123456\"` → `stroke={color}`\n\n5. **Props Spreading**: Adds flexibility\n   - Adds `{...props}` to root SVG element for maximum customization\n\n## 🛡️ Supported Formats\n\n### Input Sources\n- ✅ Clipboard text (SVG content)\n- ✅ Local `.svg` files\n- ✅ Local `.txt` files containing SVG\n- ✅ Remote URLs (http/https)\n\n### Output Languages\n- ✅ TypeScript (`.tsx`)\n- ✅ JavaScript (`.jsx`)\n\n### Framework Support\n- ✅ React (v16.8+)\n- ⏳ Vue (coming soon)\n- ⏳ Svelte (coming soon)\n- ⏳ Angular (coming soon)\n\n**Note:** Version 0.1.0 focuses on React. Support for additional frameworks is planned for future releases. Star the repo to stay updated!\n\n## 🎬 Demo\n\n```bash\n# Copy this SVG:\n\u003csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cpath d=\"M12 2L2 7L12 12L22 7L12 2Z\" fill=\"#000000\" stroke=\"#000000\" stroke-width=\"2\"/\u003e\n\u003c/svg\u003e\n\n# Run:\nquickicon --icon-name RocketIcon\n\n# Output: src/assets/icon/RocketIcon.tsx created! ✨\n```\n\n## 🐛 Troubleshooting\n\n### \"Your clipboard text content is not a valid svg\"\n- Ensure you've copied valid SVG markup\n- Check that the SVG starts with `\u003csvg` and ends with `\u003c/svg\u003e`\n- The content must be well-formed XML\n\n### \"An icon already exists at...\"\n- A component with that name already exists at the destination\n- Choose a different name or delete the existing file\n- Or use a different destination folder with `--destination`\n\n### \"Command not found\" after installation\n- **Linux/macOS**: Add `$HOME/.local/bin` to your PATH\n- **Windows**: Restart your terminal after installation\n- See [INSTALLATION.md](INSTALLATION.md) for detailed troubleshooting\n\n### Clipboard issues on Linux\nInstall clipboard utilities:\n```bash\nsudo apt-get install xclip xsel  # For X11\nsudo apt-get install wl-clipboard # For Wayland\n```\n\nFor more troubleshooting, see [INSTALLATION.md](INSTALLATION.md#troubleshooting).\n\n## 🤝 Contributing\n\nContributions are welcome! Here's how you can help:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Development Setup\n\n```bash\n# Clone your fork\ngit clone https://github.com/azeezabass2005/quickicon.git\ncd quickicon\n\n# Build\ncargo build\n\n# Run tests\ncargo test\n\n# Run locally\ncargo run -- --icon-name TestIcon --path ./test.svg\n\n# # Build for npm\n# npm install\n# npm run build\n```\n\n## 📝 Roadmap\n\n- [ ] Interactive mode with prompts\n- [ ] Batch processing multiple SVGs\n- [ ] Custom component templates\n- [ ] RGB/RGBA color support\n- [ ] SVG optimization options\n- [ ] GitHub Action integration\n- [ ] VS Code extension\n- [ ] Figma Plugin\n- [ ] Homebrew formula\n\n## 🏗️ Tech Stack\n\n- **Language**: Rust 🦀\n- **CLI**: [clap](https://github.com/clap-rs/clap)\n- **Clipboard**: [arboard](https://github.com/1Password/arboard)\n- **HTTP**: [reqwest](https://github.com/seanmonstar/reqwest)\n- **Regex**: [regex](https://github.com/rust-lang/regex)\n- **Node Bindings**: [napi-rs](https://napi.rs/)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👏 Acknowledgments\n\n- Built with [Rust](https://www.rust-lang.org/) for blazing performance\n- Inspired by the need to speed up React development workflows\n- Thanks to all contributors and users!\n\n## 📧 Support \u0026 Community\n\n- 🐛 [Report a Bug](https://github.com/azeezabass2005/quickicon/issues/new?labels=bug)\n- 💡 [Request a Feature](https://github.com/azeezabass2005/quickicon/issues/new?labels=enhancement)\n- 💬 [Discussions](https://github.com/azeezabass2005/quickicon/discussions)\n\u003c!-- - 📖 [Documentation](https://github.com/azeezabass2005/quickicon/wiki) --\u003e\n\n## 📊 Stats\n\n![GitHub stars](https://img.shields.io/github/stars/azeezabass2005/quickicon?style=social)\n![GitHub forks](https://img.shields.io/github/forks/azeezabass2005/quickicon?style=social)\n\n---\n\n**Made with ❤️ and ☕ by Fola**\n\nIf QuickIcon saves you time, consider:\n- ⭐ Starring the repo\n- 🐦 Sharing on Twitter\n- 💼 Sharing on LinkedIn\n- ☕ [Buying me a coffee](https://buymeacoffee.com/rustyfola)\n\n**QuickIcon** - Because life's too short for manual SVG conversion! ⚡","funding_links":["https://buymeacoffee.com/rustyfola"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazeezabass2005%2Fquickicon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazeezabass2005%2Fquickicon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazeezabass2005%2Fquickicon/lists"}