Hyperfusion Icons

A comprehensive collection of modern SVG icons for web and mobile applications. This package contains 57+ carefully crafted icons that can be used in React, Vue, Angular, or any web project.

Installation

npm install hyperfusion-icons

Usage

CommonJS (Node.js)

const { AlertWarning, UserProfile, StarBorder } = require('hyperfusion-icons');

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

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

ES Modules

import { AlertWarning, UserProfile, StarBorder } from 'hyperfusion-icons';
// or
import allIcons from 'hyperfusion-icons';

// Use in your application
const iconSvg = AlertWarning;

React Example

import React from 'react';
import { AlertWarning, StarBorder } from 'hyperfusion-icons';

function MyComponent() {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: AlertWarning }} />
      <div dangerouslySetInnerHTML={{ __html: StarBorder }} />
    </div>
  );
}

React Component Wrapper

For better React integration with dynamic colors and sizes, use this enhanced component:

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="AlertWarning" size={32} color="#3B82F6" />
<HyperfusionIcon name="UserProfile" size={24} color="#10B981" strokeWidth={3} />
<HyperfusionIcon name="ShieldSecurity" color="currentColor" className="my-icon" />

Tailwind CSS Integration

For seamless Tailwind CSS integration with className-based styling:

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="AlertWarning" className="text-red-500" />
<TailwindIcon name="UserProfile" size="w-8 h-8" className="text-blue-600 hover:text-blue-800" />
<TailwindIcon name="ShieldSecurity" className="text-green-500 dark:text-green-400" />

TypeScript Support

For TypeScript projects, use the enhanced version with full type safety:

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

interface HyperfusionIconProps extends React.HTMLAttributes<HTMLSpanElement> {
  name: keyof typeof Icons;
  size?: number | string;
  color?: string;
  strokeWidth?: number;
  className?: string;
  style?: React.CSSProperties;
}

const HyperfusionIcon: React.FC<HyperfusionIconProps> = ({ 
  name, size = 24, color = 'currentColor', strokeWidth = 2, ...props 
}) => {
  // Component implementation (same as above)
};

Vue Example

<template>
  <div v-html="iconSvg"></div>
</template>

<script>
import { AlertWarning } from 'hyperfusion-icons';

export default {
  data() {
    return {
      iconSvg: AlertWarning
    };
  }
};
</script>

Angular Example

import { Component } from '@angular/core';
import { AlertWarning } from 'hyperfusion-icons';

@Component({
  selector: 'app-icon',
  template: '<div [innerHTML]="iconSvg"></div>'
})
export class IconComponent {
  iconSvg = AlertWarning;
}

Available Icons

The package includes the following 57 icons:

• Alert & Warning: AlertWarning
• Arrows & Navigation: ArrowDownChevron, ArrowRightCircle, ArrowsUpDown, DownloadArrow, SendArrow
• Charts & Analytics: ChartBarsGreen, ChartBarsMixed, ChartBarsVertical, ChartGrowthSuccess, ChartLineGraph, ChartTrendUp, TargetBullseye
• UI Controls: CheckboxCheckedAlt, CheckboxChecked, CursorPointer, MenuDotsHorizontal, RefreshSync, SearchMagnify
• Files & Documents: DocumentFile, DocumentText
• Finance: CreditCard, DollarCurrency, DollarCurrencyLarge, WalletMoney
• Security: KeySecurity, LockOutline, LockPadlock, LockPassword, LockSecure, ShieldCheckmark, ShieldSecurity, ShieldSecurityGreen
• User & Profile: UserProfile, UsersGroup, EyeVisible, EyeVisibleAlt, EyeVisibleGreen
• Communication: EmailEnvelope, MynauiMobile
• Media & Design: CoffeeCup, GridLayout, HeadphonesAudio, LightbulbIdea, ProjectorScreen, SparkleStars, StarBorder
• Tech & Development: BasilSortOutline, BuildingOffice, GlobeWorld, InfoCircle, InfoCircleOutline, MaterialSymbolsLightApkInstallOutline, RectangleCard, RectangleSmall, ServerDatabase, StreamlineLogosAppStoreLogoBlock

TypeScript Support

This package includes TypeScript definitions. All icons are typed as strings containing SVG markup.

import { AlertWarning, UserProfile } from 'hyperfusion-icons';

const myIcon: string = AlertWarning; // TypeScript knows this is a string

Icon Sizing Best Practices

For proper icon sizing, ensure your container has the correct CSS properties:

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

/* Or use Tailwind classes */
.icon-container {
  @apply inline-block leading-none;
}

<!-- ✅ Correct: Icons will scale properly -->
<span class="inline-block w-6 h-6 text-blue-500">[SVG]</span>
<span style="display: inline-block; width: 24px; height: 24px; color: blue;">[SVG]</span>

<!-- ❌ Incorrect: Icons might not scale properly -->
<span class="w-6 h-6 text-blue-500">[SVG]</span>

Icon Naming Convention

Icon names are converted from filenames using the following rules:

• Spaces, hyphens, and underscores are removed
• Each word is capitalized (PascalCase)
• Numbers are preserved
• Special characters are converted to underscores

Examples:

• alert-warning.svg → AlertWarning
• user-profile.svg → UserProfile
• material-symbols-light_apk-install-outline.svg → MaterialSymbolsLightApkInstallOutline

File Structure

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

Development

To rebuild the package after adding new icons:

npm run build

This will regenerate the index files with all available 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

Changelog

1.0.0

• Initial release with 57 icons
• CommonJS and ES Module support
• TypeScript definitions
• Comprehensive documentation