Heim >Web-Frontend >js-Tutorial >Vereinfachen Sie die SVG-Verwaltung: Konvertieren Sie Pfade in eine einzelne JS-Konstantendatei
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.
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.
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.
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
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
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
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
svg-path-constants kann SVG-Attribute wie Deckkraft, Füll-Deckkraft, Strich und Füllung in Komponenten der Pfadzeichenfolge umwandeln.
<svg> <path d="M10 10 H 90 V 90 H 10 Z" opacity="0.5" fill-opacity="0.8" stroke="#ff0000" fill="#00ff00"/> </svg>
Generierte Pfadkonstante:
export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";
Mit dieser Funktion können Sie wichtige Stilinformationen direkt in der Pfadzeichenfolge behalten und so eine kompakte und informative Darstellung beibehalten.
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.
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
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 ( <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg" {...props} > {pathElements.map((attrs, index) => ( <path key={index} {...attrs} /> ))} </svg> ); }; const IconDemo = () => ( <div> <h2>SVG Icon Examples</h2> <div> <h3>Folder Icon 1</h3> <SvgIcon path={folderIcon1} size={48} color="blue" /> </div> <div> <h3>Folder Icon 2</h3> <SvgIcon path={folderIcon2} size={48} color="green" /> </div> </div> ); export default IconDemo;
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( <React.StrictMode> <IconDemo /> </React.StrictMode>, document.getElementById('root') );
parsePathData-Funktion:
SvgIcon-Komponente:
IconDemo-Komponente:
Ich arbeite derzeit an einer npm-Bibliothek, die SVG-Pfadkonstanten verbessert, indem sie Rasterbilder (PNGs) als Kommentare über jeder generierten Konstante hinzufügt. Dadurch erhalten Sie eine visuelle Darstellung des Symbols direkt in Ihrem Code, was die Identifizierung und Verwaltung von SVG-Pfaden erleichtert.
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 noch heute SVG-Pfadkonstanten aus:
npx svg-path-constants@latest
Und bleiben Sie dran für weitere Updates!
Das obige ist der detaillierte Inhalt vonVereinfachen Sie die SVG-Verwaltung: Konvertieren Sie Pfade in eine einzelne JS-Konstantendatei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!