你好，很棒的开发人员！如果您经常在React项目中与SVG图标合作，并找到管理和引用它们有点麻烦的过程，那么今天是您的幸运日。我向您介绍 react-svg-sprite-generator ！

什么是React-SVG-Sprite发电机？

React-SVG-Sprite-Generator 是专为React.js开发人员设计的CLI工具。它有助于从装有SVG文件的目录中生成SVG Sprites，自动准备在React应用程序中使用。不过，真正的魔力？生成的名称.js文件，不仅包含您的SVG图标的常数，还包含Inline Base64编码的预览！

为什么要使用？

1. 易用性：使用一个简单的命令，将您的SVG图标目录转换为有组织的精灵，并随附JS和Markdown文档。
2. IDE支持：在诸如VSCODE和WebStorm之类的IDE中，带有实际图像预览中的自动完成。它提高了您的开发速度，尤其是在选择图标时。
3. 没有记忆：告别记住确切的SVG路径或名称。使用自动完成和内联预览，每次选择正确的图标。

入门

安装

npm i --save-dev react-svg-sprite-generator

生成SVG精灵

简单地运行：

svgsprite

或指定来源和目标：

svgsprite --src ./path/to/your/svg/directory --dest ./path/for/generated/files

结构

命令运行后，您的图标现在以整洁的方式结构，并随附JS和Markdown文档。

例如，使用两个图标 icon1.svg 和 icon2.svg ，您得到：

src
└── components
    └── Icon
        ├── sprite.svg
        ├── names.js
        └── Readme.md

用法中的用法

import * as IconNames from './names.js';
import spriteUrl from './sprite.svg';

const Icon: IconType = ({ name:  keyof typeof IconNames }) => {
    return (
        <svg>
            <use xlinkHref={`${spriteUrl}#${name}`} />
        </svg>
    );
};
export default Icon;

import * as IconNames from './names.js';
import Icon  from './Icon.js';

<Icon name={IconNames.ICON1} />

包起来

React-SVG-Sprite生成器在这里为您如何处理React中的SVG图标。尝试一下，让我们在轻而易举的情况下进行图标管理！

如果您觉得库有用，请考虑在GitHub上给它一个星。总是欢迎反馈，PR和问题！