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

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

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

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

Format de dénomination personnalisé

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

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

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

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}"

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

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 :

Constante du chemin généré :

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

• 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 une réutilisation facile des 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

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

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

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

Maintenant, créons un composant React qui restitue ces icônes SVG à l'aide des 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 (
        
    );
};

const IconDemo = () => (
    

        
SVG Icon Examples
        

            
Folder Icon 1
            
        

            
Folder Icon 2
            
    
);

export default IconDemo;

É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(
    ,
    document.getElementById('root')
);

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 contour).
   • 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 via 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

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