كيفية تنظيم ملفات SVG ومزامنتها مع مجموعة الرموز

يعد SVG طريقة رائعة لجلب الصور المتجهة إلى سير عمل التصميم والتطوير. لكن جمع ملفات SVG وتنظيمها على جهاز الكمبيوتر الخاص بك قد يكون أمرًا صعبًا.

كيف يمكن أن تساعد الأيقونات في التخلص من الألم وزيادة إنتاجيتنا؟

  • ما هو SVG؟
  • ما هي مجموعة الأيقونات؟
  • ماذا سوف نتعلم؟
  • الجزء 1: بدء استخدام مجموعة الأيقونات
  • الجزء 2: إضافة أيقونات إلى مجموعة الأيقونات
  • الجزء 3: استخدام مجموعة الأيقونات مع برامج التصميم مثل Figma
  • الجزء 4: استخدام مجموعة الأيقونات في التطوير مثل React
  • الجزء 5: مزامنة مجموعة الأيقونات عبر أجهزة كمبيوتر متعددة باستخدام Dropbox

ما هو SVG؟

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

يعد SVG رائعًا لعدد من الأسباب. أولاً وقبل كل شيء ، إنه تنسيق متجه ، مما يعني أنه بحجم كبير أو صغير كما تريد.

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

لكن محاولة جمع مجموعة من الملفات وتنظيمها قد تكون صعبة. ماذا تسميهم؟ هل لديك جهاز كمبيوتر يمكنه معاينتها بسهولة؟ ماذا عن البحث؟

ما هي مجموعة الأيقونات؟

مجموعة الرموز هي أداة مجانية عبر الأنظمة الأساسية تتيح لك جمع وإدارة جميع ملفات SVG في مكان واحد.

هل تحب التنقل بسرعة بين Font Awesome والبطولات ولكنك لا تريد الاستمرار في تبديل المكتبات؟ يمكنك استخدام مجموعة الأيقونات لإجراء بحث سريع وسحبها مباشرة إلى مشروعك.

إذا كنت تخطط لاستخدامه في مشروع React ، فيمكنك حتى نسخ الملف كـ JSX وإفراغه في مشروعك مباشرة!

ماذا سوف نتعلم؟

سنستعرض بعض السيناريوهات المختلفة التي ستوضح لنا مدى فائدة مجموعة الأيقونات.

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

الجزء 1: بدء استخدام مجموعة الأيقونات

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

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

الجزء 2: إضافة أيقونات إلى مجموعة الأيقونات

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

للبدء ، لنقم بتنزيل مجموعة الأيقونات المجانية بطلات.

تنزيل من: //heroicons.com/.

على موقع hericons ، يجب أن ترى زر تنزيل الكل كبير ، والذي سيقوم بتنزيل ملف مضغوط بما في ذلك جميع الملفات.

إذا انتقلت إلى المجلد المحسن ، فسترى أن هناك نسختين مختلفتين: صلب ومخطط تفصيلي.

الآن للحصول عليها في مجموعة الأيقونات ، حدد كل مجلد على حدة واسحبه مباشرة إلى مجموعة الأيقونات.

بمجرد الوصول إلى هناك ، لديك بعض الخيارات.

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

وبمجرد النقر فوق استيراد ، ستفعل ما تريد ، وستحصل الآن على المجموعة الأولى من الرموز في مجموعة الرموز!

يمكنك المضي قدمًا والقيام بنفس الشيء مع الدليل الصلب ، لذا سيكون لدينا الآن مجموعتان جاهزتان للعمل.

في هذه المرحلة ، يمكنك استخدام مجموعة الرموز للبحث في الرموز الخاصة بك ومشاهدة جميع ملفاتك المتوفرة حاليًا في مجموعتك.

الجزء 3: استخدام مجموعة الأيقونات مع برامج التصميم مثل Figma

إن الشيء العظيم في Iconset هو مدى سهولة استخدامه مع برامج التصميم مثل Figma.

إذا كنت أرغب في إضافة رمز مغلف إلى موقع الويب الخاص بي حتى يتمكن الأشخاص من الاتصال بي ، فيمكنني البحث عن رمز البريد ، وسحبه ببساطة إلى لوحة الرسم الخاصة بي:

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

الجزء 4: استخدام مجموعة الأيقونات في التطوير مثل React

شيء رائع آخر هو مدى سهولة استخدامه في مشروع مثل React.

من خارج الصندوق ، تحصل على بعض الطرق المختلفة التي يمكنك من خلالها نسخ الملف واستخدامه في التطوير مثل نسخه بتنسيق JSX.

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

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

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

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

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

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

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

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

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

وبمجرد الضغط على مفتاح التبديل ، ستقوم الآن بتحميل مكتبتك المشتركة وستكون جاهزًا لتحقيق الإنتاجية.

ماذا يمكنك أن تفعل أيضا؟

نشر مجموعات الرموز ومشاركتها

ميزة أخرى رائعة هي أنه يمكنك تصدير مجموعات ومشاركتها. إذا كنت قد قضيت الكثير من الوقت على مجموعة وترغب في مشاركتها مع الآخرين ، فقم بتصديرها ونشرها ومشاركتها مع المجتمع!

المزيد من التنظيم

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

كما أنه يدعم وضع العلامات ، مما يجعل البحث أكثر سهولة.

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية
  • ؟ اكفلني