跳到主要内容
Numio

无缝对接：SVG To React Native — Numio

将 SVG 标记转换为从 react-native-svg 导入 Svg、Path、G 等元素的 React Native 组件。先运行 SVGO 优化，属性变为 JSX prop，数值以数字形式输出（strokeWidth={2}）。

把从 Figma 或 Sketch 导出的图标转换为组件，用于使用 react-native-svg 的 Expo 或 React Native 应用。

SVG

React Native

适用场景

  • 把从 Figma 或 Sketch 导出的图标转换为组件，用于使用 react-native-svg 的 Expo 或 React Native 应用。
  • 在作为原生组件发布前，精简臃肿的 SVG（title、编辑器元数据、未使用的 defs）。

使用方法

  1. 将 SVG 标记粘贴到 SVG 编辑器或拖入 .svg 文件；输入必须是有效的 SVG，否则会提示 "This is not a valid svg code."
  2. 打开 SVGO 设置，可关闭优化或切换单个插件，例如 remove title、remove view box 或 merge paths；编辑器下方的预览会对比原始 SVG 和优化后的 SVG。
  3. 将 React Native 面板的输出复制到 .js 或 .tsx 文件中，并在应用中安装 react-native-svg。

SVG 标记

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

React Native 组件（react-native-svg）

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

功能与限制

SVGO 优化在浏览器的 Web Worker 中运行，但 JSX 生成在服务器上完成：优化后的 SVG 会 POST 到 /api/svg-to-jsx，由其以 native: true 运行 SVGR。

react-native-svg 不支持的元素会被移除，SVGR 会添加 /* SVGR has dropped some elements not supported by react-native-svg: filter */ 这样的注释。

SVGO 会内联 <style> 规则，再把样式声明转为属性，因此 style="stroke:blue" 会变为 stroke="#00f"（stroke prop）。<title> 默认会被移除。

width、height 和 viewBox 会保留，{...props} 展开在根 Svg 上，便于覆盖尺寸或颜色。

FAQ

输出需要 react-native-svg 吗？

需要。组件从 react-native-svg 导入 Svg 以及 Path、Circle、G 等元素组件，必须在项目中安装该库；它无法用普通的 React Native View 工作。

能保留 viewBox 让图标可缩放吗？

可以。remove view box 默认关闭，因此 viewBox 会保留在 Svg 元素上。使用组件时传入 width 和 height prop 即可缩放。

滤镜和渐变会怎样？

没有 react-native-svg 对应元素的元素（例如 filter）会被丢弃，并在文件顶部添加注释。未使用的渐变会被 SVGO 的 remove useless defs 移除。

我的 SVG 会被上传吗？

优化后的 SVG 会发送到页面的 /api/svg-to-jsx 端点以生成组件；优化步骤和预览都在浏览器中完成。

规范与参考资料