AD Icons

A beautiful, lightweight SVG icon library for React and Next.js applications. Built with TypeScript, fully tree-shakeable, and designed to work seamlessly with modern React frameworks.

🚀 Features

• ✅ 5 Beautiful Icons - Carefully crafted SVG icons
• ✅ TypeScript Support - Full type definitions included
• ✅ Tree-shakeable - Only bundle the icons you use
• ✅ Next.js Compatible - Works with App Router and Pages Router
• ✅ Fully Customizable - Control size, color, className, and more
• ✅ Zero Dependencies - Only requires React as a peer dependency
• ✅ SSR Ready - Server-side rendering compatible
• ✅ Lightweight - Minimal bundle size impact

📦 Installation

npm install ad-icons

or with yarn:

yarn add ad-icons

or with pnpm:

pnpm add ad-icons

🎯 Usage

Basic Usage

import { Home, Profile, Analysis, Plan, Info } from 'ad-icons';

function App() {
  return (
    <div>
      <Home />
      <Profile />
      <Analysis />
    </div>
  );
}

Custom Size

import { Home } from 'ad-icons';

// Using em units (scales with font-size)
<Home size="2em" />

// Using pixels
<Home size={32} />

// Using other units
<Home size="3rem" />

Custom Color

import { Home } from 'ad-icons';

// Hex color
<Home color="#3B82F6" />

// RGB/RGBA
<Home color="rgb(59, 130, 246)" />

// CSS variable
<Home color="var(--primary-color)" />

// Named color
<Home color="red" />

With Tailwind CSS

import { Home, Profile } from 'ad-icons';

<Home className="w-6 h-6 text-blue-500" />
<Profile className="w-8 h-8 text-gray-700 hover:text-gray-900" />

With Event Handlers

import { Home } from 'ad-icons';

<Home 
  onClick={() => console.log('Clicked!')} 
  onMouseEnter={() => console.log('Hovered')}
/>

Combined Props

import { Analysis } from 'ad-icons';

<Analysis
  size={24}
  color="#FF6B6B"
  className="hover:scale-110 transition-transform"
  style={{ cursor: 'pointer' }}
  onClick={handleClick}
  title="View Analytics"
/>

Next.js App Router

'use client';

import { Home, Profile } from 'ad-icons';

export default function Navigation() {
  return (
    <nav>
      <Home size={24} />
      <Profile size={24} />
    </nav>
  );
}

Next.js Pages Router

import { Home, Profile } from 'ad-icons';

export default function Navigation() {
  return (
    <nav>
      <Home size={24} />
      <Profile size={24} />
    </nav>
  );
}

📚 Available Icons

Core Icons

• Analysis - Analytics/chart icon
• Home - Home icon
• Info - Information icon
• Plan - Planning/document icon
• Profile - User profile icon

ChatSar Icons

• ChatSarAiChat - AI chat interface icon
• ChatSarClose - Close/dismiss icon
• ChatSarCollapse - Collapse/expand icon
• ChatSarDocument - Document/file icon
• ChatSarLogout - Logout/sign out icon
• ChatSarWind - Wind/settings icon

Additional Icons

• Upload - Upload file icon
• UpArrow - Up arrow/scroll up icon

🎨 Props

All icons accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | string \| number | "1em" | Icon size (pixels or any CSS unit) | | color | string | "currentColor" | Icon color | | className | string | undefined | CSS class name | | style | CSSProperties | undefined | Inline styles | | title | string | undefined | Accessible title | | ...props | SVGProps | - | All standard SVG attributes |

🔧 TypeScript

Full TypeScript support is included:

import { IconProps, Home } from 'ad-icons';

const CustomIcon: React.FC<IconProps> = (props) => {
  return <Home {...props} />;
};

📱 Responsive Design

Icons scale with font-size by default:

<div style={{ fontSize: '12px' }}>
  <Home /> {/* 12px */}
</div>

<div style={{ fontSize: '24px' }}>
  <Home /> {/* 24px */}
</div>

🎨 Styling Best Practices

Using currentColor (Recommended)

Icons inherit text color by default:

<div style={{ color: 'blue' }}>
  <Home /> {/* Will be blue */}
</div>

Using Custom Colors

<Home color="#FF0000" />
<Home style={{ fill: '#FF0000' }} />

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• React Native (with react-native-svg)

📄 License

MIT License - feel free to use in personal and commercial projects.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Made with ❤️ for the React community