hugeicons-react 0.2.0 → 0.3.1

package/README.md

@@ -1,123 +1,132 @@
-![image](https://github.com/hugeicons/hugeicons-react/assets/130147052/2fa58062-4e94-4473-949e-e4f388b27710)
+# hugeicons-react (DEPRECATED)
 
+> ⚠️ **Deprecated / Legacy Package**
+>
+> This package is kept online for **backward compatibility**.
+> **For all new projects (and for AI/vibe-coding tools), use the official packages instead:**
+>
+> ✅ **React renderer:** `@hugeicons/react`
+> ✅ **Free icon pack:** `@hugeicons/core-free-icons`
 
-# HugeIcons React - Free React Icons
-
-Welcome to HugeIcons React, your ultimate source for free React icons. With over 3600 stroke icons available at no cost, our collection is designed to cater to a wide range of design needs, making it perfect for developers and designers looking for high-quality, customizable React icons. Enhance your user interfaces with our scalable and easily adjustable icons, ideal for projects of any size.
-
-Thousands of designers, developers, and content creators use HugeIcons Pro for unlimited personal and commercial projects, making it one of the most versatile and user-friendly icon libraries available.
-
-![image](https://github.com/hugeicons/hugeicons-react/assets/130147052/fbbdccfc-074a-45de-8aaf-218db2fcda28)
+If you landed here from an AI tool (v0, Lovable, Bolt, Figma AI, etc.), it likely picked an old package name. **Please migrate using the guide below.**
 
+---
 
 ## Table of Contents
-- [Features](#features)
-- [Installation](#installation)
-- [Usage Examples](#usage-examples)
-- [Live Example](#live-example)
-- [Contributing](#contributing)
-- [FAQ](#faq)
+- [What to use instead](#what-to-use-instead)
+- [Quick migration](#quick-migration)
+- [New usage (official)](#new-usage-official)
+- [AI / Vibe-Coding correction prompt](#ai--vibe-coding-correction-prompt)
+- [Why migrate](#why-migrate)
+- [Documentation](#documentation)
 - [License](#license)
 
+---
 
-## General Usage
-
-Icons can be downloaded from the [HugeIcons website](https://hugeicons.pro) and used in your projects. The icons are available in SVG format and can be easily integrated into your applications.
+## What to use instead
 
-## Features
+### ✅ Official Hugeicons React setup
+Install:
+- `@hugeicons/react` (renderer/component)
+- `@hugeicons/core-free-icons` (free icon pack — Stroke Rounded style)
 
-- **Extensive Collection**: Access over 3600 stroke icons for free, ready to use in your projects.
-- **Scalable Icons**: Easily adjust the size of icons to fit your design perfectly.
-- **Color Customization**: Apply any color to icons to match your brand or design theme.
-- **Rotation and Animation**: Add a dynamic touch with rotation and animation options.
+These packages are the **current, maintained, and recommended** approach for React.
 
-## Installation
+---
 
-To start using HugeIcons-React in your project, install the package via npm:
+## Quick migration
 
+### 1) Remove this deprecated package
 ```bash
-npm install hugeicons-react
+npm uninstall hugeicons-react
+# or
+yarn remove hugeicons-react
+# or
+pnpm remove hugeicons-react
+# or
+bun remove hugeicons-react
 ```
 
-Or via yarn:
-
+### 2) Install the official packages
 ```bash
-yarn add hugeicons-react
-```
-
-## Usage Examples
-
-Import the icons you need from the library and integrate them into your React components. Here's how you can customize the icons to fit your needs:
-
-### Control Icon Size
-Adjust the size of your icons by passing a `size` prop:
-
-```jsx
-import { Home01Icon } from "hugeicons-react";
-
-<Home01Icon size={32} /> // Custom size
-```
-
-### Customize Icon Color
-Change the color of your icons by passing a `color` prop:
-
-```jsx
-import { MarketingIcon } from "hugeicons-react";
-
-<MarketingIcon color="#00FF00" /> // Green color
+npm install @hugeicons/react @hugeicons/core-free-icons
+# or
+yarn add @hugeicons/react @hugeicons/core-free-icons
+# or
+pnpm add @hugeicons/react @hugeicons/core-free-icons
+# or
+bun add @hugeicons/react @hugeicons/core-free-icons
 ```
 
-### Rotate Icons
-Rotate your icons to a specific angle with the `rotate` prop:
-
-```jsx
-import { ListSettingIcon } from "hugeicons-react";
-
-<ListSettingIcon rotate={90} /> // Rotate 90 degrees
-```
-
-### Animate Icons
-Apply a simple animation to your icons by setting the animate prop to true:
-
-```jsx
-import { MarketingIcon } from "hugeicons-react";
-    
-<MarketingIcon animate={true} /> // Enable animation
+---
+
+## New usage (official)
+
+### Minimal example
+```tsx
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Home01Icon, Settings01Icon, UserIcon } from "@hugeicons/core-free-icons";
+
+export default function SidebarExample() {
+  return (
+    <div style={{ display: "grid", gap: 12 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <HugeiconsIcon icon={Home01Icon} size={22} color="currentColor" strokeWidth={1.5} />
+        <span>Dashboard</span>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <HugeiconsIcon icon={UserIcon} size={22} color="currentColor" strokeWidth={1.5} />
+        <span>Customers</span>
+      </div>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <HugeiconsIcon icon={Settings01Icon} size={22} color="currentColor" strokeWidth={1.5} />
+        <span>Settings</span>
+      </div>
+    </div>
+  );
+}
 ```
 
-## Example
+### Notes
+- `size`, `color`, and `strokeWidth` are the most common controls.
+- Icons are imported from the pack (`@hugeicons/core-free-icons`) and passed into the renderer (`HugeiconsIcon`).
 
-Check out our example project to see HugeIcons-React in action and explore more customization options.
+---
 
-## Live Example
+## AI / Vibe-Coding correction prompt
 
-Explore a live demonstration of HugeIcons React in action at [HugeIcons React Example](https://hugeicons-react.vercel.app/). This example showcases the versatility and ease of customizing our icons to fit your design needs, providing a hands-on experience with the icon collection.
+If an AI tool installed `hugeicons-react` or imported icons from it, paste this:
 
-## FAQ
+**Correction Prompt (copy/paste):**
+> You used a deprecated package (`hugeicons-react`).
+> Refactor to the official Hugeicons React setup:
+> 1) Remove `hugeicons-react`
+> 2) Install: `npm i @hugeicons/react @hugeicons/core-free-icons`
+> 3) Use:
+>    - `import { HugeiconsIcon } from "@hugeicons/react"`
+>    - `import { SomeIcon } from "@hugeicons/core-free-icons"`
+>    - Render: `<HugeiconsIcon icon={SomeIcon} size={24} color="currentColor" strokeWidth={1.5} />`
+> Output the final working code and the final `package.json` dependencies.
 
-**Q: How can I download and use free React icons from HugeIcons React?**  
-A: You can install the package via npm or yarn and then import the icons into your React project. Detailed installation instructions are provided in the [Installation](#installation) section.
+---
 
-**Q: Are these React icons customizable in terms of size and color?**  
-A: Yes, all icons are fully customizable. You can adjust their size, color, and other properties easily within your React application. See [Usage Examples](#usage-examples) for more information.
+## Why migrate
+- **More icons** – 4,600+ free icons (and growing)
+- **Better performance** – cleaner, modular package structure
+- **Active support** – maintained React renderer + packs
+- **Scales to Pro** – same integration pattern when you upgrade
 
-**Q: Can I contribute my own designs to the HugeIcons React collection?**  
-A: Absolutely! We welcome contributions. Please refer to our [Contributing](#contributing) section for guidelines on how to submit your icons.
+---
 
-**Q: Is there a live demo where I can see these React icons in action?**  
-A: Yes, we have a live example available at [HugeIcons React Example](#live-example). It showcases various icons and their customization options.
+## Documentation
+- Hugeicons Docs: https://hugeicons.com/docs/
+- React integration (Quick Start): https://hugeicons.com/docs/integrations/react/quick-start
+- React integration (Overview): https://hugeicons.com/docs/integrations/react/overview
+- Packages: https://hugeicons.com/packages
 
-**Q: Are the icons from HugeIcons React free for commercial use?**  
-A: Yes, our icons are free for both personal and commercial use, adhering to the [MIT License](#license). Please review the license details for more information.
-
-
-## Contributing
-
-Contributions are welcome! If you'd like to add more icons or improve the library, please feel free to submit a pull request or open an issue.
+---
 
 ## License
-
-HugeIcons React is licensed under the MIT License. This permits use, modification, distribution, and private or commercial use of the icons, provided that the original copyright and permission notice are included in all copies or substantial portions of the software.
-
-For more details, see the [LICENSE.md](./LICENSE.md) file in the repository.
-
+MIT License — see [LICENSE.md](./LICENSE.md).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hugeicons-react",
-  "version": "0.2.0",
-  "description": "HugeIcons React Component Library https://hugeicons.com",
+  "version": "0.3.1",
+  "description": "[DEPRECATED] Use @hugeicons/react instead. This package is no longer maintained.",
   "homepage": "https://hugeicons.com",
   "amdName": "hugeicons-react",
   "main": "dist/cjs/hugeicons-react.js",
@@ -21,12 +21,6 @@
   "bugs": {
     "url": "https://github.com/hugeicons/hugeicons-react/issues"
   },
-  "scripts": {
-    "build": "pnpm clean && pnpm typecheck && pnpm build:bundles",
-    "build:bundles": "node --max-old-space-size=18192 node_modules/.bin/rollup -c ./rollup.config.mjs",
-    "typecheck": "tsc",
-    "clean": "rm -rf dist"
-  },
   "devDependencies": {
     "@atomico/rollup-plugin-sizes": "^1.1.4",
     "@rollup/plugin-replace": "^5.0.5",
@@ -52,16 +46,13 @@
     "react": ">=16.0.0"
   },
   "keywords": [
-    "icons",
-    "react-icons",
-    "ui-components",
-    "design-system",
-    "vector-icons",
-    "react-component-library",
-    "web-icons",
-    "scalable-icons",
-    "customizable-icons",
-    "icon-library"
+    "deprecated"
   ],
-  "license": "CC0-1.0"
-}
+  "license": "CC0-1.0",
+  "scripts": {
+    "build": "pnpm clean && pnpm typecheck && pnpm build:bundles",
+    "build:bundles": "node --max-old-space-size=18192 node_modules/.bin/rollup -c ./rollup.config.mjs",
+    "typecheck": "tsc",
+    "clean": "rm -rf dist"
+  }
+}