Magdy Atef Zahran

التعامل مع الأيقونات في Tailwind (Heroicons – Lucide)

🎨 أنواع الأيقونات:

Heroicons = أيقونات جاهزة مصممة مخصوص لـ Tailwind (SVGs بسيطة واحترافية).
Lucide = مكتبة أيقونات حديثة، مفتوحة المصدر، وخفيفة.

استخدام Heroicons مع Tailwind:

لو شغال بـ React:

npm install @heroicons/react

وبعدين تستخدمها كـ Component:

import { HomeIcon } from "@heroicons/react/24/solid"; export default function Navbar() { return ( <nav className="flex items-center space-x-2"> <HomeIcon className="w-6 h-6 text-blue-500" /> <span>Home</span> </nav> ); }

Tailwind بيسهّل عليك تغيير اللون والحجم مباشرة بالـ classes (w-6 h-6 text-blue-500).

استخدام Lucide مع Tailwind:

npm install lucide-react

import { Search } from "lucide-react"; export default function SearchBar() { return ( <div className="flex items-center border rounded p-2"> <Search className="w-5 h-5 text-gray-500 mr-2" /> <input type="text" placeholder="Search..." className="outline-none" /> </div> ); }