Beim Erstellen von React.js-Anwendungen ist die effiziente Verwaltung von SVG-Symbolen von entscheidender Bedeutung. SVGs bieten die Skalierbarkeit und Flexibilität, die für responsives Design erforderlich sind, ihre Handhabung in großen Projekten kann jedoch umständlich werden. Hier kommt SVG-Pfadkonstanten ins Spiel, ein CLI-Tool, das Ihren SVG-Workflow durch die Konvertierung von SVG-Pfaden in wiederverwendbare Konstanten optimieren soll.

Warum SVGs und warum Konstanten?

In einem früheren Artikel, „Ein umfassender Vergleich der SVG-Symbolverwaltungsoptionen in React.js-Projekten“, habe ich verschiedene Methoden zur Verwaltung von SVG-Symbolen besprochen, darunter Inline-SVGs, SVG-Sprites und die Verwendung von React-Komponenten für jedes Symbol. Obwohl jede Methode ihre Vor- und Nachteile hat, bleibt eine Herausforderung bestehen: Ihre SVG-Pfade organisiert und wiederverwendbar zu halten.

Die Verwendung von Konstanten für SVG-Pfade sorgt für eine kleine Bundle-Größe und eine schnelle Erstellungszeit.

Was sind SVG-Pfadkonstanten?

svg-path-constants ist ein CLI-Tool, das Ihnen hilft, Konstanten aus SVG-Dateien zu generieren und so die Integration und Verwaltung von SVG-Symbolen in Ihre React-Projekte zu vereinfachen. Es konvertiert SVG-Pfade in JS-Konstanten, unterstützt flexible Namenskonventionen und ermöglicht eine anpassbare Ausgabe.

Hauptmerkmale:

• Konstanten aus SVG-Dateien generieren: SVG-Pfade schnell in Konstanten konvertieren.
• Flexible Namenskonventionen: Unterstützt camelCase, PascalCase, Snake_case und SCREAMING_SNAKE_CASE.
• Anpassbare Ausgabe: Generieren Sie Konstanten mit benutzerdefinierten Vorlagen und Dateipfaden.
• Attributkonvertierung: Konvertiert SVG-Attribute wie Deckkraft, Füll-Deckkraft, Strich und Füllung automatisch in Pfadzeichenfolgen.
• Einzelne oder mehrere Ausgaben: Generieren Sie eine einzelne Ausgabedatei oder mehrere Dateien basierend auf Ihrer Eingabestruktur.

Erste Schritte mit SVG-Pfadkonstanten

Sie können sofort mit der Verwendung von SVG-Pfadkonstanten mit npx beginnen:

npx svg-path-constants@latest

Alternativ können Sie es global oder als Entwicklerabhängigkeit installieren:

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

Beispielverwendung

Grundlegende Verwendung

Angenommen, Sie haben SVG-Dateien in src/assets/icons und möchten Konstanten in src/components/Icon/paths.js generieren:

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

Ausgabebeispiel:

// 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

Benutzerdefiniertes Benennungsformat

Geben Sie ein anderes Benennungsformat an, z. B. PascalCase:

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

Ausgabebeispiel:

// 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

Verwenden einer Vorlage für die Ausgabe

Steuern Sie die Benennung und Dateiausgabe mit einer benutzerdefinierten Vorlage:

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

Ausgabebeispiel:

// 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

Umgang mit SVG-Attributen

svg-path-constants kann SVG-Attribute wie Deckkraft, Füll-Deckkraft, Strich und Füllung in Komponenten der Pfadzeichenfolge umwandeln.

Beispiel-SVG:

Generierte Pfadkonstante:

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

• opacity="0.5" wird zu o0.5
• fill-opacity="0.8" wird zu O0.8
• Stroke="#ff0000" wird zu fff000
• fill="#00ff00" wird zu F00ff00

Mit dieser Funktion können Sie wichtige Stilinformationen direkt in der Pfadzeichenfolge behalten und so eine kompakte und informative Darstellung beibehalten.

Beispiel: Verwendung von SVG-Pfadkonstanten in einer React-Komponente

Sobald Sie mit SVG-Pfadkonstanten SVG-Pfadkonstanten generiert haben, können Sie diese problemlos in Ihre React-Komponenten integrieren. Dies hält nicht nur Ihren Code sauber, sondern ermöglicht auch die einfache Wiederverwendung von SVG-Pfaden in Ihrer Anwendung.

Schritt 1: SVG-Pfadkonstanten generieren

Angenommen, Sie haben den folgenden Befehl bereits ausgeführt, um Konstanten aus Ihren SVG-Dateien zu generieren:

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

Dieser Befehl generiert eine Datei src/components/Icon/paths.js mit Konstanten wie:

// 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

Schritt 2: Erstellen Sie eine React-Komponente zum Rendern von SVGs

Jetzt erstellen wir eine React-Komponente, die diese SVG-Symbole mithilfe der generierten Konstanten rendert.

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;

Schritt 3: Verwenden Sie die Komponente in Ihrer Anwendung

Sie können die IconDemo-Komponente jetzt überall in Ihrer React-Anwendung verwenden, um die SVG-Symbole anzuzeigen:

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

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

Erläuterung:

1. parsePathData-Funktion:

   • Es ist nur erforderlich, wenn die SVG-Datei Deckkraft oder mehrere Farben enthält.
   • Die Funktion parsePathData verarbeitet die erweiterte d-Attributzeichenfolge und extrahiert Befehle wie o (Deckkraft), F (Füllfarbe) und f (Strichfarbe).
   • Es teilt die Zeichenfolge basierend auf diesen Befehlen auf, wendet die entsprechenden Attribute an und gibt ein Array von Pfadelementen zurück.

2. SvgIcon-Komponente:

   • Diese Komponente nimmt eine d-Attributzeichenfolge, analysiert sie mit parsePathData und rendert die SVG-Pfade.
   • Die Komponente ermöglicht eine individuelle Anpassung durch Requisiten wie Größe und Farbe.

3. IconDemo-Komponente:

   • Dies ist eine Demo-Komponente, die zeigt, wie die SVGIcon-Komponente mit verschiedenen D-Strings, Größen und Farben verwendet wird.

Was kommt als nächstes? Hinzufügen von Rasterbildern zu Konstanten

Ich arbeite derzeit an einer npm-Bibliothek, die SVG-Pfadkonstanten verbessert, indem Rasterbilder (PNGs) als Kommentare über jeder generierten Konstante hinzugefügt werden. Dadurch wird eine visuelle Darstellung des Symbols direkt in Ihrem Code bereitgestellt, wodurch es einfacher wird, SVG-Pfade zu identifizieren und zu verwalten.

Abschluss

Das Verwalten von SVG-Pfaden in React-Projekten muss kein Aufwand sein. Mit SVG-Pfadkonstanten können Sie Ihre Symbole organisieren, Ihren Code sauber und Ihren Arbeitsablauf effizient halten. Und bald werden Sie mit der kommenden Bibliothek zum Hinzufügen von Rasterbildern zu Symbolkommentaren eine noch visuellere und intuitivere Möglichkeit haben, Ihre SVG-Assets zu verwalten.

Probieren Sie SVG-Pfadkonstanten noch heute aus:

npx svg-path-constants@latest

Und bleiben Sie dran für weitere Updates!