ホームページ > 記事 > ウェブフロントエンド > SVG 管理の簡素化: パスを定数の単一の JS ファイルに変換
React.js アプリケーションを構築する場合、SVG アイコンを効率的に管理することが重要です。 SVG はレスポンシブ デザインに必要なスケーラビリティと柔軟性を提供しますが、大規模なプロジェクトでの取り扱いは煩雑になる可能性があります。そこで svg-path-constants が登場します。これは、SVG パスを再利用可能な定数に変換することで SVG ワークフローを合理化するように設計された CLI ツールです。
前の記事「React.js プロジェクトにおける SVG アイコン管理オプションの包括的な比較」では、インライン SVG、SVG スプライト、各アイコンの React コンポーネントの使用など、SVG アイコンを管理するためのさまざまな方法について説明しました。各方法には長所と短所がありますが、SVG パスを整理して再利用可能に保つという課題が 1 つ残っています。
SVG パスに定数を使用すると、バンドル サイズが小さくなり、ビルド時間が短縮されます。
svg-path-constants は、SVG ファイルから定数を生成するのに役立つ CLI ツールで、React プロジェクトでの SVG アイコンの統合と管理を容易にします。 SVG パスを JS 定数に変換し、柔軟な命名規則をサポートし、カスタマイズ可能な出力を可能にします。
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-path-constants は、不透明度、塗りつぶし-不透明度、ストローク、塗りつぶしなどの 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";
この機能を使用すると、重要なスタイル情報をパス文字列内に直接保持し、コンパクトで有益な表現を維持できます。
svg-path-constants を使用して SVG パス定数を生成したら、それらを React コンポーネントに簡単に統合できます。これにより、コードがクリーンに保たれるだけでなく、アプリケーション全体で 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
次に、生成された定数を使用してこれらの 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 ( <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;
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') );
parsePathData 関数:
SvgIcon コンポーネント:
IconDemo コンポーネント:
私は現在、生成された各定数の上にコメントとしてラスター画像 (PNG) を追加することで svg-path-constants を強化する npm ライブラリに取り組んでいます。これにより、コード内でアイコンが直接視覚的に表現され、SVG パスの識別と管理が容易になります。
React プロジェクトでの SVG パスの管理は、面倒なことではありません。 svg-path-constants を使用すると、アイコンを整理し、コードをクリーンに保ち、ワークフローを効率的に保つことができます。そして間もなく、ラスター画像をアイコンのコメントに追加するためのライブラリが追加され、SVG アセットをさらに視覚的かつ直感的に管理できるようになります。
今すぐ svg-path-constants を試してください:
npx svg-path-constants@latest
今後の最新情報もお楽しみに!
以上がSVG 管理の簡素化: パスを定数の単一の JS ファイルに変換の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。