Icon
کامپوننت x-icon برای نمایش آیکنهای FontAwesome با قابلیت شخصیسازی کلاس، رنگ، اندازه و تولتیپ در صفحات Blade استفاده میشود. این کامپوننت برای نمایش انواع آیکنها در رابط کاربری، دکمهها، هشدارها و ... مناسب است و به راحتی قابل استفاده و سفارشیسازی میباشد.
ویژگیها
- نمایش آیکن با کلاس دلخواه (پیشفرض:
fa-solid fa-info) - امکان تعیین رنگ آیکن با پراپ
color - امکان تعیین اندازه فونت آیکن با پراپ
fontSize - پشتیبانی از تولتیپ (tooltip) هنگام هاور روی آیکن
- قابلیت افزودن کلاس سفارشی به آیکن و کانتینر آن
- قابل استفاده در هر جای قالب Blade
ورودیهای کامپوننت
| نام پراپ | نوع داده | مقدار پیشفرض | توضیحات |
|---|---|---|---|
class | string | fa-solid fa-info | کلاس آیکن (مثلاً fa-solid fa-user یا هر کلاس دلخواه) |
containerClass | string | null | کلاس CSS اضافی برای کانتینر آیکن |
color | string | null | رنگ آیکن (مثلاً #ff0000 یا red) |
fontSize | string | null | اندازه فونت آیکن (مثلاً 20px, 1.5rem, 2em) |
tooltip | string | null | متن تولتیپ هنگام هاور روی آیکن |
مثالها
نمونه پایه
<x-icon />
<x-icon
class="fa-solid fa-money-bill-trend-up text-success"
font-size="20px"
/>
<x-icon
tooltip="از کجا آمدهام آمدنم بهر چه بود"
class="fa-solid fa-question-circle"
font-size="20px"
color="#146ebe"
/>