Al crear aplicaciones React.js, administrar los íconos SVG de manera eficiente es crucial. Los SVG brindan la escalabilidad y flexibilidad necesarias para el diseño responsivo, pero manejarlos en proyectos grandes puede resultar engorroso. Ahí es donde entra en juego svg-path-constants, una herramienta CLI diseñada para optimizar su flujo de trabajo SVG al convertir rutas SVG en constantes reutilizables.

¿Por qué SVG y por qué constantes?

En un artículo anterior, "Una comparación completa de las opciones de administración de íconos SVG en proyectos React.js", analicé varios métodos para administrar íconos SVG, incluidos SVG en línea, sprites SVG y el uso de componentes de React para cada ícono. Si bien cada método tiene sus pros y sus contras, aún queda un desafío: mantener tus rutas SVG organizadas y reutilizables.

El uso de constantes para rutas SVG proporciona un tamaño de paquete pequeño y un tiempo de compilación rápido.

¿Qué son las constantes de ruta de svg?

svg-path-constants es una herramienta CLI que te ayuda a generar constantes a partir de archivos SVG, lo que facilita la integración y administración de íconos SVG en tus proyectos de React. Convierte rutas SVG en constantes JS, admite convenciones de nomenclatura flexibles y permite resultados personalizables.

Características clave:

• Generar constantes a partir de archivos SVG: convierte rápidamente rutas SVG en constantes.
• Convenciones de nomenclatura flexibles: admite camelCase, PascalCase, Snake_case y SCREAMING_SNAKE_CASE.
• Salida personalizable: genera constantes con plantillas personalizadas y rutas de archivo.
• Conversión de atributos: convierte automáticamente atributos SVG como opacidad, opacidad de relleno, trazo y relleno en cadenas de ruta.
• Salidas únicas o múltiples: genera un único archivo de salida o varios archivos según tu estructura de entrada.

Comenzando con las constantes de ruta svg

Puedes comenzar a usar svg-path-constants inmediatamente con npx:

npx svg-path-constants@latest

Alternativamente, puedes instalarlo globalmente o como una dependencia de desarrollo:

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

Uso de ejemplo

Uso básico

Supongamos que tiene archivos SVG en src/assets/icons y desea generar constantes en src/components/Icon/paths.js:

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

Ejemplo de salida:

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

Formato de nombre personalizado

Especifique un formato de nombre diferente, como PascalCase:

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

Ejemplo de salida:

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

Usar una plantilla para la salida

Controle el nombre y la salida del archivo con una plantilla personalizada:

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

Ejemplo de salida:

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

Manejo de atributos SVG

svg-path-constants puede convertir atributos SVG como opacidad, opacidad de relleno, trazo y relleno en componentes de la cadena de ruta.

Ejemplo de SVG:

Constante de ruta generada:

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

• opacidad="0.5" se convierte en o0.5
• fill-opacity="0.8" se convierte en O0.8
• trazo="#ff0000" se convierte en fff000
• fill="#00ff00" se convierte en F00ff00

Esta función le permite mantener información de estilo esencial directamente dentro de la cadena de ruta, manteniendo una representación compacta e informativa.

Ejemplo: uso de constantes de ruta SVG en un componente de React

Una vez que haya generado constantes de ruta SVG con svg-path-constants, puede integrarlas fácilmente en sus componentes de React. Esto no solo mantiene su código limpio sino que también permite una fácil reutilización de rutas SVG en su aplicación.

Paso 1: generar constantes de ruta SVG

Supongamos que ya ha ejecutado el siguiente comando para generar constantes a partir de sus archivos SVG:

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

Este comando genera un archivo src/components/Icon/paths.js con constantes como:

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

Paso 2: cree un componente de React para renderizar SVG

Ahora, creemos un componente de React que represente estos íconos SVG usando las constantes generadas.

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;

Paso 3: use el componente en su aplicación

Ahora puedes usar el componente IconDemo en cualquier lugar de tu aplicación React para mostrar los íconos SVG:

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

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

Explicación:

1. Función parsePathData:

   • Solo es necesario si tienes opacidad o varios colores en el archivo SVG.
   • La función parsePathData procesa la cadena de atributo d extendida, extrayendo comandos como o (opacidad), F (color de relleno) y f (color de trazo).
   • Divide la cadena según estos comandos, aplica los atributos correspondientes y devuelve una matriz de elementos de ruta.

2. Componente SVGIcon:

   • Este componente toma una cadena de atributo d, la analiza con parsePathData y representa las rutas SVG.
   • El componente permite la personalización mediante accesorios como el tamaño y el color.

3. Componente de demostración de iconos:

   • Este es un componente de demostración que muestra cómo usar el componente SvgIcon con diferentes cadenas d, tamaños y colores.

¿Qué sigue? Agregar imágenes rasterizadas a constantes

Actualmente estoy trabajando en una biblioteca npm que mejorará las constantes de ruta svg agregando imágenes rasterizadas (PNG) como comentarios encima de cada constante generada. Esto proporcionará una representación visual del ícono directamente en su código, lo que facilitará la identificación y administración de rutas SVG.

Conclusión

Administrar rutas SVG en proyectos de React no tiene por qué ser una molestia. Con svg-path-constants, puede mantener sus íconos organizados, su código limpio y su flujo de trabajo eficiente. Y pronto, con la próxima biblioteca para agregar imágenes rasterizadas a comentarios de íconos, tendrás una forma aún más visual e intuitiva de administrar tus recursos SVG.

Pruebe svg-path-constants hoy:

npx svg-path-constants@latest

¡Y estad atentos para más actualizaciones!