hyperfusion-icons/README.md

The ultimate collection of 3000+ modern React SVG icons with smart dynamic color and size support for brand logos, UI elements, and business icons

# Hyperfusion Icons

The ultimate collection of **3,000+ modern SVG icons** for web and mobile applications. This comprehensive package includes brand logos, UI elements, business icons, cryptocurrency symbols, and much more.

## 🎨 What's Included

- **1,715+ Brand Icons** - Social media, tech companies, platforms
- **500+ Rounded Icons** - Smooth, modern UI elements  
- **414+ Sharp Icons** - Clean, precise interface icons
- **400+ Business & Finance Icons** - Banking, crypto, payments
- **Multiple Variants** - Circle, square, rounded styles
- **Multiple Colors** - Black, white, multicolor versions
- **Multiple Sizes** - Standard, @256px, @512px variants

## 📦 Installation

```bash
npm install hyperfusion-icons
```

## 🚀 Usage

### CommonJS (Node.js)

```javascript
const { NameFacebookTypeCircleColorTypeMulticolour, SharpHomeSharp, Analytics } = require('hyperfusion-icons');

// Use individual icons
console.log(NameFacebookTypeCircleColorTypeMulticolour); // Returns SVG string

// Or import all icons
const allIcons = require('hyperfusion-icons');
console.log(allIcons.NameGoogleTypeSquareColorTypeBlack);
```

### ES Modules

```javascript
import { NameTwitterTypeCircleColorTypeBlack, RoundedUser, CreditCard } from 'hyperfusion-icons';
// or
import allIcons from 'hyperfusion-icons';

// Use in your application
const iconSvg = NameTwitterTypeCircleColorTypeBlack;
```

### React Example

```jsx
import React from 'react';
import { NameInstagramTypeRoundedColorTypeMulticolour, SharpSearchSharp } from 'hyperfusion-icons';

function MyComponent() {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: NameInstagramTypeRoundedColorTypeMulticolour }} />
      <div dangerouslySetInnerHTML={{ __html: SharpSearchSharp }} />
    </div>
  );
}
```

### React Component Wrapper

For better React integration with dynamic colors and sizes:

```jsx
import React from 'react';
import * as Icons from 'hyperfusion-icons';

const HyperfusionIcon = ({ 
  name, 
  size = 24, 
  color = 'currentColor', 
  strokeWidth = 2,
  className = '',
  style = {},
  ...props 
}) => {
  const iconSvg = Icons[name];
  
  if (!iconSvg) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }
  
  // Replace hardcoded colors and sizes with dynamic values
  let processedSvg = iconSvg
    .replace(/stroke="[^"]*"/g, `stroke="${color}"`)
    .replace(/fill="(?!none)[^"]*"/g, `fill="${color}"`)
    .replace(/stroke-width="[^"]*"/g, `stroke-width="${strokeWidth}"`)
    .replace(/width="[^"]*"/g, `width="${size}"`)
    .replace(/height="[^"]*"/g, `height="${size}"`);
  
  return (
    <span 
      className={`hyperfusion-icon ${className}`}
      style={{ display: 'inline-block', lineHeight: 0, ...style }}
      {...props}
      dangerouslySetInnerHTML={{ __html: processedSvg }}
    />
  );
};

// Usage Examples:
<HyperfusionIcon name="NameFacebookTypeCircleColorTypeBlue" size={32} color="#1877F2" />
<HyperfusionIcon name="SharpHomeSharp" size={24} color="currentColor" />
<HyperfusionIcon name="RoundedUser" color="#10B981" strokeWidth={3} />
```

### Tailwind CSS Integration

```tsx
import React from 'react';
import * as Icons from 'hyperfusion-icons';

interface TailwindIconProps extends React.HTMLAttributes<HTMLSpanElement> {
  name: keyof typeof Icons;
  size?: string; // Tailwind size classes like 'w-6 h-6'
  className?: string;
}

const TailwindIcon: React.FC<TailwindIconProps> = ({ 
  name, 
  size = 'w-6 h-6',
  className = '',
  ...props 
}) => {
  const iconSvg = Icons[name];
  
  if (!iconSvg) return null;
  
  // Replace all colors with currentColor for Tailwind compatibility
  let processedSvg = iconSvg
    .replace(/stroke="[^"]*"/g, 'stroke="currentColor"')
    .replace(/fill="(?!none)[^"]*"/g, 'fill="currentColor"')
    .replace(/width="[^"]*"/g, '')
    .replace(/height="[^"]*"/g, '')
    .replace('<svg', '<svg width="100%" height="100%"');
  
  return (
    <span 
      className={`inline-block ${size} ${className}`}
      {...props}
      dangerouslySetInnerHTML={{ __html: processedSvg }}
    />
  );
};

// Usage with Tailwind classes:
<TailwindIcon name="NameLinkedinTypeSquareColorTypeBlue" className="text-blue-600" />
<TailwindIcon name="SharpSettingsSharp" size="w-8 h-8" className="text-gray-700 hover:text-blue-500" />
```

## 📋 Icon Categories

### 🏢 Brand Icons (1,715+)
Popular social media and tech company logos in multiple styles:

- **Social Media**: Facebook, Twitter, Instagram, LinkedIn, TikTok, YouTube, etc.
- **Tech Companies**: Google, Apple, Microsoft, Adobe, etc.  
- **Development**: GitHub, GitLab, VS Code, etc.
- **Communication**: WhatsApp, Telegram, Discord, Slack, etc.
- **Design**: Figma, Sketch, Behance, Dribbble, etc.

**Naming Pattern**: `Name{BrandName}Type{Shape}ColorType{Color}{Size?}`

Examples:
- `NameFacebookTypeCircleColorTypeMulticolour`
- `NameGoogleTypeSquareColorTypeBlack256px`
- `NameInstagramTypeRoundedColorTypeWhite`

### 🔄 Rounded Icons (500+)
Smooth, modern UI elements with rounded edges:

- Navigation: `RoundedArrowBack`, `RoundedArrowForward`, `RoundedHome`
- Actions: `RoundedAdd`, `RoundedEdit`, `RoundedDelete`, `RoundedSave`
- Media: `RoundedPlay`, `RoundedPause`, `RoundedStop`, `RoundedVolumeHigh`
- Communication: `RoundedMail`, `RoundedCall`, `RoundedChatbubble`

**Naming Pattern**: `Rounded{IconName}`

### ⚡ Sharp Icons (414+)  
Clean, precise interface icons with sharp edges:

- Navigation: `SharpArrowBackSharp`, `SharpHomeSharp`, `SharpMenuSharp`
- Actions: `SharpAddSharp`, `SharpSearchSharp`, `SharpSettingsSharp`  
- Media: `SharpPlaySharp`, `SharpCameraSharp`, `SharpImageSharp`
- System: `SharpNotificationsSharp`, `SharpBatteryFullSharp`

**Naming Pattern**: `Sharp{IconName}Sharp`

### 💼 Business & Finance Icons (400+)
Professional icons for financial and business applications:

- **Banking**: `Analytics`, `BankLocator`, `CreditCard`, `WalletMoney`
- **Cryptocurrency**: `CoinsBitcoin`, `CoinsEthereum`, `CoinsDogecoin`, `CoinsXRP`
- **Payments**: `CashlessTransaction`, `UPIDollar`, `PaymentGateways`
- **Investment**: `MutualFunds`, `StockChart`, `GoldInvestment`, `Portfolio`

### 🌍 Country Flags (200+)
Complete collection of world flags:

- `Property1Afghanistan`, `Property1Algeria`, `Property1Australia`
- Available for all major countries and territories

## 🎯 Icon Variants

### Shapes
- **Circle**: Circular background
- **Square**: Square background  
- **Rounded**: Rounded corners

### Colors
- **Black**: Dark theme compatible
- **White**: Light backgrounds
- **Multicolour**: Original brand colors

### Sizes
- **Standard**: Default size
- **@256px**: High resolution 256px
- **@512px**: Ultra high resolution 512px

## 💡 Usage Tips

### Icon Sizing Best Practices

```css
/* Recommended CSS for icon containers */
.icon-container {
  display: inline-block;
  line-height: 0;
}

/* Tailwind equivalent */
.icon-container {
  @apply inline-block leading-none;
}
```

### Finding Icons

With 3000+ icons, use your IDE's autocomplete or search:

```javascript
// Search for brand icons
import { Name... } from 'hyperfusion-icons';

// Search for UI icons  
import { Sharp..., Rounded... } from 'hyperfusion-icons';

// Search for business icons
import { Analytics, CreditCard, Bitcoin... } from 'hyperfusion-icons';
```

## 🔍 Popular Icons

### Most Used Brand Icons
```javascript
import {
  NameFacebookTypeCircleColorTypeMulticolour,
  NameTwitterTypeSquareColorTypeBlack,
  NameInstagramTypeRoundedColorTypeMulticolour,
  NameLinkedinTypeCircleColorTypeBlue,
  NameGoogleTypeSquareColorTypeMulticolour,
  NameYoutubeTypeCircleColorTypeMulticolour
} from 'hyperfusion-icons';
```

### Essential UI Icons
```javascript  
import {
  SharpHomeSharp,
  SharpSearchSharp,
  SharpMenuSharp,
  SharpSettingsSharp,
  RoundedUser,
  RoundedNotifications,
  RoundedMail,
  RoundedHeart
} from 'hyperfusion-icons';
```

### Business & Finance
```javascript
import {
  Analytics,
  CreditCard,
  WalletMoney,
  CoinsBitcoin,
  CoinsEthereum,
  ChartGrowthSuccess,
  DollarCurrency
} from 'hyperfusion-icons';
```

## 🛠️ Development

### Building the Package

```bash
npm run build
```

This regenerates the index files with all available icons.

### File Structure

```
hyperfusion-icons/
├── icons/           # 3000+ SVG source files
├── index.js         # CommonJS exports
├── index.esm.js     # ES Module exports  
├── index.d.ts       # TypeScript definitions
├── build.js         # Build script
└── package.json
```

## 📊 Package Stats

- **Total Icons**: 3,057
- **Package Size**: ~13MB (source SVGs)
- **Compressed Size**: ~2MB (when bundled)
- **Tree Shakeable**: ✅ Import only what you need
- **TypeScript**: ✅ Full type definitions included

## 🔄 Version History

### 2.0.0 (Latest)
- 🎉 **3,000+ icons** - Massive expansion from 57 to 3,057 icons
- 🏢 **1,715 brand icons** - Complete social media and tech company collection
- 🎨 **Multiple variants** - Circle, square, rounded shapes in various colors
- 📱 **High-res versions** - @256px and @512px variants
- 💼 **Business icons** - Banking, crypto, finance, and country flags
- ⚡ **Performance** - Tree-shakeable imports
- 🛠️ **Better DX** - Improved TypeScript support and documentation

### 1.0.24 (Previous)
- Initial release with 57 basic icons

## 📄 License

MIT License - feel free to use in your projects!

## 🤝 Contributing

1. Add your SVG files to the `icons/` directory
2. Run `npm run build` to regenerate the exports
3. Update this README if needed
4. Submit a pull request

## 🆘 Support

- **GitHub Issues**: [Report bugs or request features](https://github.com/proai/hyperfusion-icons/issues)
- **Documentation**: This README covers all usage patterns
- **TypeScript**: Full IntelliSense support included

---

**Made with ❤️ by ProAI** | **3,057 icons and counting!** 🎨