CPIK - CyClone Power Icon Kit
نسخه‌ی 0.2.1. تغییرات را در CHANGELOG.md ببینید.
برندهای ایرانی، در یک کیت آیکون.
کیت CPIK آیکون بانک‌ها، پلتفرم‌ها، سرویس‌ها و برندهای ایرانی را یک‌جا می‌دهد. یک فایل استایل را لینک کنید تا هر آیکون با یک نام کلاس در دسترس باشد؛ در هر اندازه‌ای واضح می‌ماند و مثل متن کنارش با CSS رنگ می‌گیرد. لوگوها متعلق به صاحبانشان است.
نگاهی ۳۰ ثانیه‌ای به CPIK. دانلود ویدیو (MP4، ۲ مگابایت)
همه‌ی آیکون‌ها را در صفحه‌ی پیش‌نمایش ببینید و جستجو کنید: https://cpik.cyclone9.dev/
صفحه‌ی معرفی CPIK در سایت CyClone: https://cyclone9.dev/cpik
شروع سریع
۱. فایل cpik-<version>.zip را از آخرین نسخه‌ی منتشرشده دانلود کنید.
۲. فایل‌های cpik.css، cpik.woff2 و cpik.woff را کنار هم در یک پوشه از سایت بگذارید؛ مثلاً assets/cpik/. برای فایل کم‌حجم‌تر، cpik.min.css را به‌جای cpik.css به کار ببرید.
۳. فایل استایل را در <head> صفحه لینک کنید:
<link rel="stylesheet" href="./assets/cpik/cpik.css">
۴. کلاس آیکون را به یک المان بدهید:
<i class="cpik-cyclone-cpik" aria-hidden="true"></i>
هر آیکون فقط یک کلاس دارد: cpik- و بعد نام آیکون. دکمه‌ی کپی روی هر کارت در صفحه‌ی پیش‌نمایش، کد HTML همان آیکون را می‌دهد.
از CDN یا npm
بدون دانلود هم می‌توانید فایل استایل را از jsDelivr لینک کنید. نسخه را ثابت بگذارید، چون تا نسخه‌ی ۱.۰.۰ ممکن است نام کلاسی عوض شود:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cyclone9/[email protected]/dist/cpik.min.css">
در پروژه‌ای که ابزار build دارد، بسته را نصب کنید و @cyclone9/cpik/cpik.css را import کنید:
npm install @cyclone9/cpik
اندازه و رنگ
آیکون یک کاراکتر از فونت است و مثل متن اطرافش رفتار می‌کند. اندازه را با font-size و رنگ را با color تنظیم کنید:
.cpik-cyclone-cpik {
font-size: 48px;
color: #4A5CF0;
}
اگر دکمه‌ای فقط آیکون دارد، به خود دکمه یک نام دسترس‌پذیر بدهید؛ آیکون از صفحه‌خوان‌ها پنهان است:
<button type="button" aria-label="Pay with Bank Melli">
<i class="cpik-bank-melli" aria-hidden="true"></i>
</button>
آیکون‌ها
نام هر آیکون با دسته‌ی آن شروع می‌شود:
| پیشوند | دسته |
|---|---|
bank- | بانک‌ها |
finance- | پرداخت |
crypto- | صرافی‌های رمزارز |
telecom- | اپراتورها و اینترنت |
shop- | فروشگاه‌ها و نیازمندی‌ها |
shipping- | پست و ارسال |
transport- | حمل و نقل |
platform- | پلتفرم‌های ویدیو |
channel- | شبکه‌های تلویزیونی |
news- | خبری |
sport- | تیم‌های ورزشی |
socialmedia- | شبکه‌های اجتماعی |
gov- | خدمات دولتی |
map- | نقشه‌ها |
landmark- | بناهای شاخص |
symbol- | نمادهای شاخص |
cyclone- | سایکلون - CyClone |
فهرست همه‌ی آیکون‌ها با کدپوینتشان در cpik.json است.
آیکونی که می‌خواهید در کیت نیست؟ آن را از فرم درخواست آیکون بخواهید.
کدپوینت هر آیکون هیچ‌وقت عوض نمی‌شود و کدپوینت آیکونی که حذف شده به آیکون دیگری داده نمی‌شود؛ پس با به‌روز کردن کیت، آیکون‌های صفحه‌هایتان جابه‌جا نمی‌شوند.
ساختن از روی سورس
به Node.js نسخه‌ی ۲۴ یا بالاتر نیاز دارد.
npm ci
npm run build # writes the font, the stylesheet and the preview page to dist/
npm run preview -- 8080 # serves dist/ on http://127.0.0.1:8080
برای افزودن آیکون:
۱. آن را به‌صورت SVG تک‌رنگ در پوشه‌ی icons/ ذخیره کنید، با نام <prefix>-<name>.svg و فقط با حروف کوچک لاتین، رقم و خط تیره.
۲. نام فارسی و انگلیسی و کلیدواژه‌های جستجوی آن را به config/metadata.json اضافه کنید.
۳. دستور npm run build را اجرا کنید.
فونت فقط شکل‌های پرشده را نگه می‌دارد؛ برای همین هر SVG پیش از ساخت فونت بررسی و به یک مسیر واحد تبدیل می‌شود. ساخت، پرشدگی evenodd، شکل‌های روی هم، تبدیل‌ها (transform)، clip path و شکل‌های سفیدی را که روی طرح کشیده شده‌اند خودش درست می‌کند و نتیجه را با طرح اصلی مقایسه می‌کند. اگر SVG چیزی داشته باشد که فونت نمی‌تواند نشان دهد، مثل تصویر، متن، ماسک یا شکلی که فقط با خط دور (stroke) کشیده شده، ساخت با پیامی که نام فایل را می‌گوید متوقف می‌شود. آن بخش را در نرم‌افزار طراحی به مسیر تبدیل کنید و دوباره بسازید.
مجوز
کد، فایل‌های فونت و فایل استایل کیت با مجوز MIT منتشر شده‌اند، Copyright (c) 2026 CyClone (https://cyclone9.dev). متن کامل مجوز در LICENSE است.
مجوز MIT شامل لوگوهای داخل کیت نمی‌شود. هر لوگو علامت تجاری صاحب آن است. کیت CPIK فقط آن‌ها را نمایش می‌دهد و استفاده از هر لوگو به معنای همکاری با آن برند نیست. لوگوی CPIK و ویدیوی معرفی و تصویر آن در پوشه‌ی assets/ متعلق به CyClone است و همه‌ی حقوق آن‌ها محفوظ است؛ موسیقی ویدیو هم جزو مجوز MIT نیست. مرز دریاها در آیکون cpik-map-iran-seas از داده‌های Natural Earth است که مالکیت عمومی دارد. فونت وزیرمتن که صفحه‌ی پیش‌نمایش از آن استفاده می‌کند، مجوز SIL Open Font License دارد (assets/fonts/OFL.txt).