راهنمای آیکون‌ها

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

همهٔ آیکون‌ها را دسته به دسته در فهرست آیکون‌ها ببینید.

شش سبک

هر آیکون در شش سبک هست و همه از یک طرح خطی ساخته می‌شوند: light (خطی، پیش‌فرض)، bold (توپر)، bulk (حجمی)، two-tone (دورنگ)، broken (شکسته) و curved (منحنی).

<IconWallet variant="bold" />
<Icon name="calendar" variant="bulk" />

iconSvg("heart", { variant: "two-tone" });

هر سبک اسپرایت جدای خودش را دارد (@kashi-ui/icons/sprite-bold.svg با شناسهٔ #k-home--bold) و فایل‌های جدا در @kashi-ui/icons/svg/<variant>/<name>.svg هستند. سبک bold جزئیات را با ماسک SVG از دل شکل سوراخ می‌کند؛ هر نمونه شناسهٔ ماسک یکتای خودش را می‌گیرد.

اصول طراحی

همهٔ آیکون‌ها از چند قاعدهٔ ساده پیروی می‌کنند تا کنار هم یکدست دیده شوند:

• گوشهٔ پیوسته

  قاب‌ها به‌جای گردی سادهٔ دایره‌ای، انحنای پیوسته (squircle) دارند؛ نرم‌تر و هم‌خانواده با گوشه‌های کامپوننت‌ها.

• شکل‌های بسته

  آدم‌ها، قلب و ستاره شکل بستهٔ نرم‌اند، نه چند خط جدا؛ در اندازهٔ کوچک هم خوانا می‌مانند.

• جزئیات با نقطه

  جزئیات ریز با نقطه‌های هم‌ضخامت خط نشان داده می‌شوند و خط‌های داخلی از لبهٔ قاب فاصله می‌گیرند.

• خط ۱٫۵ روی شبکهٔ ۲۰

  یک ضخامت برای همه، سر و اتصال گرد و حاشیهٔ امن ۲٫۵ واحدی؛ با strokeWidth می‌شود ضخیم‌ترش کرد.

React

هر آیکون یک کامپوننت جداست؛ فقط آیکون‌هایی که import می‌کنید در باندل می‌آیند.

import { IconSearch, IconTrash } from "@kashi-ui/icons/react";

<IconSearch />
<IconTrash size={24} strokeWidth={2} className="danger" />

وقتی نام آیکون از داده می‌آید، از Icon استفاده کنید:

import { Icon } from "@kashi-ui/icons/react";

<Icon name={item.icon} />

بقیهٔ ویژگی‌های <svg> (مثل className، style و onClick) هم پذیرفته می‌شوند و ref به خود <svg> می‌رسد.

HTML و فریم‌ورک‌های دیگر

برای Vue، Svelte، Angular یا HTML ساده سه راه دارید.

۱. کد SVG با جاوااسکریپت. iconSvg رشتهٔ SVG برمی‌گرداند:

import { iconSvg } from "@kashi-ui/icons";

button.innerHTML = iconSvg("trash", { size: 16 }) + " حذف";

۲. اسپرایت. فایل @kashi-ui/icons/sprite.svg را یک بار در صفحه بگذارید یا کنار سایتتان منتشر کنید و هر جا لازم شد صدا بزنید:

<svg width="20" height="20" aria-hidden="true">
  <use href="/sprite.svg#k-search" />
</svg>

۳. فایل SVG جدا. هر آیکون در @kashi-ui/icons/svg/<name>.svg هم هست؛ برای <img> یا ابزارهای ساخت که SVG را import می‌کنند.

داخل کامپوننت‌های کاشی

آیکون‌ها برای کار کنار کامپوننت‌ها ساخته شده‌اند و اندازه‌شان با دکمه و فیلد هماهنگ است:

import { Button, Input } from "@kashi-ui/react";
import { IconPlus, IconSearch } from "@kashi-ui/icons/react";

<Button variant="primary" iconStart={<IconPlus />}>پروژهٔ جدید</Button>
<Input addonStart={<IconSearch />} placeholder="جستجو" />

دسترس‌پذیری

• آیکون بدون title با aria-hidden از صفحه‌خوان پنهان می‌شود؛ برای آیکون‌هایی که کنار متن می‌آیند همین درست است.
• آیکونی که تنها می‌آید و معنا دارد (مثل دکمهٔ فقط‌آیکون) باید نام داشته باشد: یا title بدهید، یا بهتر، aria-label را روی خود دکمه بگذارید.
• آیکون‌ها focusable="false" دارند تا در اینترنت اکسپلورر و نسخه‌های قدیمی Edge در ترتیب Tab نیایند.

راست‌به‌چپ

آیکون‌ها به‌طور پیش‌فرض قرینه نمی‌شوند؛ arrow-left همیشه به چپ اشاره می‌کند. در رابط فارسی، «بعدی» و «ادامه» یعنی فلش چپ و «بازگشت» یعنی فلش راست. شش آیکون جهت‌دار (فلش‌ها، شورون‌های چپ و راست، ارسال و خروج) در صفحهٔ هر آیکون با نشان «جهت‌دار» مشخص‌اند. اگر طرح شما هم راست‌به‌چپ و هم چپ‌به‌راست است، با mirror قرینه‌شان کنید.

فیگما

همهٔ آیکون‌ها در صفحهٔ «🧩 Icons» پلاگین فیگمای کاشی هم هستند، دسته‌به‌دسته، هر کدام به شکل کامپوننت با نام Icon / <دسته> / <name> تا در پنل Assets هم پوشه‌بندی شوند؛ با Instance swap داخل دکمه‌ها و فیلدها عوض می‌شوند. فیگما و کد از یک منبع ساخته می‌شوند، پس شکل آیکون‌ها در هر دو یکی است.

پیشنهاد آیکون تازه

آیکونی کم دارید؟ در GitHub بنویسید. آیکون‌های تازه با همین شبکه و ضخامت کشیده می‌شوند تا مجموعه یکدست بماند.