@hugeicons/core-free-icons 3.0.0 → 3.1.1

package/README.md

@@ -1,52 +1,95 @@
 # @hugeicons/core-free-icons
 
-> Hugeicons Core Free Icons Package - Beautiful and customizable icons for your applications
-
-![31c9262e-aeea-4403-9086-3c8b88885cab](https://github.com/hugeicons/hugeicons-react/assets/130147052/ff91f2f0-095a-4c6d-8942-3af4759f9021)
+> Hugeicons core icon package - Raw SVG icon data for use with framework wrappers
 
 ## What is Hugeicons?
 
-Hugeicons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,500+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 45,000+ icons across 10 unique styles.
+Hugeicons is a large icon set for modern web and mobile apps. The free package includes 4,600+ Stroke Rounded icons across 59 categories. The Pro package provides 46,000+ icons across 10 styles with multicolor support for Bulk, Duotone, and Twotone styles.
+
+## How It Works
+
+This package (`@hugeicons/core-free-icons`) provides **raw icon data** - it contains the SVG paths and elements for each icon. To render icons in your app, you need to install the corresponding **framework wrapper**:
+
+| Framework | Wrapper Package |
+|-----------|----------------|
+| React | `@hugeicons/react` |
+| React Native | `@hugeicons/react-native` |
+| Vue | `@hugeicons/vue` |
+| Angular | `@hugeicons/angular` |
+| Svelte | `@hugeicons/svelte` |
 
 ### Key Highlights
-- **4,500+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
-- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
-- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
-- **Tree-Shakeable**: Optimized for modern bundlers with automatic dead code elimination
-- **Optimized Loading**: Individual icon imports reduce bundle size by 99%
+
+- **4,600+ Free Icons**: Stroke Rounded set across 59 categories for unlimited personal and commercial projects
+- **46,000+ Pro Icons, 10 Styles**: Stroke, Solid, Bulk, Duotone, and Twotone families for sharp, rounded, and standard needs
+- **Pixel Perfect Grid**: Built on a 24x24 grid for crisp rendering at any size
+- **Tree Shaking Ready**: Named exports keep bundles lean in modern bundlers
+- **TypeScript Support**: Full type definitions included
 - **Regular Updates**: New icons added regularly to keep up with evolving design trends
 
-> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.
+> **Looking for Pro Icons?** Check out our docs at [hugeicons.com/docs](https://hugeicons.com/docs) for detailed information about pro icons, styles, and advanced usage.
 
-![a40aa766-1b04-4a2a-a2e6-0ec3c492b96a](https://github.com/hugeicons/hugeicons-react/assets/130147052/f82c0e0e-60ae-4617-802f-812cdc7a58da)
+![Hugeicons Icons](https://raw.githubusercontent.com/hugeicons/react/main/assets/icons.png)
 
 ## Installation
 
-This is a core package that provides the raw icons. To use these icons in your project, you'll need to install both this package and the corresponding framework-specific package:
+You must install both this core package AND the wrapper for your framework:
 
 ```bash
-# First, install the core package
-npm install @hugeicons/core-free-icons
-
-# Then install the framework-specific package
-npm install @hugeicons/react          # for React
-# or
-npm install @hugeicons/react-native   # for React Native
-# or
-npm install @hugeicons/vue           # for Vue
-# or
-npm install @hugeicons/angular       # for Angular
-# or
-npm install @hugeicons/svelte        # for Svelte
+# React
+npm install @hugeicons/react @hugeicons/core-free-icons
+
+# React Native
+npm install @hugeicons/react-native @hugeicons/core-free-icons
+
+# Vue
+npm install @hugeicons/vue @hugeicons/core-free-icons
+
+# Angular
+npm install @hugeicons/angular @hugeicons/core-free-icons
+
+# Svelte
+npm install @hugeicons/svelte @hugeicons/core-free-icons
 ```
 
 ## Usage
 
+### React Example
+
+```jsx
+import { HugeiconsIcon } from '@hugeicons/react';
+import { SearchIcon } from '@hugeicons/core-free-icons';
+
+function App() {
+  return (
+    <HugeiconsIcon
+      icon={SearchIcon}
+      size={24}
+      color="currentColor"
+    />
+  );
+}
+```
+
+### Vue Example
+
+```vue
+<template>
+  <HugeiconsIcon :icon="SearchIcon" :size="24" />
+</template>
+
+<script setup>
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { SearchIcon } from '@hugeicons/core-free-icons';
+</script>
+```
+
 ### Import Methods
 
 This package now supports multiple import methods for maximum flexibility:
 
 #### 1. Static Import (Tree-shakeable)
+
 Best for production builds when you know which icons you need:
 
 ```javascript
@@ -54,13 +97,15 @@ import { Home01Icon, User01Icon } from '@hugeicons/core-free-icons';
 ```
 
 #### 2. Dynamic Import - Full Bundle
+
 Loads the entire icon library (use when you need many icons dynamically):
 
 ```javascript
 const { Home01Icon } = await import('@hugeicons/core-free-icons');
 ```
 
-#### 3. Dynamic Import - Individual Icons (NEW ✨)
+#### 3. Dynamic Import - Individual Icons
+
 Loads only the specific icon you need (99% smaller bundle size):
 
 ```javascript
@@ -91,27 +136,28 @@ import { UserIcon, HomeIcon } from '@hugeicons/core-free-icons';
 // Result: Only UserIcon and HomeIcon (~1.5KB) instead of entire library (~5MB)
 ```
 
-**Requirements for tree-shaking:**
-- Use a modern bundler (Webpack 5+, Rollup, Vite, Parcel)
-- Ensure your bundler has tree-shaking enabled
-- The package automatically sets `sideEffects: false` for optimal tree-shaking
+- **Requirements for tree-shaking:**
+  - Use a modern bundler (Webpack 5+, Rollup, Vite, Parcel)
+  - Ensure your bundler has tree-shaking enabled
+  - The package automatically sets `sideEffects: false` for optimal tree-shaking
 
 ## Features
 
-- 🎯 **Individual Icon Imports**: Load only what you need with 99% bundle size reduction
-- 🌳 **Tree-shakeable**: Optimized for modern bundlers
-- 📦 **Multiple Import Methods**: Static, dynamic bundle, or dynamic individual
-- 🔷 **TypeScript Support**: Full type definitions included
-- 📱 **Framework Agnostic**: Works with any JavaScript framework
-- ⚡ **Optimized Performance**: Lazy load icons on demand
-- 🎨 **Customizable**: Easy to style with CSS or inline styles
-- ✅ **ESM & CommonJS**: Support for both module systems
-- 🚀 **Zero Dependencies**: No external dependencies
-- 🔄 **Regular Updates**: New icons added frequently
+- **Individual Icon Imports**: Load only what you need with 99% bundle size reduction
+- **Tree-shakeable**: Optimized for modern bundlers
+- **Multiple Import Methods**: Static, dynamic bundle, or dynamic individual
+- **TypeScript Support**: Full type definitions included
+- **Framework Agnostic**: Works with any JavaScript framework
+- **Optimized Performance**: Lazy load icons on demand
+- **Customizable**: Easy to style with CSS or inline styles
+- **ESM & CommonJS**: Support for both module systems
+- **Zero Dependencies**: No external dependencies
+- **Regular Updates**: New icons added frequently
 
 ## Framework Support
 
 Hugeicons provides dedicated packages for various frameworks:
+
 - [@hugeicons/react](https://www.npmjs.com/package/@hugeicons/react) - For React applications
 - [@hugeicons/react-native](https://www.npmjs.com/package/@hugeicons/react-native) - For React Native applications
 - [@hugeicons/vue](https://www.npmjs.com/package/@hugeicons/vue) - For Vue applications
@@ -126,4 +172,4 @@ TypeScript types are included and will work out of the box.
 
 ## License
 
-Created by Hugeicons. All rights reserved. 
+Created by Hugeicons. All rights reserved.