При создании приложений React.js эффективное управление значками SVG имеет решающее значение. SVG обеспечивает масштабируемость и гибкость, необходимые для адаптивного дизайна, но обработка их в больших проектах может оказаться затруднительной. Именно здесь на помощь приходит svg-path-constants — инструмент CLI, предназначенный для оптимизации рабочего процесса SVG путем преобразования путей SVG в константы многократного использования.

Почему SVG и почему константы?

В предыдущей статье «Всестороннее сравнение вариантов управления значками SVG в проектах React.js» я обсуждал различные методы управления значками SVG, включая встроенные SVG, спрайты SVG и использование компонентов React для каждого значка. Хотя у каждого метода есть свои плюсы и минусы, остается одна проблема: обеспечить организованность и возможность повторного использования ваших путей SVG.

Использование констант для путей SVG обеспечивает небольшой размер пакета и быстрое время сборки.

Что такое константы svg-пути?

svg-path-constants — это инструмент CLI, который помогает генерировать константы из файлов SVG, упрощая интеграцию и управление значками SVG в ваших проектах React. Он преобразует пути SVG в константы JS, поддерживает гибкие соглашения об именах и позволяет настраивать вывод.

Ключевые особенности:

• Создание констант из файлов SVG: быстрое преобразование путей SVG в константы.
• Гибкие соглашения об именах: поддержка CamelCase, PascalCase, Snake_case и SCREAMING_SNAKE_CASE.
• Настраиваемый вывод: создание констант с помощью пользовательских шаблонов и путей к файлам.
• Преобразование атрибутов: автоматически преобразует атрибуты SVG, такие как непрозрачность, непрозрачность заполнения, обводка и заливка, в строки пути.
• Один или несколько выходных данных: создайте один выходной файл или несколько файлов на основе вашей входной структуры.

Начало работы с константами svg-path

Вы можете сразу начать использовать константы svg-path с помощью npx:

npx svg-path-constants@latest

Кроме того, вы можете установить его глобально или как зависимость от разработчика:

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

Пример использования

Основное использование

Предположим, у вас есть файлы SVG в src/assets/icons и вы хотите сгенерировать константы в src/comComponents/Icon/paths.js:

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

Пример вывода:

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

Пользовательский формат именования

Укажите другой формат именования, например PascalCase:

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

Пример вывода:

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

Использование шаблона для вывода

Управляйте именованием и выводом файлов с помощью специального шаблона:

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

Пример вывода:

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

svg-path-constants может преобразовывать атрибуты SVG, такие как непрозрачность, заливка-непрозрачность, обводка и заливка, в компоненты строки пути.

Пример SVG:

Сгенерированная константа пути:

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

• непрозрачность="0,5" становится o0,5
• fill-opacity="0,8" становится O0,8
• инсульт="#ff0000" становится fff000
• fill="#00ff00" становится F00ff00

Эта функция позволяет хранить важную информацию о стиле непосредственно в строке пути, сохраняя компактное и информативное представление.

Пример: использование констант пути SVG в компоненте React

После того как вы сгенерировали константы пути SVG с помощью svg-path-constants, вы можете легко интегрировать их в свои компоненты React. Это не только сохраняет ваш код чистым, но и позволяет легко повторно использовать пути SVG в вашем приложении.

Шаг 1. Создайте константы пути SVG

Предположим, вы уже выполнили следующую команду для создания констант из файлов SVG:

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

Эта команда создает файл src/comComponents/Icon/paths.js с такими константами, как:

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

Шаг 2. Создайте компонент React для рендеринга SVG

Теперь давайте создадим компонент React, который отображает эти SVG-значки с использованием сгенерированных констант.

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;

Шаг 3. Используйте компонент в своем приложении

Теперь вы можете использовать компонент IconDemo в любом месте вашего приложения React для отображения значков SVG:

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

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

Объяснение:

1. Функция parsePathData:

   • Это необходимо, только если в файле SVG задана непрозрачность или несколько цветов.
   • Функция parsePathData обрабатывает строку расширенного атрибута d, извлекая такие команды, как o (непрозрачность), F (цвет заливки) и f (цвет обводки).
   • Он разбивает строку на основе этих команд, применяет соответствующие атрибуты и возвращает массив элементов пути.

2. Компонент SvgIcon:

   • Этот компонент принимает строку атрибута d, анализирует ее с помощью parsePathData и отображает пути SVG.
   • Компонент позволяет настраивать такие реквизиты, как размер и цвет.

3. Компонент IconDemo:

   • Это демонстрационный компонент, который показывает, как использовать компонент SvgIcon с различными строками d, размерами и цветами.

Что дальше? Добавление растровых изображений в константы

Сейчас я работаю над библиотекой npm, которая улучшит константы svg-path за счет добавления растровых изображений (PNG) в качестве комментариев над каждой сгенерированной константой. Это обеспечит визуальное представление значка непосредственно в вашем коде, что упростит идентификацию путей SVG и управление ими.

Заключение

Управление путями SVG в проектах React не должно быть проблемой. С помощью svg-path-constant вы можете поддерживать порядок в своих значках, чистоту кода и эффективность рабочего процесса. И вскоре, с появлением новой библиотеки для добавления растровых изображений в комментарии к значкам, у вас появится еще более наглядный и интуитивно понятный способ управления вашими SVG-ресурсами.

Попробуйте svg-path-constants сегодня:

npx svg-path-constants@latest

И следите за обновлениями!