عند إنشاء تطبيقات React.js، تعد إدارة أيقونات SVG بكفاءة أمرًا بالغ الأهمية. توفر ملفات SVG قابلية التوسع والمرونة اللازمة للتصميم سريع الاستجابة، ولكن التعامل معها في المشاريع الكبيرة يمكن أن يصبح مرهقًا. وهنا يأتي دور svg-path-constants، وهي أداة CLI مصممة لتبسيط سير عمل SVG الخاص بك عن طريق تحويل مسارات SVG إلى ثوابت قابلة لإعادة الاستخدام.

لماذا SVGs ولماذا الثوابت؟

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

يوفر استخدام الثوابت لمسارات SVG حجمًا صغيرًا للحزمة ووقت إنشاء سريعًا.

ما هي ثوابت مسار svg؟

svg-path-constants هي أداة CLI تساعدك على إنشاء ثوابت من ملفات SVG، مما يسهل دمج وإدارة أيقونات SVG في مشاريع React الخاصة بك. فهو يحول مسارات SVG إلى ثوابت JS، ويدعم اصطلاحات التسمية المرنة، ويسمح بمخرجات قابلة للتخصيص.

الميزات الرئيسية:

• إنشاء ثوابت من ملفات SVG: تحويل مسارات SVG بسرعة إلى ثوابت.
• اصطلاحات التسمية المرنة: يدعم CamelCase، وPascalCase، وsnake_case، وSCREAMING_SNAKE_CASE.
• إخراج قابل للتخصيص: إنشاء ثوابت باستخدام قوالب مخصصة ومسارات الملفات.
• تحويل السمات: يحول سمات SVG تلقائيًا مثل العتامة، وتعتيم التعبئة، والحد، والتعبئة إلى سلاسل المسار.
• مخرجات فردية أو متعددة: قم بإنشاء ملف إخراج واحد أو ملفات متعددة بناءً على بنية الإدخال الخاصة بك.

البدء باستخدام ثوابت svg-path

يمكنك البدء في استخدام ثوابت مسار svg على الفور باستخدام npx:

npx svg-path-constants@latest

بدلاً من ذلك، يمكنك تثبيته عالميًا أو باعتباره تابعًا للمطور:

npm install -g svg-path-constants
npm install --save-dev svg-path-constants

مثال الاستخدام

الاستخدام الأساسي

لنفترض أن لديك ملفات SVG في src/assets/icons وتريد إنشاء ثوابت في src/components/Icon/paths.js:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

مثال الإخراج:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

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

تحديد تنسيق تسمية مختلف، مثل PascalCase:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js -f PascalCase

مثال الإخراج:

// src/components/Icon/paths.js
export const FolderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const FolderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

استخدام قالب للإخراج

التحكم في التسمية وإخراج الملف باستخدام قالب مخصص:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/{-2,-1}/{0}.js -t "{1,-3}"

مثال الإخراج:

// src/components/Icon/folder/icon1.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path

// src/components/Icon/folder/icon2.js
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

التعامل مع سمات SVG

يمكن لثوابت svg-path تحويل سمات SVG مثل العتامة، وعتامة التعبئة، والحد، والتعبئة إلى مكونات سلسلة المسار.

مثال SVG:

ثابت المسار المُنشأ:

export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";

• العتامة = "0.5" تصبح o0.5
• عتامة التعبئة = "0.8" تصبح O0.8
• السكتة الدماغية = "#ff0000" تصبح fff000
• تعبئة = "#00ff00" تصبح F00ff00

تتيح لك هذه الميزة الاحتفاظ بمعلومات النمط الأساسية مباشرة داخل سلسلة المسار، مع الحفاظ على تمثيل مدمج وغني بالمعلومات.

مثال: استخدام ثوابت مسار SVG في مكون React

بمجرد إنشاء ثوابت مسار SVG باستخدام ثوابت svg-path، يمكنك دمجها بسهولة في مكونات React الخاصة بك. وهذا لا يحافظ على نظافة التعليمات البرمجية الخاصة بك فحسب، بل يسمح أيضًا بإعادة استخدام مسارات SVG بسهولة عبر تطبيقك.

الخطوة 1: إنشاء ثوابت مسار SVG

لنفترض أنك قمت بالفعل بتشغيل الأمر التالي لإنشاء ثوابت من ملفات SVG الخاصة بك:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

يقوم هذا الأمر بإنشاء ملف src/components/Icon/paths.js مع ثوابت مثل:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

الخطوة 2: إنشاء مكون React لعرض صور SVG

الآن، لنقم بإنشاء مكون React الذي يعرض أيقونات SVG هذه باستخدام الثوابت التي تم إنشاؤها.

import React from 'react';
import { folderIcon1, folderIcon2 } from './paths'; // Import the generated SVG path constants

const parsePathData = (d) => {
    const pathElements = [];
    const pathCommands = d.split(/(o[\d.] |O[\d.] |f[0-9a-fA-F] |F[0-9a-fA-F] )/); // Split by style commands
    let attributes = null;

    pathCommands.forEach((text, i) => {
        const isCommand = Boolean(i % 2);
        if (isCommand) {
            if (!attributes) {
                attributes = {};
            }
            const match = text.match(/^(o([\d.] ))?(O([\d.] ))?(f([0-9a-fA-F] ))?(F([0-9a-fA-F] ))?$/);

            const [, , opacity, , fillOpacity, , stroke, , fill] = match;
            if (opacity) attributes.opacity = opacity;
            if (fillOpacity) attributes["fill-opacity"] = fillOpacity;
            if (stroke) attributes.stroke = `#${stroke}`;
            if (fill) attributes.fill = `#${fill}`;
            return;
        }
        if (text.trim().length) {
            pathElements.push({ ...attributes, d: text });
        }
    });

    return pathElements;
};


const SvgIcon = ({ d, size = 24, color = 'currentColor', ...props }) => {
    const pathElements = parsePathData(d);

    return (
        
    );
};

const IconDemo = () => (
    

        
SVG Icon Examples
        

            
Folder Icon 1
            
        
        

            
Folder Icon 2
            
        
    
);

export default IconDemo;

الخطوة 3: استخدم المكون في التطبيق الخاص بك

يمكنك الآن استخدام مكون IconDemo في أي مكان في تطبيق React لعرض أيقونات SVG:

import React from 'react';
import ReactDOM from 'react-dom';
import IconDemo from './components/Icon/IconDemo';

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

توضيح:

1. وظيفة تحليل بيانات المسار :

   • تكون هناك حاجة إليها فقط إذا كان لديك عتامة أو ألوان متعددة في ملف SVG.
   • تقوم وظيفة parsePathData بمعالجة سلسلة السمة d الموسعة، واستخراج أوامر مثل o (التعتيم)، وF (لون التعبئة)، وf (لون الحد).
   • يقوم بتقسيم السلسلة بناءً على هذه الأوامر، وتطبيق السمات المقابلة، وإرجاع مجموعة من عناصر المسار.

2. مكون SvgIcon :

   • يأخذ هذا المكون سلسلة سمات d، ويوزعها باستخدام parsePathData، ويعرض مسارات SVG.
   • يسمح المكون بالتخصيص من خلال الدعائم مثل الحجم واللون.

3. مكون IconDemo:

   • هذا مكون تجريبي يوضح كيفية استخدام مكون SvgIcon مع سلاسل وأحجام وألوان مختلفة.

ما هي الخطوة التالية؟ إضافة الصور النقطية إلى الثوابت

أعمل حاليًا على مكتبة npm التي من شأنها تحسين ثوابت مسار svg عن طريق إضافة صور نقطية (PNGs) كتعليقات فوق كل ثابت تم إنشاؤه. سيوفر هذا تمثيلاً مرئيًا للأيقونة مباشرة في التعليمات البرمجية الخاصة بك، مما يسهل تحديد وإدارة مسارات SVG.

خاتمة

لا ينبغي أن تكون إدارة مسارات SVG في مشاريع React أمرًا صعبًا. باستخدام svg-path-constants، يمكنك الحفاظ على أيقوناتك منظمة، ورمزك نظيفًا، وكفاءة سير عملك. وقريبًا، مع المكتبة القادمة لإضافة الصور النقطية إلى تعليقات الأيقونات، سيكون لديك طريقة أكثر وضوحًا وبديهية لإدارة أصول SVG الخاصة بك.

جرب svg-path-constants اليوم:

npx svg-path-constants@latest

ترقبوا المزيد من التحديثات!