تنظيم ومزامنة أيقونات SVG بكفاءة: دليلك الشامل لبرنامج Iconset

تُعد ملفات SVG (Scalable Vector Graphics) طريقة رائعة لإدماج الصور المتجهة (Vector Images) في سير عمل التصميم والتطوير. لكن جمع وتنظيم هذه الملفات على جهاز الكمبيوتر الخاص بك قد يكون مهمة صعبة ومرهقة. فكيف يمكن لبرنامج Iconset أن يزيل هذا العبء ويساعدنا على تحقيق إنتاجية أعلى؟

ما هو SVG؟

SVG هو تنسيق ملف صور عمره ما يقرب من 20 عامًا. ورغم وجوده منذ فترة طويلة، إلا أنه بدأ يكتسب زخمًا كبيرًا في مجتمع المطورين مؤخرًا. يتميز SVG بعدة خصائص تجعله ممتازًا للاستخدام:

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

لكن على الرغم من هذه المزايا، فإن محاولة جمع وتنظيم مجموعة كبيرة من ملفات SVG يمكن أن تكون تحديًا حقيقيًا. ما هي الأسماء التي ستطلقها عليها؟ هل لديك برنامج يمكنه معاينتها بسهولة؟ ماذا عن البحث الفعال؟

ما هو Iconset؟

Iconset هو أداة مجانية ومتعددة المنصات تتيح لك جمع وإدارة جميع ملفات SVG الخاصة بك في مكان واحد. إنه بمثابة مكتبة مركزية لأيقوناتك، مما يسهل الوصول إليها واستخدامها.

هل تحب التنقل بسرعة بين أيقونات Font Awesome و heroicons ولكن لا ترغب في التبديل المستمر بين المكتبات؟ يتيح لك Iconset إجراء بحث سريع وسحب الأيقونة مباشرة إلى مشروعك. وإذا كنت تخطط لاستخدامه في مشروع React، يمكنك حتى نسخ الملف بصيغة JSX ولصقه مباشرة في مشروعك!

ماذا سنتعلم في هذا الدليل؟

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

• الجزء الأول: البدء مع Iconset
• الجزء الثاني: إضافة الأيقونات إلى Iconset
• الجزء الثالث: استخدام Iconset مع برامج التصميم مثل Figma
• الجزء الرابع: استخدام Iconset في بيئات التطوير مثل React
• الجزء الخامس: مزامنة Iconset عبر أجهزة كمبيوتر متعددة باستخدام Dropbox

الجزء الأول: البدء مع Iconset

للبدء، ستحتاج أولاً إلى تثبيت Iconset محليًا على جهازك. عملية التثبيت مشابهة لأي تطبيق آخر.

بمجرد أن يصبح جاهزًا ومتاحًا محليًا، يجب أن تكون قادرًا على فتحه ورؤية واجهة المستخدم تعرض رسالة “No Icons” (لا توجد أيقونات)، وهو أمر متوقع، حيث لا يأتي البرنامج بأي أيقونات جاهزة.

الجزء الثاني: إضافة الأيقونات إلى Iconset

إضافة الأيقونات إلى Iconset سهل للغاية بمجرد السحب والإفلات، ولكن لديك بعض الخيارات أثناء العملية. للبدء، دعنا نقوم بتنزيل مجموعة الأيقونات المجانية heroicons من الموقع التالي: https://heroicons.com/.

على موقع heroicons، سترى زرًا كبيرًا مكتوبًا عليه “Download all” (تنزيل الكل)، والذي سيقوم بتنزيل ملف مضغوط (zip) يتضمن جميع الملفات.

إذا انتقلت إلى المجلد المُحسّن (optimized) داخل الملف المضغوط، فسترى أن هناك نسختين مختلفتين: solid (ممتلئة) و outline (مخططة). الآن لإدخال هذه الأيقونات إلى Iconset، حدد كل مجلد على حدة واسحبه مباشرة إلى واجهة Iconset.

بمجرد السحب، ستظهر لك بعض الخيارات:

• Set (المجموعة): بما أن هذه هي مجموعتنا الأولى، سيتم إنشاء مجموعة جديدة تلقائيًا. إذا كان لديك مجموعات موجودة مسبقًا، يمكنك الاستيراد إليها.
• Set Name (اسم المجموعة): هنا يمكننا تسمية المجموعة بشيء نتذكره. لهذا الغرض، أوصي بتسميتها “heroicons - Outline“.
• Import Options (خيارات الاستيراد): هذه إعدادات اختيارية، لكنني عادةً ما أحدد خيار “optimize and clean” (تحسين وتنظيف) للتأكد من أن أي أيقونات تكون جاهزة للعمل بها فورًا.

وبمجرد النقر على “Import” (استيراد)، سيقوم البرنامج بعمله، وستحصل الآن على أول مجموعة من الأيقونات في Iconset! يمكنك المضي قدمًا والقيام بنفس الشيء مع دليل solid، وبذلك ستكون لديك مجموعتان جاهزتان للاستخدام.

في هذه المرحلة، يمكنك استخدام Iconset للبحث في أيقوناتك ورؤية جميع الملفات المتاحة حاليًا في مجموعتك.

الجزء الثالث: استخدام Iconset مع برامج التصميم مثل Figma

الشيء الرائع في Iconset هو مدى سهولة استخدامه مع برامج التصميم مثل Figma. إذا أردت إضافة أيقونة ظرف (بريد) إلى موقع الويب الخاص بي ليتمكن الأشخاص من الاتصال بي، يمكنني البحث عن أيقونة البريد، وسحبها ببساطة إلى لوحة التصميم الخاصة بي:

يمكنني بعد ذلك التعامل معها كأي عنصر تصميم متجه آخر واستخدامها فورًا في مشروعي.

الجزء الرابع: استخدام Iconset في بيئات التطوير مثل React

ميزة أخرى رائعة هي مدى سهولة استخدام Iconset في مشروع تطوير مثل React. بشكل افتراضي، تحصل على عدة طرق مختلفة لنسخ الملف واستخدامه في التطوير، مثل نسخه كـ JSX.

إذا شعرت أن مشروع Next.js Sass Starter الخاص بي يمكن أن يستفيد من بعض الأيقونات على الصفحة، يمكنني النقر بزر الماوس الأيمن على أي أيقونة أريدها، وتحت خيار “Copy As”، أختار “JSX“، ثم يمكنني لصقها مباشرة في مشروعي!

وبينما ستحتاج إلى بعض التنسيق (styling) بمجرد إدراجها، تمامًا مثل أي صورة أو أيقونة أخرى، إلا أنها تكون جاهزة للاستخدام فورًا.

الجزء الخامس: مزامنة Iconset عبر أجهزة كمبيوتر متعددة باستخدام Dropbox

مع Iconset، لديك القدرة على التبديل بين مكتبات مختلفة. ولكن الأهم من ذلك، يمكنك أيضًا تعيين موقع مكتبتك. عندما يقوم Iconset بإنشاء مكتبتك، فإنه يخزن كل شيء كملفات وقاعدة بيانات على جهاز الكمبيوتر الخاص بك.

وداخل واجهة مستخدم Iconset، يمكننا “Move” (نقل) و “Switch” (تبديل) الموقع الذي نستخدمه.

إذا كانت هذه هي المرة الأولى التي تقوم فيها بإعداد Iconset، يمكنك البدء بالنقر على “Move” ثم تحديد الموقع الذي تريد مزامنته إليه.

وبمجرد النقر على “Move“، سيتم نقلها إلى هذا الدليل، مثل مجلد على Dropbox، ومزامنتها مع السحابة مثل أي مجلد وملف آخر.

بدلاً من ذلك، إذا كان لديك بالفعل مكتبة Iconset مشتركة أو إذا كنت تقوم بإعداد هذا على جهاز كمبيوتر جديد، يمكنك استخدام خيار “Switch“، وتحديد هذا الخيار مباشرة من Dropbox.

وبمجرد النقر على “Switch“، ستقوم بتحميل مكتبتك المشتركة وتكون جاهزًا لتحقيق الإنتاجية.

ميزات إضافية لـ Iconset

• نشر ومشاركة مجموعات الأيقونات: ميزة رائعة أخرى هي أنه يمكنك تصدير المجموعات ومشاركتها. إذا قضيت وقتًا طويلاً في إنشاء مجموعة وترغب في مشاركتها مع الآخرين، فقم بتصديرها ونشرها ومشاركتها مع المجتمع!
• تنظيم أكثر: يدعم Iconset أيضًا ميزات مثل “Folders” (المجلدات) و “Favorites” (المفضلة). هذا يجعل تجميع وجمع الأيقونات أسهل بالطريقة التي تناسبك للحفاظ على إنتاجيتك. كما يدعم وضع العلامات (tagging)، مما يجعل البحث أسهل بكثير.

الخلاصة التقنية

يُعد Iconset حلاً برمجيًا فعالاً ومجانيًا يواجه تحديًا شائعًا في عالم التصميم والتطوير: إدارة أيقونات SVG. بفضل واجهته البديهية وقدرته على التكامل مع أدوات التصميم (مثل Figma) وبيئات التطوير (مثل React)، فإنه يقلل بشكل كبير من الاحتكاك المرتبط بتنظيم الأصول الرسومية. كما أن ميزة المزامنة عبر Dropbox تضمن استمرارية سير العمل والوصول الموحد للمكتبات عبر أجهزة متعددة، مما يعزز الإنتاجية ويقلل من الوقت المستغرق في المهام الإدارية المتكررة. إنه أداة لا غنى عنها لأي مطور أو مصمم يتعامل بكثرة مع أيقونات SVG.