简化 SVG 管理：将路径转换为单个 JS 常量文件

构建 React.js 应用程序时，有效管理 SVG 图标至关重要。 SVG 提供了响应式设计所需的可扩展性和灵活性，但在大型项目中处理它们可能会变得很麻烦。这就是 svg-path-constants 的用武之地，它是一个 CLI 工具，旨在通过将 SVG 路径转换为可重用常量来简化 SVG 工作流程。

为什么使用 SVG 和常量？

在上一篇文章“React.js 项目中 SVG 图标管理选项的综合比较”中，我讨论了管理 SVG 图标的各种方法，包括内联 SVG、SVG 精灵以及为每个图标使用 React 组件。虽然每种方法都有其优点和缺点，但仍然存在一个挑战：保持 SVG 路径井然有序且可重用。

使用 SVG 路径常量可提供较小的包大小和快速的构建时间。

什么是 svg 路径常量？

svg-path-constants 是一个 CLI 工具，可帮助您从 SVG 文件生成常量，从而更轻松地在 React 项目中集成和管理 SVG 图标。它将 SVG 路径转换为 ​​JS 常量，支持灵活的命名约定，并允许自定义输出。

主要特点：

• 从 SVG 文件生成常量：快速将 SVG 路径转换为常量。
• 灵活的命名约定：支持camelCase、PascalCase、snake_case和SCREAMING_SNAKE_CASE。
• 可自定义输出：使用自定义模板和文件路径生成常量。
• 属性转换：自动将 SVG 属性（如不透明度、填充不透明度、描边和填充）转换为路径字符串。
• 单个或多个输出：根据您的输入结构生成单个输出文件或多个文件。

svg-path-constants 入门

您可以通过 npx 立即开始使用 svg-path-constants:

npx svg-path-constants@latest

或者，您可以全局安装它或作为开发依赖项安装：

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

用法示例

基本用法

假设您在 src/assets/icons 中有 SVG 文件，并且想要在 src/components/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 示例：

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

生成的路径常量：

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

• opacity="0.5" 变为 o0.5
• fill-opacity="0.8" 变为 O0.8
• 笔画=“#ff0000”变为fff000
• fill="#00ff00" 变为 F00ff00

此功能允许您直接在路径字符串中保留基本样式信息，从而保持紧凑且信息丰富的表示形式。

示例：在 React 组件中使用 SVG 路径常量

使用 svg-path-constants 生成 SVG 路径常量后，您可以轻松地将它们集成到 React 组件中。这不仅可以保持代码整洁，还可以在您的应用程序中轻松重用 SVG 路径。

第 1 步：生成 SVG 路径常量

假设您已经运行以下命令来从 SVG 文件生成常量：

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

此命令生成一个文件 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

第 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 (
        <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;

第 3 步：在您的应用程序中使用该组件

您现在可以在 React 应用程序中的任何位置使用 IconDemo 组件来显示 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')
);

解释：

1. parsePathData 函数:

   • 仅当 SVG 文件中有不透明度或多种颜色时才需要。
   • parsePathData 函数处理扩展的 d 属性字符串，提取 o（不透明度）、F（填充颜色）和 f（描边颜色）等命令。
   • 它根据这些命令分割字符串，应用相应的属性，并返回路径元素数组。

2. SvgIcon 组件:

   • 该组件采用 d 属性字符串，使用 parsePathData 对其进行解析，并渲染 SVG 路径。
   • 该组件允许通过尺寸和颜色等道具进行自定义。

3. IconDemo 组件:

   • 这是一个演示组件，展示如何使用具有不同字符串、大小和颜色的 SvgIcon 组件。

接下来是什么？将光栅图像添加到常量

我目前正在开发一个 npm 库，该库将通过在每个生成的常量上方添加光栅图像 (PNG) 作为注释来增强 svg-path-constants。这将直接在代码中提供图标的可视化表示，从而更轻松地识别和管理 SVG 路径。

结论

管理 React 项目中的 SVG 路径并不一定很麻烦。使用 svg-path-constants，您可以保持图标井井有条，代码整洁，工作流程高效。很快，随着即将推出的用于将光栅图像添加到图标注释的库，您将拥有一种更加可视化和直观的方式来管理您的 SVG 资源。

今天尝试 svg-path-constants：

npx svg-path-constants@latest

敬请关注更多更新！

以上是简化 SVG 管理：将路径转换为单个 JS 常量文件的详细内容。更多信息请关注PHP中文网其他相关文章！