کتابخانه
@phosphor-icons/web یه کتابخانه آیکون تمیز برای وبه که آیکون ها رو با یه کلاس CSS توی صفحه می ذاره و لازم نیست SVG ها رو دستی کپی کنی. هر آیکون در شش ضخامت و حالت هست و برای قالب وردپرس، صفحه فرود و پنل مدیریت به کار میاد.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۴۴٫۲ مگابایت· ۴۰ فایل· انتشار
SHA-256: 9fe1425df909edc1264eaabb2746b21fcdc05f124e1e45515031a19e7a97baef
@phosphor-icons/web یه بسته npm از خانواده آیکون Phosphor و مخصوص وبه. توضیح رسمیش می گه یه خانواده آیکون تمیز و دوستانه برای وب. کارش ساده است: یه فایل CSS رو به صفحه اضافه می کنی و بعد با یه تگ ساده مثل i یا span و یه کلاس، آیکون رو نشون می دی. اندازه و رنگش رو هم مثل متن معمولی با font-size و color کنترل می کنی.
مشکلی که حل می کنه آشناست. وقتی سایت می سازی، هر آیکون از یه جا میاد: یکی SVG کپی شده از یه سایت دیگه، یکی از یه فونت قدیمی، یکی از یه افزونه. حاصلش ظاهری ناهماهنگ با ضخامت خط های متفاوته. Phosphor همه آیکون ها رو با یه زبان طراحی نگه می داره. هر آیکون هم شش حالت داره: thin، light، regular، bold، fill و duotone. مثلا توی منو از regular استفاده می کنی و برای آیتم فعال همون آیکون رو به fill تغییر می دی. شکل ثابت می مونه و فقط حس عوض می شه.
بیشتر به درد کسایی می خوره که قالب اختصاصی وردپرس می نویسن، صفحه فرود یا داشبورد می سازن، یا پروژه جاوااسکریپتی دارن و فقط یه راه سریع برای آیکون می خوان. اگه صفحه ساز استفاده می کنی و جای CSS سفارشی داری، اونجا هم جواب می ده. ولی همیشه بهترین انتخاب نیست. اگه فقط پنج شش آیکون لازم داری، لود کردن یه فونت کامل اضافه است و SVG درون خطی سبک تره. اگه می خوای روی یه آیکون انیمیشن یا رنگ بندی دقیق بدی، باز هم SVG راحت تره.
برای سایت های ایرانی دو نکته هست. اول این که فایل ها رو از CDN خارجی نخون. روزهایی که اینترنت بین الملل مشکل داره، همین یه لینک خارجی می تونه آیکون های سایتت رو نصفه بالا بیاره. فایل ها رو روی هاست خودت بذار. دوم، توی صفحه راست به چپ، آیکون های جهت دار مثل فلش و chevron خودشون برعکس نمی شن. یا با CSS آینه شون می کنی یا برای هر جهت یه آیکون جدا می ذاری. نسخه های رسمی و بدون تغییر این کتابخانه توی مخزن داخلی ما هم هست، پس اگه به npm دسترسی نداشتی می تونی از همین جا برداری.
کار با این کتابخانه چند قدم کوتاه داره و بیشتر وقتت صرف انتخاب آیکون می شه:
آخرش سایت رو یه بار با اینترنت داخلی تست کن و توی تب Network مرورگر ببین فایل ها از سرور خودت لود می شن، نه از یه آدرس بیرونی.
این بسته آیکون های Phosphor رو به شکل فایل CSS و فونت آماده می کنه تا با یه کلاس ساده توی صفحه بیان. SVG برای کنترل تک تک آیکون ها دست تو رو بازتر می ذاره، ولی کپی کردنش برای آیکون های زیاد وقت می گیره. این بسته وقتی آیکون زیاد داری راحت تره.
هر آیکون شش حالت داره: thin، light، regular، bold، fill و duotone. شکل آیکون عوض نمی شه و فقط ضخامت یا حالت پر و دو رنگ بودنش فرق می کنه. می تونی برای بخش های مختلف سایت ضخامت متفاوت بذاری و باز هم ظاهر یکدست بمونه.
بله. فایل ها رو توی پوشه قالب بذار و استایل رو با enqueue یا کد آماده پایین صفحه به سایت اضافه کن. بعدش آیکون ها رو توی فایل های قالب یا بخش HTML سفارشی با کلاس مخصوصشون بذار. اگه از صفحه ساز استفاده می کنی، بسته به اون ممکنه به CSS سفارشی هم نیاز داشته باشی.
مجوز MIT یکی از آزادترین مجوزهای متن بازه و معمولا استفاده تجاری و تغییر رو اجازه می ده. فقط باید اطلاعیه مجوز رو توی پروژه نگه داری. برای پروژه مهم، متن مجوز همراه بسته رو یه بار بخون و قبل از انتشار مطمئن شو شرط ها رو رعایت کردی.
نه. آیکون ها فقط تصویرن و جهت صفحه رو نمی فهمن. فلش و chevron توی صفحه فارسی رو باید با CSS آینه کنی یا آیکون جهت مخالفش رو بذاری. آیکون های بدون جهت مثل خانه یا تنظیمات مشکلی ندارن و همون طور که هستن می مونن.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.