مجموعه آیکون‌های Tabler Icons؛ بیش از ۶۲۵۰ آیکون وکتور رایگان و متن‌باز

دسترسی به آیکون‌های وکتور باکیفیت، هماهنگ و مینیمال یکی از دغدغه‌های همیشگی طراحان وب و توسعه‌دهندگان فرانت‌اند است. مجموعه Tabler Icons با ارائه بیش از ۶۲۵۰ آیکون برداری (SVG) کاملاً رایگان و متن‌باز، پاسخی دقیق به این نیاز می‌دهد. تمام آیکون‌های این مجموعه روی یک شبکه استاندارد ۲۴ در ۲۴ پیکسل و با ضخامت خط ۲ پیکسل طراحی شده‌اند تا ظاهری کاملاً یکدست و مدرن به رابط کاربری شما ببخشند. در این مقاله بررسی می‌کنیم که چطور می‌توانید از این مجموعه بی‌نظیر در پروژه‌های شخصی و تجاری خود استفاده کنید.

مشخصات کلیدی مجموعه Tabler Icons

آشنایی با جزئیات فنی و ساختار یک منبع طراحی، پیش از استفاده از آن اهمیت زیادی دارد. جدول زیر مشخصات اصلی این مجموعه را نشان می‌دهد:

چرا باید از Tabler Icons در پروژه‌ها استفاده کنیم؟

هنگام توسعه یک وب‌سایت یا اپلیکیشن، حفظ انسجام بصری کار آسانی نیست. اگر آیکون‌های بخش‌های مختلف از منابع متفاوتی جمع‌آوری شوند، ظاهر کار غیرحرفه‌ای به نظر می‌رسد. تبلر آیکونز به دلیل طراحی سیستماتیک خود، این مشکل را حل می‌کند. هر آیکون با دقت بالا ترسیم شده و قابلیت تغییر اندازه، رنگ و ضخامت خط (Stroke) را دارد. علاوه بر این، انتشار تحت لایسنس MIT به این معناست که هیچ‌گونه دغدغه‌ای درباره حق نشر (Copyright) در پروژه‌های تجاری نخواهید داشت.

اگر در کنار طراحی رابط کاربری به بهینه‌سازی سرعت و عملکرد وب‌سایت خود اهمیت می‌دهید، پیشنهاد می‌کنیم نگاهی به نقشه‌ی راه یادگیری بهینه‌سازی سرعت وب‌سایت؛ از صفر تا نمره بالای ۹۰ بیندازید تا تاثیر استفاده از فایل‌های سبک SVG را بیشتر درک کنید.

روش‌های استفاده و پیاده‌سازی آیکون‌ها

یکی از بزرگترین مزیت‌های این مجموعه، انعطاف‌پذیری فوق‌العاده در نحوه به‌کارگیری آن است. توسعه‌دهندگان و طراحان می‌توانند بسته به تکنولوژی پروژه خود، یکی از روش‌های زیر را انتخاب کنند:

• کدگذاری مستقیم SVG: می‌توانید کدهای SVG آیکون را کپی کرده و مستقیماً داخل ساختار HTML خود قرار دهید.
• تصویر HTML یا Sprite: استفاده از آیکون‌ها به عنوان فایل عکس یا ساخت SVG Sprite برای کاهش درخواست‌های سرور.
• پکیج‌های جاوا اسکریپت: استفاده از بسته‌های آماده برای فریمورک‌های محبوب مانند React، Vue و SolidJS.
• پلاگین فایگما (Figma): طراحان UI/UX می‌توانند از افزونه اختصاصی این مجموعه در فایگما استفاده کنند تا به سرعت به جدیدترین آیکون‌ها دسترسی داشته باشند.

نمونه استفاده از کدهای SVG در فرانت‌اند

در ادامه یک نمونه ساده از نحوه قرار دادن و سفارشی‌سازی یک آیکون تبلر با کدهای HTML و SVG را مشاهده می‌کنید:

<div class="icon-container">
  <!-- نمونه یک آیکون سرچ با ضخامت و رنگ سفارشی -->
  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
    <path d="M21 21l-6 -6" />
  </svg>
</svg>
</div>

این کد یک آیکون جستجوی استاندارد با ابعاد ۲۴ در ۲۴ پیکسل ایجاد می‌کند. با تغییر دادن مقادیر صفاتی مثل stroke یا width و height در کدهای CSS، می‌توانید به راحتی رنگ و سایز آیکون را متناسب با طراحی خود تغییر دهید بدون اینکه کیفیت آن افت کند.

مدل‌های عرضه و حمایت از پروژه

بخش اصلی و سورس‌کد این پروژه (شامل بیش از ۶۲۵۰ آیکون SVG با لایسنس MIT) کاملاً رایگان است. با این حال، تیم سازنده برای توسعه‌دهندگانی که به امکانات کامل‌تر نیاز دارند، بسته‌های تکمیلی (Bundle و All Package) را نیز ارائه کرده است که شامل قالب‌های آماده HTML، تصاویر برداری پرمیوم و قالب‌های ایمیل هستند. تهیه این نسخه‌های تجاری اختیاری است و تاثیری روی دسترسی رایگان به آیکون‌های اصلی ندارد.

پرسش‌های متداول

جمع‌بندی

مجموعه Tabler Icons یکی از کامل‌ترین، منظم‌ترین و باکیفیت‌ترین منابع آیکون وکتور برای طراحان و برنامه‌نویسان است. تنوع بالای آیکون‌ها، سازگاری با ابزارهای طراحی مدرن مانند فایگما و فریمورک‌های فرانت‌اند، به همراه لایسنس کاملاً آزاد MIT، آن را به گزینه‌ای بی‌نقص تبدیل کرده است. اگر به دنبال ارتقای کیفیت بصری پروژه بعدی خود بدون نگرانی از هزینه‌ها یا محدودیت‌های حق نشر هستید، این مجموعه را حتماً در لیست ابزارهای خود قرار دهید.

ورود به سایت رسمی