Maison > interface Web > js tutoriel > le corps du texte

Simplifiez la gestion SVG : convertissez les chemins en un seul fichier JS de constantes

王林
Libérer: 2024-08-12 18:42:48
original
1179 Les gens l'ont consulté

Simplify SVG Management: Convert Paths to a Single JS File of Constants

Lors de la création d'applications React.js, la gestion efficace des icônes SVG est cruciale. Les SVG offrent l'évolutivité et la flexibilité nécessaires à une conception réactive, mais leur gestion dans de grands projets peut devenir fastidieuse. C'est là qu'intervient svg-path-constants, un outil CLI conçu pour rationaliser votre flux de travail SVG en convertissant les chemins SVG en constantes réutilisables.

Pourquoi les SVG et pourquoi les constantes ?

Dans un article précédent, "Une comparaison complète des options de gestion des icônes SVG dans les projets React.js", j'ai discuté de diverses méthodes de gestion des icônes SVG, notamment les SVG en ligne, les sprites SVG et l'utilisation des composants React pour chaque icône. Bien que chaque méthode ait ses avantages et ses inconvénients, un défi demeure : garder vos chemins SVG organisés et réutilisables.

L'utilisation de constantes pour les chemins SVG permet d'obtenir une petite taille de bundle et un temps de construction rapide.

Qu'est-ce que les constantes de chemin SVG ?

svg-path-constants est un outil CLI qui vous aide à générer des constantes à partir de fichiers SVG, facilitant ainsi l'intégration et la gestion des icônes SVG dans vos projets React. Il convertit les chemins SVG en constantes JS, prend en charge des conventions de dénomination flexibles et permet une sortie personnalisable.

Principales caractéristiques :

  • Générer des constantes à partir de fichiers SVG : convertissez rapidement les chemins SVG en constantes.
  • Conventions de dénomination flexibles : prend en charge camelCase, PascalCase, Snake_case et SCREAMING_SNAKE_CASE.
  • Sortie personnalisable : générez des constantes avec des modèles et des chemins de fichiers personnalisés.
  • Conversion d'attribut : convertit automatiquement les attributs SVG tels que l'opacité, le remplissage-opacité, le trait et le remplissage en chaînes de chemin.
  • Sorties simples ou multiples : générez un seul fichier de sortie ou plusieurs fichiers en fonction de votre structure d'entrée.

Premiers pas avec les constantes de chemin SVG

Vous pouvez commencer à utiliser les constantes de chemin svg immédiatement avec npx :

npx svg-path-constants@latest
Copier après la connexion
Copier après la connexion

Vous pouvez également l'installer globalement ou en tant que dépendance de développement :

npm install -g svg-path-constants
npm install --save-dev svg-path-constants
Copier après la connexion

Exemple d'utilisation

Utilisation de base

Disons que vous avez des fichiers SVG dans src/assets/icons et que vous souhaitez générer des constantes dans src/components/Icon/paths.js :

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js
Copier après la connexion
Copier après la connexion

Exemple de sortie :

// 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
Copier après la connexion
Copier après la connexion

Format de dénomination personnalisé

Spécifiez un format de nom différent, comme PascalCase :

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js -f PascalCase
Copier après la connexion

Exemple de sortie :

// 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
Copier après la connexion

Utilisation d'un modèle pour la sortie

Contrôlez le nom et la sortie du fichier avec un modèle personnalisé :

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

Exemple de sortie :

// 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
Copier après la connexion

Gestion des attributs SVG

svg-path-constants peuvent convertir des attributs SVG tels que l'opacité, le remplissage-opacité, le trait et le remplissage en composants de la chaîne de chemin.

Exemple SVG :

<svg>
    <path d="M10 10 H 90 V 90 H 10 Z" opacity="0.5" fill-opacity="0.8" stroke="#ff0000" fill="#00ff00"/>
</svg>
Copier après la connexion

Constante du chemin généré :

export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";
Copier après la connexion
  • opacity="0.5" devient o0.5
  • fill-opacity="0.8" devient O0.8
  • Stroke="#ff0000" devient fff000
  • fill="#00ff00" devient F00ff00

Cette fonctionnalité vous permet de conserver les informations de style essentielles directement dans la chaîne de chemin, en conservant une représentation compacte et informative.

Exemple : utilisation de constantes de chemin SVG dans un composant React

Une fois que vous avez généré des constantes de chemin SVG avec les constantes de chemin SVG, vous pouvez facilement les intégrer dans vos composants React. Cela permet non seulement de garder votre code propre, mais permet également de réutiliser facilement les chemins SVG dans votre application.

Étape 1 : Générer des constantes de chemin SVG

Supposons que vous ayez déjà exécuté la commande suivante pour générer des constantes à partir de vos fichiers SVG :

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js
Copier après la connexion
Copier après la connexion

Cette commande génère un fichier src/components/Icon/paths.js avec des constantes comme :

// 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
Copier après la connexion
Copier après la connexion

Étape 2 : Créer un composant React pour restituer les SVG

Maintenant, créons un composant React qui restitue ces icônes SVG en utilisant les constantes générées.

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;
Copier après la connexion

Étape 3 : utilisez le composant dans votre application

Vous pouvez désormais utiliser le composant IconDemo n'importe où dans votre application React pour afficher les icônes SVG :

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')
);
Copier après la connexion

Explication:

  1. Fonction parsePathData :

    • Il n'est nécessaire que si vous avez une opacité ou plusieurs couleurs dans le fichier SVG.
    • La fonction parsePathData traite la chaîne d'attribut d étendue, en extrayant des commandes telles que o (opacité), F (couleur de remplissage) et f (couleur de trait).
    • Il divise la chaîne en fonction de ces commandes, applique les attributs correspondants et renvoie un tableau d'éléments de chemin.
  2. Composant SVGIcon :

    • Ce composant prend une chaîne d'attribut d, l'analyse avec parsePathData et restitue les chemins SVG.
    • Le composant permet la personnalisation grâce à des accessoires tels que la taille et la couleur.
  3. Composant IconDemo :

    • Il s'agit d'un composant de démonstration qui montre comment utiliser le composant SvgIcon avec différentes chaînes D, tailles et couleurs.

Quelle est la prochaine étape ? Ajout d'images raster aux constantes

Je travaille actuellement sur une bibliothèque npm qui améliorera les constantes de chemin svg en ajoutant des images raster (PNG) comme commentaires au-dessus de chaque constante générée. Cela fournira une représentation visuelle de l'icône directement dans votre code, facilitant ainsi l'identification et la gestion des chemins SVG.

Conclusion

La gestion des chemins SVG dans les projets React ne doit pas être un problème. Avec les constantes de chemin svg, vous pouvez garder vos icônes organisées, votre code propre et votre flux de travail efficace. Et bientôt, avec la prochaine bibliothèque permettant d'ajouter des images raster aux commentaires d'icônes, vous disposerez d'un moyen encore plus visuel et intuitif de gérer vos ressources SVG.

Essayez les constantes de chemin svg aujourd'hui :

npx svg-path-constants@latest
Copier après la connexion
Copier après la connexion

Et restez à l'écoute pour plus de mises à jour !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!