آیکون‌ها

آیکون‌ها SVG هستند (نه Icon Font)، با DOM API ساخته می‌شوند (نه innerHTML)، رنگشان از currentColor می‌آید و آیکون‌های جهت‌دار در RTL آینه می‌شوند.

آیکون — روی هر کدام بزنید تا کد آن در کادر زیر بیاید: <bana-icon name="…">

استفاده

کد

<bana-icon name="check"></bana-icon>                         <!-- decorative: hidden from screen readers -->
<bana-icon name="warning" label="هشدار"></bana-icon>       <!-- meaningful: has an accessible name -->
<bana-icon name="save" style="--bana-icon-size: 2rem; color: var(--bana-accent)"></bana-icon>
<button ui="primary"><bana-icon name="arrow-end"></bana-icon> ادامه</button>

ثبت آیکون سفارشی

کد

Bana.registerIcon("star", ["M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z"]);
// directional glyph: mirrored in RTL
Bana.registerIcon("undo", ["M9 14L4 9l5-5", "M4 9h11a5 5 0 0 1 0 10h-3"], { directional: true });

بستهٔ ۶۰۰+ آیکون (بدون دانلود)

ماژول icons-pack بیش از ۵۵۰ آیکون اصلی در ۸ دسته (رابط، فایل، افراد و ارتباط، تجارت، فناوری، رسانه، جهان، زندگی) اضافه می‌کند. همه مسیر SVG داخل خود فایل هستند، پس از جایی دانلود نمی‌شود. هر آیکون سه سبک دارد و با ۱۶ نشان ترکیب می‌شود (بیش از ۲۸ هزار حالت). گالری جست‌وجوپذیر در صفحهٔ «آیکون‌ها»ی کیت ادمین است.

کد

import pack from "@bana-ui/core/icons-pack";
pack.install(Bana);                              // همه
pack.install(Bana, { categories: ["commerce"] }); // فقط یک دسته

کد

<bana-icon name="wallet"></bana-icon>                       <!-- خطی -->
<bana-icon name="wallet" variant="solid"></bana-icon>       <!-- پر (شکل‌های بسته) -->
<bana-icon name="wallet" variant="duo"></bana-icon>         <!-- دوتُن -->
<bana-icon name="file+plus"></bana-icon>                    <!-- نشان ترکیبی: base+badge -->

نشان‌ها: plus، minus، check، x، lock، star، heart، alert، search، clock، up، down، edit، ban، question، sync. آیکون پایه در ترکیب کوچک می‌شود؛ برای آیکون‌های شلوغ ممکن است ترکیب خوانا نباشد، پس نتیجه را در گالری ببینید. Bana.registerIconResolver(fn) برای ساخت نام‌های محاسبه‌شدهٔ خودتان است.

فقط داده مسیر SVG (d) پذیرفته می‌شود و با یک الگوی سخت‌گیرانه بررسی می‌شود؛ رشته SVG/HTML کامل رد می‌شود.

ویرایش این صفحه در GitHub