halo-icons-react

A customizable React icon library with two-color support, built with TypeScript.

Installation

npm install halo-icons-react

Features

• 🎨 Two-color customization - Control primary and secondary colors
• 📏 Adjustable stroke width - Dynamically control icon thickness
• 📦 Tree-shakeable - Import only the icons you need
• 🔷 TypeScript support - Full type definitions included
• ⚡ Lightweight - Optimized SVG components
• 🎯 React-ready - Works seamlessly with React 16.8+

Demo

Usage

Basic Usage

import { AnnualLeave, Dashboard, HaloIcon } from 'halo-icons-react';

function App() {
  return (
    <div>
      <AnnualLeave />
      <Dashboard />
      <HaloIcon />
    </div>
  );
}

Customizing Colors

Primary Color (via CSS)

The primary color inherits from the parent's text color:

<AnnualLeave style={{ color: 'blue' }} />
<Dashboard className="text-primary" />

Secondary Color (via prop)

Control the secondary/accent color using the secondaryColor prop:

<AnnualLeave secondaryColor="green" />
<SickLeave secondaryColor="#ff6b6b" />

Both Colors

Combine both customization methods:

<AnnualLeave 
  style={{ color: 'navy' }} 
  secondaryColor="gold" 
/>

Size Customization

Icons default to 1em (inherit font size). Customize via CSS:

<HaloIcon style={{ fontSize: '24px' }} />
<Dashboard style={{ width: '32px', height: '32px' }} />

Stroke Width Customization

Control the thickness of icon strokes using the strokeWidth prop (default: 2):

<Dashboard strokeWidth={1} />  {/* Thinner */}
<Dashboard strokeWidth={3} />  {/* Thicker */}
<Dashboard strokeWidth={1.5} /> {/* Custom thickness */}

Combine with other customizations:

<Dashboard 
  style={{ color: 'blue', fontSize: '32px' }} 
  strokeWidth={2.5}
  secondaryColor="orange"
/>

Additional Props

All standard SVG props are supported:

<AnnualLeave 
  className="my-icon"
  onClick={() => console.log('clicked')}
  aria-label="Annual Leave Icon"
/>

Available Icons

Leave Icons

• AnnualLeave
• SickLeave
• MaternityLeave
• PaternityLeave
• BereavementLeave
• CircumcisionLeave
• DutyTravelInternational
• DutyTravelNational
• FamilyResponsibilityLeave
• HajjLeave
• UmraLeave
• InitialLeave
• NoPayLeave
• ReleasedFromOffice

Sidebar Icons

• Dashboard
• Employees
• Documents
• Attendance
• Leaves
• Notifications
• Organisation
• Overtime
• Payroll
• Recruitment
• Reports
• Rosters
• Schedule
• Settings
• Workflows

Brand Icons

• HaloIcon
• HaloFooter
• HaloLogoHorizontal
• MaclIcon
• MaclLogo

TypeScript

Full TypeScript support is included. Each icon component accepts:

type IconProps = SVGProps<SVGSVGElement> & {
  secondaryColor?: string;
  strokeWidth?: number; // Default: 2
};

License

MIT

Author

Anas