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

2024-08-12 0 527

简化 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:

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

// 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:

1

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

输出示例:

1

2

3

// 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

使用模板进行输出

使用自定义模板控制命名和文件输出:

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

// 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 示例:

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

// 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 图标。

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'; // import the generated svg path constants

const parsepathdata = (d) =&gt; {

    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) =&gt; {

        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 }) =&gt; {

    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) =&gt; (

                <path key="{index}"></path>

            ))}

        </svg>

    );

};

const icondemo = () =&gt; (

    <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')

);

解释:

  1. parsepathdata 函数:

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

    • 该组件采用 d 属性字符串,使用 parsepathdata 解析它,并渲染 svg 路径。
    • 该组件允许通过尺寸和颜色等道具进行自定义。
  3. icondemo 组件:

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

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

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

结论

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

今天尝试 svg-path-constants:

1

npx svg-path-constants@latest

登录后复制
登录后复制

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明
1. 本站所有资源来源于用户上传和网络等,如有侵权请邮件联系本站整改team@lcwl.fun!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系本站工作人员处理!
6. 本站资源售价或VIP只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 因人力时间成本问题,部分源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别!
9.本站所有源码资源都是经过本站工作人员人工亲测可搭建的,保证每个源码都可以正常搭建,但不保证源码内功能都完全可用,源码属于可复制的产品,无任何理由退款!

网站搭建学习网 JavaScript 简化 SVG 管理:将路径转换为单个 JS 常量文件 https://www.xuezuoweb.com/12238.html

常见问题
  • 本站所有的源码都是经过平台人工部署搭建测试过可用的
查看详情
  • 购买源码资源时购买了带主机的套餐是指可以享受源码和所选套餐型号的主机两个产品,在本站套餐里开通主机可享优惠,最高免费使用主机
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

Fa快捷助手
手机编程软件开发

在手机上用手点一点就能轻松做软件

去做软件
链未云主机
免备案香港云主机

开通主机就送域名的免备案香港云主机

去使用
链未云服务器
免备案香港云服务器

支持售后、超低价、稳定的免备案香港云服务器

去使用