Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app.
kingstinct npx skillmds@latest add kingstinct/svg Software Mansion's production SVG patterns for React Native using React Native SVG.
For API details on specific components and props, webfetch https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md
| File | When to read |
|---|---|
when-to-use.md |
Deciding between react-native-svg, expo-image, @expo/vector-icons, Skia, or Lottie |
svg.md |
Installing react-native-svg; loading SVGs from URIs, XML strings, or files; filters; touch events; performance considerations; known issues |
kingstinct/react-native-healthkit/tree/main/.agents/skills/react-native-best-practices/references/svg commit 7be13846ed