构建 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:
|
1
|
npx svg-path-constants@latest
|
或者，您可以全局安装它或作为开发依赖项：
|
1
2
|
npm install -g svg-path-constants
npm install --save-dev svg-path-constants
|
用法示例
基本用法
假设您在 src/assets/icons 中有 svg 文件，并且想要在 src/components/icon/paths.js 中生成常量：
|
1
|
npx svg-path-constants@latest -i src/assets/icons -o src/components/icon/paths.js
|
输出示例：
|
1
2
3
|
export const foldericon1 = "m10 10 h 90 v 90 h 10 z";
export const foldericon2 = "m20 20 h 80 v 80 h 20 z";
|
自定义命名格式
指定不同的命名格式，如 pascalcase:
|
1
|
npx svg-path-constants@latest -i src/assets/icons -o src/components/icon/paths.js -f pascalcase
|
输出示例：
|
1
2
3
|
export const foldericon1 = "m10 10 h 90 v 90 h 10 z";
export const foldericon2 = "m20 20 h 80 v 80 h 20 z";
|
使用模板进行输出
使用自定义模板控制命名和文件输出：
|
1
|
npx svg-path-constants@latest -i src/assets/icons -o src/components/icon/{-2,-1}/{0}.js -t "{1,-3}"
|
输出示例：
|
1
2
3
4
5
|
export const foldericon1 = "m10 10 h 90 v 90 h 10 z";
export const foldericon2 = "m20 20 h 80 v 80 h 20 z";
|
处理 svg 属性
svg-path-constants 可以将 svg 属性（如不透明度、填充不透明度、描边和填充）转换为路径字符串的组件。
svg 示例：
|
1
|
<svg><path d="m10 10 h 90 v 90 h 10 z" opacity="0.5" fill-opacity="0.8" stroke="#ff0000" fill="#00ff00"></path></svg>
|
生成的路径常量：
|
1
|
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 文件生成常量：
|
1
|
npx svg-path-constants@latest -i src/assets/icons -o src/components/icon/paths.js
|
此命令生成一个文件 src/components/icon/paths.js ，其中包含如下常量：
|
1
2
3
|
export const foldericon1 = "m10 10 h 90 v 90 h 10 z";
export const foldericon2 = "m20 20 h 80 v 80 h 20 z";
|
第 2 步：创建一个 react 组件来渲染 svg
现在，让我们创建一个 react 组件，使用生成的常量渲染这些 svg 图标。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import react from 'react';
import { foldericon1, foldericon2 } from './paths';
const parsepathdata = (d) => {
const pathelements = [];
const pathcommands = d.split(/(o[\d.]+|o[\d.]+|f[0-9a-fa-f]+|f[0-9a-fa-f]+)/);
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">
{pathelements.map((attrs, index) => (
<path key="{index}"></path>
))}
</svg>
);
};
const icondemo = () => (
<div>
<h2>svg icon examples</h2>
<div>
<h3>folder icon 1</h3>
<svgicon path="{foldericon1}" size="{48}" color="blue"></svgicon>
</div>
<div>
<h3>folder icon 2</h3>
<svgicon path="{foldericon2}" size="{48}" color="green"></svgicon>
</div>
</div>
);
export default icondemo;
|
第 3 步：在您的应用程序中使用该组件
您现在可以在 react 应用程序中的任何位置使用 icondemo 组件来显示 svg 图标：
|
1
2
3
4
5
6
7
8
|
import react from 'react';
import reactdom from 'react-dom';
import icondemo from './components/icon/icondemo';
reactdom.render(
<react.strictmode><icondemo></icondemo></react.strictmode>,
document.getelementbyid('root')
);
|
解释：
-
parsepathdata 函数:
- 仅当 svg 文件中有不透明度或多种颜色时才需要。
- parsepathdata 函数处理扩展的 d 属性字符串，提取 o（不透明度）、f（填充颜色）和 f（描边颜色）等命令。
- 它根据这些命令分割字符串，应用相应的属性，并返回路径元素数组。
-
svgicon 组件:
- 该组件采用 d 属性字符串，使用 parsepathdata 解析它，并渲染 svg 路径。
- 该组件允许通过尺寸和颜色等道具进行自定义。
-
icondemo 组件:
- 这是一个演示组件，展示了如何使用具有不同 d 字符串、大小和颜色的 svgicon 组件。
接下来是什么？将光栅图像添加到常量
我目前正在开发一个 npm 库，该库将通过在每个生成的常量上方添加光栅图像（png）作为注释来增强 svg-path-constants。这将直接在代码中提供图标的可视化表示，从而更轻松地识别和管理 svg 路径。
结论
管理 react 项目中的 svg 路径并不一定很麻烦。使用 svg-path-constants，您可以保持图标井井有条，代码整洁，工作流程高效。很快，随着即将推出的用于将光栅图像添加到图标注释的库，您将拥有一种更加直观的方式来管理您的 svg 资源。
今天尝试 svg-path-constants：
|
1
|
npx svg-path-constants@latest
|
