دليل التصدير

شرح كامل لسير عمل التصدير في Bobcorn — من اختيار الأيقونات إلى إنشاء ملفات الخطوط الجاهزة للإنتاج.

فتح نافذة التصدير

انقر على زر تصدير في قائمة الشريط الجانبي الأيسر. تفتح نافذة التصدير كنافذة مشروطة تتيح لك تهيئة مجلد الإخراج، واختيار مجموعات الأيقونات المراد تضمينها، وتحديد تنسيقات الإخراج والملفات المرفقة. تُحفظ جميع الإعدادات بين الجلسات، لذا بمجرد تهيئة إعداد التصدير المفضل لديك، تصبح عمليات التصدير اللاحقة بنقرة واحدة.

اختيار مجلد الإخراج

الخطوة الأولى هي تحديد مكان حفظ الملفات المُصدَّرة. يستخدم Bobcorn افتراضيًا سطح المكتب. انقر على زر المجلد بجوار المسار للبحث عن موقع مختلف.

تلميح
صدِّر مباشرةً إلى مجلد fonts/ أو assets/ في مشروعك لتجنب نسخ الملفات يدويًا بعد كل عملية تصدير. يُعدّ هذا مفيدًا بشكل خاص أثناء التطوير النشط عندما تكون في مرحلة تكرار مجموعة الأيقونات.

اختيار مجموعات الأيقونات

يمكنك اختيار مجموعات الأيقونات التي تريد تضمينها في التصدير. بشكل افتراضي، تكون جميع المجموعات محددة. أزل تحديد أي مجموعة لا تريدها في الخط — على سبيل المثال، يمكنك استبعاد مجموعة "مسودات" تحتوي على أيقونات قيد الإنشاء.

تعرض كل مجموعة عدد أيقوناتها بجوار اسمها. يتحدث إجمالي عدد الأيقونات في أسفل القائمة في الوقت الفعلي عند تشغيل المجموعات وإيقافها، حتى تعرف دائمًا بالضبط عدد الحروف الرسومية التي سيحتويها الخط المُصدَّر.

تنسيقات الخطوط

يستطيع Bobcorn إنشاء خمسة تنسيقات خطوط. اختر التنسيقات التي تتناسب مع متطلبات دعم المتصفح في مشروعك:

التنسيقالافتراضيمتى يُفعَّلمزيد من المعلومات
.woff2 مفعَّل دائمًا دائمًا — التنسيق الأساسي للويب WOFF2 →
.woff اختياري عند الحاجة لدعم IE 11 WOFF →
.ttf اختياري تطبيقات سطح المكتب، تثبيت الخطوط على نظام التشغيل TTF →
.svg اختياري التصحيح، iOS القديم SVG Font →
.eot اختياري IE 6-8 القديم فقط EOT →

يكون WOFF2 مضمَّنًا دائمًا لأنه تنسيق خط الويب الأساسي — لا يوجد سيناريو تريد فيه تصدير خط ويب بدونه. جميع التنسيقات الأخرى اختيارية بناءً على متطلباتك المحددة.

الملفات المرفقة

إلى جانب ملفات الخط نفسها، يستطيع Bobcorn إنشاء عدة ملفات مرفقة تجعل التكامل والتعاون أكثر سهولة:

CSS (icons.css)

يحتوي على تعريف @font-face وفئات CSS .icon-* لكل أيقونة في المجموعة. أضف هذا الملف إلى مشروعك وستكون مستعدًا لاستخدام الأيقونات بأسماء فئات بسيطة. راجع دليل CSS @font-face للاطلاع على تفاصيل عمل CSS المُنشَأ.

JS (icons-symbol.js)

ملف SVG symbol sprite يسجّل جميع الأيقونات كرموز SVG مضمَّنة عند تحميل السكريبت. استخدم هذا الملف عندما تحتاج إلى أيقونات متعددة الألوان أو ميزات SVG جنبًا إلى جنب مع أيقونات الخط. راجع دليل SVG Symbol لأنماط الاستخدام.

HTML (demo.html)

صفحة معاينة تفاعلية تعرض جميع الأيقونات المُصدَّرة مع أسمائها وأسماء فئات CSS ونقاط ترميز Unicode. افتحها في المتصفح لتصفح مجموعة الأيقونات الكاملة. مفيدة للمصممين الذين يراجعون مكتبة الأيقونات والمطورين الذين يبحثون عن أسماء الفئات أثناء التكامل.

ICP (project.icp)

ملف مشروع Bobcorn. صدِّره لمشاركة مشروع الأيقونات مع أعضاء الفريق أو كنسخة احتياطية. يؤدي فتح ملف ICP في Bobcorn إلى استعادة الحالة الكاملة للمشروع — جميع الأيقونات والمجموعات والبيانات الوصفية والإعدادات — تمامًا كما كانت عند التصدير.

التعبئة في ZIP

فعِّل خيار ZIP لتجميع جميع الملفات المُصدَّرة في أرشيف .zip واحد. يكون هذا مفيدًا عند مشاركة خط الأيقونات مع أعضاء الفريق، أو رفعه إلى CDN، أو إرفاقه بمستند تسليم التصميم. يحتوي ملف ZIP على نفس بنية المجلدات كالتصدير العادي — دون تداخل أو إعادة تنظيم.

التهيئات الموصى بها

إليك ثلاثة إعدادات مسبقة عملية لأنواع المشاريع الشائعة:

مشروع ويب حديث

  • WOFF2 (مفعَّل دائمًا) + CSS + عرض HTML توضيحي
  • حجم أدنى، يغطي أكثر من 97% من المتصفحات

مشروع التوافق الكامل

  • WOFF2 + WOFF + CSS + عرض HTML توضيحي
  • يغطي IE 11+ وجميع المتصفحات الحديثة

نظام التصميم / مكتبة المكونات

  • WOFF2 + TTF + CSS + رموز JS + عرض HTML توضيحي + ICP
  • الخطوط لاستخدام CSS، وTTF لأدوات سطح المكتب، ورموز JS للمتغيرات متعددة الألوان، وICP لنسخ المشروع الاحتياطية
تلميح
ابدأ بالإعداد المسبق "مشروع ويب حديث" — WOFF2 + CSS. أضف المزيد من التنسيقات فقط عندما تستلزم ذلك إحصائيات المتصفح أو متطلبات المنصة. تزيد التنسيقات الإضافية من حجم البناء دون أي فائدة للمستخدمين الذين تدعم متصفحاتهم WOFF2 بالفعل.

بنية ملفات الإخراج

عند تفعيل جميع الخيارات، يُنشئ Bobcorn بنية الملفات التالية:

إخراج التصدير 
output/
├── MyIcons.woff2        # Font files
├── MyIcons.woff
├── MyIcons.ttf
├── MyIcons.css          # @font-face + icon classes
├── MyIcons-symbol.js    # SVG symbol sprite
├── demo.html            # Interactive preview
└── MyIcons.icp          # Project backup

يُشتَق اسم عائلة الخط (مثل "MyIcons") من اسم مشروعك في Bobcorn. تستخدم جميع الملفات المُنشَأة هذا الاسم كبادئة لضمان الاتساق.

بعد التصدير

بعد أن يُنشئ Bobcorn ملفاتك، اتبع هذه الخطوات لدمج خط الأيقونات في مشروعك:

  1. انسخ ملفات الخط و CSS إلى مجلد الأصول أو الخطوط في مشروعك
  2. اربط CSS في HTML الخاص بك: <link rel="stylesheet" href="MyIcons.css">
  3. استخدم الأيقونات في أي مكان في ترميزك: <i class="icon icon-home"></i>
  4. اختياريًا، قم بالتحميل المسبق لملف WOFF2 لتسريع التصيير الأولي

إليك مثال كامل للتكامل:

تكامل كامل 
<head>
  <link rel="preload" href="MyIcons.woff2" as="font"
        type="font/woff2" crossorigin>
  <link rel="stylesheet" href="MyIcons.css">
</head>
<body>
  <button><i class="icon icon-save"></i> Save</button>
</body>

يُخبر تلميح rel="preload" المتصفحَ بالبدء في تنزيل ملف الخط قبل مصادفة قاعدة @font-face في CSS. يُلغي هذا التأخير بين تحليل CSS وتنزيل الخط، مما يؤدي إلى تصيير أول أسرع مع ظهور الأيقونات. السمة crossorigin مطلوبة للتحميل المسبق للخطوط، حتى عندما يكون الخط من نفس المصدر.

تلميح
افتح ملف demo.html المُنشَأ في المتصفح لتصفح جميع الأيقونات المُصدَّرة. يمكنك النقر على أي أيقونة لنسخ اسم فئة CSS الخاصة بها — مفيد أثناء التطوير عندما تحتاج إلى البحث عن الفئة الدقيقة لأيقونة معينة.
في Bobcorn
تتذكر نافذة التصدير آخر الإعدادات المستخدمة. بمجرد تهيئة التنسيقات والملفات المرفقة ومجلد الإخراج لمشروعك، يصبح كل تصدير لاحق بنقرة واحدة. إذا كنت تعمل بشكل متكرر، اضبط مجلد الإخراج على مجلد أصول مشروعك للحصول على تحديثات بلا أي جهد إضافي.