如何将 SVG 转换为 React 组件：完整指南
发布: (2026年2月23日 GMT+8 01:38)
2 分钟阅读
原文: Dev.to
Source: Dev.to
使用 SVG 作为 React 组件的好处
- 动态属性 – 通过组件 props 更改
fill、stroke、width、height等。 - Tree shaking – 只打包实际使用的图标。
- TypeScript 支持 – 使用
React.SVGProps实现完整的类型安全。 - 动画 – 使用 CSS 或 Framer Motion 等库进行动画处理。
属性转换
| HTML 属性 | JSX 属性 |
|---|---|
class | className |
stroke-width | strokeWidth |
fill-rule | fillRule |
clip-path | clipPath |
stroke-linecap | strokeLinecap |
// React JSX删除 xmlns
在 JSX 中，xmlns 属性是多余的。
// 删除此行
// 只保留下面的内容示例 React 组件
import React from 'react';
const MyIcon: React.FC> = (props) => (
);
export default MyIcon;转换工具
- SVG to React Converter – 快速将 SVG 标记转换为 React 组件，具备：
- 自动将属性转换为 camelCase
- 替换
className - TypeScript
SVGProps类型 - 使用 props 扩展实现自定义
- SVG to JSX Converter – 将 SVG 转换为 JSX，且不包装成组件。
- HTML to React Converter – 将完整的 HTML 转换为 React 组件。
- HTML to JSX Converter – 将 HTML 转换为 JSX 语法。