📋 محتويات الصفحة
📖 الوصف
Heroicons هي مجموعة أيقونات SVG جميلة تم إنشاؤها بواسطة فريق Tailwind Labs. تأتي الأيقونات بخيارين رئيسيين: نمط الحواف (outline) بحجم 24 بكسل، ونمط الصلب (solid) بحجم 24 بكسل. تتميز التصميمات ببساطة أناقتها وتناسبها مع تطبيقات الويب الحديثة. تم تصميم هذه الأيقونات لتكون رفيقة مثالية لإطار Tailwind ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
واجهات المستخدم في تطبيقات React و Vue و Angular
أزرار التنقل والقوائم
بطاقات المعلومات والعناصر التفاعلية
تطبيقات الويب التقدمية (PWAs)
✨ المميزات
أبرز مميزات هذه الأداة
أكثر من 290 أيقونة SVG مصممة بعناية
متاحة بصيغة React JSX و Vue
مفتوحة المصدر تحت رخصة MIT
تصميم متناسق ونظيف
متوافقة مع Tailwind CSS بشكل مثالي
حجم صغير جداً للملفات
⚠️ العيوب
نقاط يجب مراعاتها
عدد محدود نسبياً من الأيقونات مقارنة بمجموعات أخرى
لا يوجد نمط خفيف (light) مخصص
لا يدعم أيقونات متعددة الألوان
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// تثبيت الحزمة
// npm install @heroicons/react
import { HeartIcon, UserIcon } from '@heroicons/react/24/solid'
import { BeakerIcon } from '@heroicons/react/24/outline'
function App() {
return (
<div className="flex gap-4">
<HeartIcon className="h-6 w-6 text-red-500" />
<UserIcon className="h-6 w-6 text-blue-500" />
<BeakerIcon className="h-6 w-6 text-green-500" />
</div>
)
}📚 أدوات أخرى في Icons
قد يعجبك أيضاً
Bootstrap Icons
⭐مجموعة أيقونات مفتوحة المصدر
Devicons
مجموعة أيقونات التقنيات والبرمجة
Feather Icons
مجموعة أيقونات بسيطة
Font Awesome
⭐مجموعة أيقونات شاملة
Iconify
⭐مجموعة أيقونات متعددة الأطر
Lucide Icons
⭐مجموعة أيقونات مفتوحة المصدر