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

前言

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

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

Svg2SvgIcon

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

Cytrogen/SVG2SvgIcon - GitHub

点击这里传送。

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

plaintext
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 项目中即可使用

alt text

技术栈与开源

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

  • React
  • Material-UI
  • DOMParser

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