The Icon component creates customizable, interactive pixel-based icons. It supports hover effects, color changes, and pixel shape customization.
Installation
npx shadcn@latest add "https://bucharitesh.in/r/pixel-icon"Props
| Prop | Type | Description | Default |
|---|---|---|---|
| icon | number[][] | 2D array representing the icon's pixel layout | |
| baseColor | string | Base color of the icon | |
| flickerColor | string | Color used for the flicker effect | |
| secondaryColor | string | Secondary color for additional details | "gray" |
| size | number | Size of the icon in pixels | 80 |
| flickerChance | number | Probability of pixel color change on hover (0 to 1) | 0.3 |
| pixelShape | "circle" | "square" | Shape of individual pixels | "circle" |
| className | string | Additional CSS classes for the icon container |
Usage
import PixelIcon from "./PixelIcon";
const MyComponent = () => {
const iconData = [
[1, 1, 1],
[1, 0, 1],
[1, 1, 1],
];
return (
<PixelIcon
icon={iconData}
baseColor="#ff0000"
flickerColor="#ffff00"
secondaryColor="#0000ff"
size={100}
flickerChance={0.5}
pixelShape="square"
/>
);
};Credits
- Credit to @rauno for this beautiful blog :)