@programmer-molor/my-icons

A collection of 200+ customizable React icons with TypeScript support.

Installation

npm install @programmer-molor/my-icons

or with yarn:

yarn add @programmer-molor/my-icons

Usage

import { HomeIcon, UserIcon, SettingsIcon } from "@programmer-molor/my-icons";

function App() {
  return (
    <div>
      <HomeIcon size={24} color="blue" />
      <UserIcon size={32} color="#333" />
      <SettingsIcon className="my-icon" />
    </div>
  );
}

Props

All icons accept the following props:

| Prop | Type | Default | Description | | ----------- | ------------------ | ---------------- | ---------------------- | | size | number \| string | 24 | Icon size in pixels | | color | string | "currentColor" | Icon color | | className | string | "" | Additional CSS classes | | onClick | () => void | - | Click handler |

Available Icons

This library includes 200+ icons including:

• Navigation: HomeIcon, MenuIcon, ArrowUpIcon, ChevronDownIcon, etc.
• Actions: SearchIcon, EditIcon, TrashIcon, SaveIcon, etc.
• Media: PlayIcon, PauseIcon, VolumeIcon, CameraIcon, etc.
• Social: HeartIcon, StarIcon, ShareIcon, ThumbsUpIcon, etc.
• Devices: SmartphoneIcon, LaptopIcon, MonitorIcon, etc.
• And many more!

Custom Icons

You can also create custom icons using the IconBase component:

import { IconBase, IconProps } from "@programmer-molor/my-icons";

const MyCustomIcon: React.FC<IconProps> = (props) => (
  <IconBase {...props}>
    <path d="M12 2L2 7l10 5 10-5-10-5z" />
    <path d="M2 17l10 5 10-5M2 12l10 5 10-5" />
  </IconBase>
);

License

MIT © Programmer Molor