跳到正文
SvgJsx
语言: 中文

把 SVG 转换为 React Native（react-native-svg）

React Native 无法直接渲染 <svg> 标签。这个转换器会把 SVG 改写为 Svg、Path、G、Circle 等 react-native-svg 组件，并自动生成正确的导入语句。

快速预设:
将 .svg 文件拖放到这里，或文件通过 FileReader 在本地读取，绝不会上传。
选项
导出方式:
import Svg, { G, Path } from "react-native-svg";
import type { SvgProps } from "react-native-svg";

const HeartIcon = (props: SvgProps) => (
  <Svg width="24" height="24" viewBox="0 0 24 24" {...props}>
    <G id="Layer_1" fill="none" stroke="#e11d48" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <Path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "#e11d48" }} />
    </G>
  </Svg>
);

export default HeartIcon;

提示

  • React Native 不支持 class 属性，已将其移除。

预览

转换后 SVG 的预览
原始 SVG
706 B
优化后 SVG
538 B(-24%)
组件
648 B

React Native 输出有什么不同

react-native-svg 为每个 SVG 元素提供了首字母大写的组件：<path> 变成 <Path>，<g> 变成 <G>，<linearGradient> 变成 <LinearGradient>。转换器会映射所有受支持的元素，只导入实际用到的组件，并把 props 类型设为 SvgProps。

没有原生对应组件的元素，例如 <title>、<desc>、<style> 或 <metadata>，会被删除并给出提示，避免组件在运行时崩溃。class 属性同样会被移除，因为 React Native 没有 CSS 类。

安装 react-native-svg

使用生成的组件：

  • 安装依赖：Expo 项目运行 npx expo install react-native-svg，原生 React Native 项目运行 npm install react-native-svg。
  • 把转换后的代码保存为项目中的 .tsx 或 .jsx 文件。
  • 像普通组件一样渲染它，并传入 width、height 或 color 属性。
  • 开启 currentColor 并传入 color 属性，就能由父组件控制图标颜色。

移动端图标小技巧

图标尽量保持简单：滤镜和遮罩在低端 Android 设备上渲染开销很大。把坐标取整到一到两位小数可以缩小 JavaScript 包体积；非常小的图标优先使用填充而不是描边，因为细描边在非高清屏上容易发虚。

常见问题

支持 Expo 吗？

支持。Expo SDK 已包含 react-native-svg，用 npx expo install react-native-svg 安装后，生成的组件可以在 Expo Go 和开发构建中使用。

为什么我的 <style> 元素被删掉了？

react-native-svg 不支持 CSS 样式表。请在转换前把规则改写为 fill、stroke 等属性，或直接设置在对应元素上。

如何在 React Native 中修改图标颜色？

开启 currentColor，然后给组件传入 color="#ff0000"。react-native-svg 会从 Svg 元素的 color 属性解析 currentColor。

还需要 react-native-svg-transformer 吗？

如果你提前转换好图标，就不需要。transformer 的作用是让你直接导入 .svg 文件，而本工具生成的是无需任何 Metro 配置的普通组件。