我有时候会根据自己当前的需求，写一些简单的小工具。现在希望将这些工具背后的思考和成果整理成博客文档，分享给有着同样需求的朋友们。

前言

作为一名常用 Material-UI 的开发者，我经常需要将各种 SVG 图标集成到项目中。虽然 Material-UI 本身提供了丰富的图标库，但很多时候我们还是会遇到需要自定义图标的情况。例如在网站的落地页上加一个大大的 logo，把它设置成五彩斑斓的黑色……

过去要这么做，得手动封装 SVG、将其转换为 React 组件。这么搞很浪费时间，我因此萌生出将其自动化的想法、写了 Svg2SvgIcon。

Svg2SvgIcon

Svg2SvgIcon 是一个纯客户端的在线转换工具，它可以将任意 SVG 代码或文件、快速转换为可以直接在你的 React 项目中使用的 Material-UI SvgIcon 组件。

点击这里传送。

或者自行复制到浏览器内：

1	https://svg2svgicon.cytrogen.icu/

核心功能

该工具的核心设计理念是高效、易用和安全。纯客户端意味着你上传或粘贴的任何 SVG 数据都只会在你的浏览器中进行处理、不会发送到任何服务器，最大限度地保障了你的隐私和数据安全。

以下是 Svg2SvgIcon 的主要功能：

• 智能的 viewBox 解析：
  • 自动读取 SVG 中已有的 viewBox 属性
  • 若 viewBox 不存在，会使用 SVG 的 width 和 height 属性来生成
  • 若以上全无，则默认使用 0 0 24 24，确保图标能正确显示
• 实时预览与控制器：
  • 在输入或修改 SVG 后，你可以立即在预览窗口中看到转换后的图标效果
  • 提供实时控制器，方便你精确调整 viewBox 的 min-x、min-y、width 和 height 值，所有调整都会立刻反映在预览图标上
  • 提供“重置”按钮，一键恢复到原始的 viewBox 值
• 全面的 SVG 解析能力：
  • 支持解析嵌套元素，例如 <g> 标签
  • 正确处理并转换行内的 style 属性为 React 的 style 对象
• 内置错误控制台：
  • 内置一个可抽拉的错误控制台，当发生解析错误时会自动滑出提示
  • 右下角的浮动按钮会用红点标记未读错误，方便你随时查看
• 一键复制
  • 自动生成可以直接在项目中使用的 React 组件代码，并提供“一键复制”功能

如何使用

使用 Svg2SvgIcon 非常简单，只需几步：

1. 输入 SVG 或者上传一个 .svg 文件
2. 为即将生成的 React 组件起一个合适的名称
3. 点击“转换 SVG”按钮，右侧会立刻显示图标预览和生成的代码
4. （可选）调整 viewBox
5. 点击“复制代码”按钮，然后将代码粘贴到你的 React 项目中即可使用

技术栈与开源

Svg2SvgIcon 的核心技术栈非常精简：

• React
• Material-UI
• DOMParser

这个项目已在 GitHub 上开源，并采用 MIT 许可证。