React.js アプリケーションを構築する場合、SVG アイコンを効率的に管理することが重要です。 SVG はレスポンシブ デザインに必要なスケーラビリティと柔軟性を提供しますが、大規模なプロジェクトでの取り扱いは煩雑になる可能性があります。そこで svg-path-constants が登場します。これは、SVG パスを再利用可能な定数に変換することで SVG ワークフローを合理化するように設計された CLI ツールです。

なぜ SVG なのか、なぜ定数なのか?

前の記事「React.js プロジェクトにおける SVG アイコン管理オプションの包括的な比較」では、インライン SVG、SVG スプライト、各アイコンの React コンポーネントの使用など、SVG アイコンを管理するためのさまざまな方法について説明しました。各方法には長所と短所がありますが、SVG パスを整理して再利用可能に保つという課題が 1 つ残っています。

SVG パスに定数を使用すると、バンドル サイズが小さくなり、ビルド時間が短縮されます。

svg パス定数とは何ですか?

svg-path-constants は、SVG ファイルから定数を生成するのに役立つ CLI ツールで、React プロジェクトでの SVG アイコンの統合と管理を容易にします。 SVG パスを JS 定数に変換し、柔軟な命名規則をサポートし、カスタマイズ可能な出力を可能にします。

主な特徴:

• SVG ファイルから定数を生成: SVG パスを定数にすばやく変換します。
• 柔軟な命名規則: キャメルケース、パスカルケース、スネークケース、および 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 の例:

生成されたパス定数:

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: SVG をレンダリングするための React コンポーネントを作成する

次に、生成された定数を使用してこれらの SVG アイコンをレンダリングする React コンポーネントを作成しましょう。

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: アプリケーションでコンポーネントを使用する

React アプリケーションのどこでも IconDemo コンポーネントを使用して、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 で解析し、S​​VG パスをレンダリングします。
   • このコンポーネントでは、サイズや色などの小道具を使用してカスタマイズできます。

3. アイコンデモコンポーネント:

   • これは、さまざまな d 文字列、サイズ、色で SvgIcon コンポーネントを使用する方法を示すデモ コンポーネントです。

次は何ですか?ラスター画像を定数に追加する

私は現在、生成された各定数の上にコメントとしてラスター画像 (PNG) を追加することで svg-path-constants を強化する npm ライブラリに取り組んでいます。これにより、コード内でアイコンが直接視覚的に表現され、SVG パスの識別と管理が容易になります。

結論

React プロジェクトでの SVG パスの管理は面倒ではありません。 svg-path-constants を使用すると、アイコンを整理し、コードをクリーンに保ち、ワークフローを効率的に保つことができます。そして間もなく、アイコンのコメントにラスター画像を追加するためのライブラリが追加される予定で、SVG アセットをさらに視覚的かつ直感的に管理できるようになります。

今すぐ svg-path-constants を試してください:

npx svg-path-constants@latest

さらなる最新情報をお楽しみに！