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 { Frame1, Container, StarBorder } = require('hyperfusion-icons');

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

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

ES Modules

import { Frame1, Container, StarBorder } from 'hyperfusion-icons';
// or
import allIcons from 'hyperfusion-icons';

// Use in your application
const iconSvg = Frame1;

React Example

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

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

React Component Wrapper

For better React integration, you can create a wrapper component:

import React from 'react';

const Icon = ({ name, size = 24, color = 'currentColor', ...props }) => {
  // Import your icons dynamically or statically
  const icons = require('hyperfusion-icons');
  const iconSvg = icons[name];
  
  if (!iconSvg) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }
  
  // Modify SVG to include size and color
  const modifiedSvg = iconSvg
    .replace(/width="[^"]*"/, `width="${size}"`)
    .replace(/height="[^"]*"/, `height="${size}"`)
    .replace(/fill="[^"]*"/g, `fill="${color}"`);
  
  return <div {...props} dangerouslySetInnerHTML={{ __html: modifiedSvg }} />;
};

// Usage
<Icon name="Frame1" size={32} color="#3B82F6" />

Vue Example

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

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

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

Angular Example

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

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

Available Icons

The package includes the following icons:

• Base Icons: BaseIconsRounded, BaseIconsRounded1
• Containers: Container, Container1 through Container10
• Frames: Frame, Frame1 through Frame28
• Vectors: Vector, Vector1, Vector2, Vector3
• Spans: Span, Span1, Span2
• UI Elements: Center, StarBorder, TickSquare, TickSquare1
• Third-party: BasilSortOutline, MaterialSymbolsLightApkInstallOutline, MynauiMobile, StreamlineLogosAppStoreLogoBlock

TypeScript Support

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

import { Frame1, Container } from 'hyperfusion-icons';

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

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:

• Frame-1.svg → Frame1
• Base Icons - Rounded.svg → BaseIconsRounded
• 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