This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

react-native-svg 让你可以在应用中使用 SVG，并支持交互和动画。

安装

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

API

import * as Svg from 'react-native-svg';

Svg

一组绘图基元，例如 Circle、Rect、Path、ClipPath 和 Polygon。它支持大多数 SVG 元素和属性。其实现由 react-native-svg 提供，文档也可在该仓库中查看。

import Svg, { Circle, Rect, SvgProps } from 'react-native-svg';

export default function SvgComponent(props: SvgProps) {
  return (
    <Svg height="50%" width="50%" viewBox="0 0 100 100" {...props}>
      <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
      <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />
    </Svg>
  );
}

提示

以下链接可以帮助你快速上手！

• 正在寻找 SVG？试试 Lucide。
• 使用 Figma 免费创建或修改自己的 SVG。
• 使用 SVGOMG 优化 SVG。这会让代码更小、更易于使用。为了在 Android 上获得最佳效果，请确保不要移除 viewbox。
• 在浏览器中使用 SVGR 将 SVG 转换为 Expo 组件。

了解更多