簡化 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中文網其他相關文章！