@hugeicons/core-free-icons 3.1.1 → 4.0.0

package/README.md

@@ -1,95 +1,52 @@
 # @hugeicons/core-free-icons
 
-> Hugeicons core icon package - Raw SVG icon data for use with framework wrappers
+> Hugeicons Core Free Icons Package - Beautiful and customizable icons for your applications
 
-## What is Hugeicons?
-
-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
+![31c9262e-aeea-4403-9086-3c8b88885cab](https://github.com/hugeicons/hugeicons-react/assets/130147052/ff91f2f0-095a-4c6d-8942-3af4759f9021)
 
-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**:
+## What is Hugeicons?
 
-| Framework | Wrapper Package |
-|-----------|----------------|
-| React | `@hugeicons/react` |
-| React Native | `@hugeicons/react-native` |
-| Vue | `@hugeicons/vue` |
-| Angular | `@hugeicons/angular` |
-| Svelte | `@hugeicons/svelte` |
+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 40,000+ icons across 9 unique styles.
 
 ### Key Highlights
-
-- **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
+- **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%
 - **Regular Updates**: New icons added regularly to keep up with evolving design trends
 
-> **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.
+> 📚 **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.
 
-![Hugeicons Icons](https://raw.githubusercontent.com/hugeicons/react/main/assets/icons.png)
+![a40aa766-1b04-4a2a-a2e6-0ec3c492b96a](https://github.com/hugeicons/hugeicons-react/assets/130147052/f82c0e0e-60ae-4617-802f-812cdc7a58da)
 
 ## Installation
 
-You must install both this core package AND the wrapper for your framework:
+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:
 
 ```bash
-# 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
+# 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
 ```
 
 ## 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
@@ -97,15 +54,13 @@ 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
-
+#### 3. Dynamic Import - Individual Icons (NEW ✨)
 Loads only the specific icon you need (99% smaller bundle size):
 
 ```javascript
@@ -136,28 +91,27 @@ 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
@@ -172,4 +126,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.