Ao construir aplicativos React.js, gerenciar ícones SVG de forma eficiente é crucial. Os SVGs fornecem a escalabilidade e a flexibilidade necessárias para um design responsivo, mas lidar com eles em grandes projetos pode se tornar complicado. É aí que entra svg-path-constants, uma ferramenta CLI projetada para agilizar seu fluxo de trabalho SVG convertendo caminhos SVG em constantes reutilizáveis.

Por que SVGs e por que constantes?

Em um artigo anterior, "Uma comparação abrangente de opções de gerenciamento de ícones SVG em projetos React.js", discuti vários métodos para gerenciar ícones SVG, incluindo SVGs inline, sprites SVG e o uso de componentes React para cada ícone. Embora cada método tenha seus prós e contras, resta um desafio: manter seus caminhos SVG organizados e reutilizáveis.

O uso de constantes para caminhos SVG fornece tamanho de pacote pequeno e tempo de construção rápido.

O que são constantes de caminho SVG?

svg-path-constants é uma ferramenta CLI que ajuda a gerar constantes a partir de arquivos SVG, facilitando a integração e o gerenciamento de ícones SVG em seus projetos React. Ele converte caminhos SVG em constantes JS, oferece suporte a convenções de nomenclatura flexíveis e permite saída personalizável.

Principais recursos:

• Gerar constantes a partir de arquivos SVG: Converta rapidamente caminhos SVG em constantes.
• Convenções de nomenclatura flexíveis: Suporta camelCase, PascalCase, snake_case e SCREAMING_SNAKE_CASE.
• Saída personalizável: Gere constantes com modelos personalizados e caminhos de arquivo.
• Conversão de atributos: converte automaticamente atributos SVG como opacidade, opacidade de preenchimento, traço e preenchimento em strings de caminho.
• Saídas Únicas ou Múltiplas: Gere um único arquivo de saída ou vários arquivos com base em sua estrutura de entrada.

Primeiros passos com constantes de caminho svg

Você pode começar a usar svg-path-constants imediatamente com npx:

npx svg-path-constants@latest

Como alternativa, você pode instalá-lo globalmente ou como uma dependência de desenvolvimento:

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

Exemplo de uso

Uso Básico

Digamos que você tenha arquivos SVG em src/assets/icons e queira gerar constantes em src/components/Icon/paths.js:

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

Exemplo de saída:

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

Especifique um formato de nomenclatura diferente, como PascalCase:

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

Exemplo de saída:

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

Usando um modelo para saída

Controle a nomenclatura e a saída do arquivo com um modelo personalizado:

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

Exemplo de saída:

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

Manipulação de atributos SVG

svg-path-constants podem converter atributos SVG como opacidade, opacidade de preenchimento, traço e preenchimento em componentes da string do caminho.

Exemplo SVG:

Constante de caminho gerada:

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

• opacidade = "0,5" torna-se o0,5
• fill-opacity = "0,8" torna-se O0,8
• acidente vascular cerebral = "#ff0000" torna-se fff000
• fill="#00ff00" torna-se F00ff00

Este recurso permite manter informações essenciais de estilo diretamente na string do caminho, mantendo uma representação compacta e informativa.

Exemplo: usando constantes de caminho SVG em um componente React

Depois de gerar constantes de caminho SVG com svg-path-constants, você pode integrá-las facilmente em seus componentes React. Isso não apenas mantém seu código limpo, mas também permite a fácil reutilização de caminhos SVG em seu aplicativo.

Etapa 1: gerar constantes de caminho SVG

Vamos supor que você já tenha executado o seguinte comando para gerar constantes a partir de seus arquivos SVG:

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

Este comando gera um arquivo src/components/Icon/paths.js com 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

Etapa 2: crie um componente React para renderizar SVGs

Agora, vamos criar um componente React que renderiza esses ícones SVG usando as constantes geradas.

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;

Etapa 3: use o componente em seu aplicativo

Agora você pode usar o componente IconDemo em qualquer lugar do seu aplicativo React para exibir os ícones SVG:

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

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

Explicação:

1. função parsePathData:

   • É necessário apenas se você tiver opacidade ou múltiplas cores no arquivo SVG.
   • A função parsePathData processa a string de atributo d estendida, extraindo comandos como o (opacidade), F (cor de preenchimento) e f (cor do traço).
   • Ele divide a string com base nesses comandos, aplica os atributos correspondentes e retorna uma matriz de elementos de caminho.

2. Componente SvgIcon:

   • Este componente pega uma string de atributo d, analisa-a com parsePathData e renderiza os caminhos SVG.
   • O componente permite personalização por meio de adereços como tamanho e cor.

3. Componente IconDemo:

   • Este é um componente de demonstração que mostra como usar o componente SvgIcon com diferentes strings, tamanhos e cores.

O que vem a seguir? Adicionando imagens raster a constantes

Atualmente estou trabalhando em uma biblioteca npm que irá aprimorar as constantes de caminho svg adicionando imagens raster (PNGs) como comentários acima de cada constante gerada. Isso fornecerá uma representação visual do ícone diretamente no seu código, facilitando a identificação e o gerenciamento de caminhos SVG.

Conclusão

Gerenciar caminhos SVG em projetos React não precisa ser um incômodo. Com svg-path-constants, você pode manter seus ícones organizados, seu código limpo e seu fluxo de trabalho eficiente. E em breve, com a próxima biblioteca para adicionar imagens raster a comentários de ícones, você terá uma maneira ainda mais visual e intuitiva de gerenciar seus ativos SVG.

Experimente svg-path-constants hoje:

npx svg-path-constants@latest

E fique ligado para mais atualizações!