Expo-svg-uri NPM

expo-svg-uri

Overview

SvgUri is a React Native component that allows rendering SVG images from either a URI source or raw XML data. It uses react-native-svg for rendering and supports additional props for customization. Now, this component works for both React Native Bare and Expo client applications.

Features

Load SVG from a remote URL or local asset
Parse and validate SVG XML data
Display a custom loading indicator while fetching
Provide a fallback component if SVG fails to load
Supports additional props from react-native-svg

Installation

npm install --save expo-svg-uri

OR

yarn add expo-svg-uri

OR

pnpm add expo-svg-uri

Usage

Basic Example

import SvgUri from "expo-svg-uri";

export default function Example() {
  return (
    <>
      {/* Load SVG from URL */}
      <SvgUri
        width={200}
        height={200}
        source={{
          uri: "https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/heart.svg",
        }}
      />

      {/* Load SVG from local file */}
      <SvgUri
        width={200}
        height={200}
        source={require("@/assets/images/heart.svg")}
      />

      {/* Load SVG from XML string */}
      <SvgUri
        width={200}
        height={200}
        xml='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M50,30c9-22 42-24 48,0c5,40-40,40-48,65c-8-25-54-25-48-65c 6-24 39-22 48,0 z" fill="#F00" stroke="#000"/>
        </svg>
        '
      />
    </>
  );
}

Props

Prop	Type	Description
`source`	`ImageSourcePropType \\| null`	Remote or local source of the SVG file
`xml`	`string \\| null`	Raw SVG XML string
`loading`	`React.JSX.Element`	Custom loading indicator while fetching
`fallback`	`React.JSX.Element`	Component displayed if SVG fails to load
`onError`	`(error: Error) => void`	Callback when an error occurs
`...props`	`SvgProps & AdditionalProps`	Any additional props for `react-native-svg` elements

Handling Errors

If an invalid SVG is provided, the onError prop will be triggered:

<SvgUri
  source={{ uri: "https://example.com/invalid.svg" }}
  onError={(error) => console.error("SVG Error:", error)}
  fallback={<Text>Error loading SVG</Text>}
  loading={<Text>Loading...</Text>}
/>