کتابخانه
simple-icons یه بسته npm پر از آیکون SVG برندهای معروفه: لوگوی شبکه های اجتماعی، ابزارهای توسعه و سرویس های آنلاین. اگه برای فوتر، صفحه تماس یا بخش «ابزارهایی که باهاشون کار می کنیم» آیکون برند لازم داری، با مجوز CC0 و بدون فایل تصویری سنگین می تونی ازش استفاده کنی.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز CC0-1.0؛ هش هر فایل با منبع بررسی شده است.
۱۵٫۲ مگابایت· ۳۴۷۷ فایل· انتشار
SHA-256: 582c741206181a2097d7fac7e79e952fc13d263e1c830dc2d378f67757d24756
simple-icons یه مجموعه آیکون SVG از برندهای شناخته شده است که به شکل بسته npm منتشر می شه. وقتی می خوای لوگوی اینستاگرام، گیت هاب، تلگرام یا وردپرس رو کنار یه لینک بذاری، لازم نیست از گوگل عکس پیدا کنی و برش بدی. آیکون ها آماده ان و همه یک سبک دارن، برای همین کنار هم که قرار بگیرن ظاهر سایت منظم می مونه.
دو چیز simple-icons رو کاربردی می کنه: فرمت SVG و تک رنگ بودن. چون برداریه، توی هر اندازه ای تیز می مونه و حجمش خیلی کمه. چون تک رنگه، با CSS می تونی رنگش رو عوض کنی؛ مثلا توی حالت هاور رنگ برند بشه یا توی تم تیره سفید باشه. برای هر برند یه اسم، یه نامک و رنگ رسمی هم کنار آیکون هست. توی پروژه های جاوااسکریپتی هم می تونی فقط آیکون های لازم رو import کنی تا بقیه وارد بسته نهایی نشن.
به درد کی می خوره؟ مدیر سایت وردپرسی که آیکون شبکه های اجتماعی رو توی هدر و فوتر می خواد، توسعه دهنده ای که صفحه ورود با گزینه های «ورود با ...» می سازه، و طراحی که برای لندینگ بخش «سرویس های سازگار» لازم داره. جاهایی هم مناسب نیست. اگه لوگوی رنگی و کامل برند رو می خوای، این مجموعه فقط نسخه ساده و تک رنگ رو بهت می ده. برندهای ایرانی هم ممکنه توی مجموعه نباشن، پس قبل از طراحی بگرد و مطمئن شو آیکون مورد نظرت هست.
درباره مجوز یه نکته مهمه: CC0 مربوط به خود مجموعه است، ولی لوگوی هر برند علامت تجاری صاحبشه. نوشتن «ما با فلان سرویس کار می کنیم» مشکلی نداره، اما اگه جوری استفاده کنی که انگار اون برند سایتت رو تایید کرده، اول راهنمای استفاده از لوگوی همون برند رو بخون. گاهی هم آیکونی از مجموعه حذف یا اسمش عوض می شه، پس نسخه بسته رو توی پروژه ات ثابت نگه دار و بدون تست به روزرسانی نکن.
یه نکته هم برای روزهای محدودیت اینترنت: آیکون ها رو از CDN خارجی لود نکن و فایل ها رو روی هاست خودت بذار تا وقتی اینترنت بین الملل قطع یا کند می شه، سایتت بدون آیکون نمونه. نسخه های رسمی و بدون تغییر simple-icons توی مخزن داخلی ما هم در دسترسه.
اگه پروژه ات با npm و باندلر کار می کنه، بسته simple-icons رو نصب کن و فقط آیکون هایی که لازم داری رو import کن. هر آیکون یه شیء با اسم، نامک، رنگ برند و داده SVG داره. اگه سایتت وردپرسیه و کارت ساده است، سراغ npm نرو و از کد آماده پایین همین صفحه استفاده کن.
موقع به روزرسانی بسته، قبلش فهرست آیکون هایی که استفاده کردی رو نگاه کن؛ ممکنه اسم یا وجود بعضی هاشون عوض شده باشه.
یه مجموعه آیکون SVG از برندهای معروفه که به شکل بسته npm منتشر می شه. برای نشون دادن لوگوی شبکه های اجتماعی، ابزارها و سرویس ها توی فوتر، صفحه تماس، دکمه های ورود یا بخش همکاری ها به کار می ره. چون برداریه، توی هر اندازه ای واضح می مونه.
نه، لازم نیست. اگه فقط چند تا آیکون می خوای، می تونی SVG همون برندها رو مستقیم توی قالب یا صفحه بذاری. npm بیشتر وقتی به درد می خوره که پروژه جاوااسکریپتی با باندلر داری و می خوای فقط آیکون های لازم وارد بسته نهایی بشن.
نه. CC0 درباره خود مجموعه است، ولی لوگو و نام هر برند علامت تجاری صاحبشه. نمایش معمولی برای معرفی یا لینک مشکلی نداره، اما نباید طوری باشه که انگار اون برند سایتت رو رسما تایید کرده. اگه شک داشتی، راهنمای لوگوی همون برند رو بخون.
بله، آیکون ها تک رنگن و با CSS راحت رنگشون عوض می شه. فقط SVG باید داخل خود صفحه باشه، نه با تگ img. برای هر برند یه رنگ رسمی هم هست که می تونی ازش استفاده کنی، یا رنگ دلخواه هماهنگ با تم سایتت بذاری.
مجموعه بیشتر روی برندهای شناخته شده جهانی تمرکز داره و برندهای ایرانی ممکنه توش نباشن. قبل از طراحی، فهرست آیکون ها رو بگرد. اگه آیکون مورد نظرت نبود، از فایل رسمی خود اون برند استفاده کن و راهنمای لوگوش رو هم نگاه کن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.