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>}
/>

Notes

• This component requires react-native-svg to be installed.
• If using a remote URI, ensure your app has internet permissions enabled.
• Validate your SVG XML before passing it as a prop.

License

This component is open-source and available under the MIT license.

Author

SvgUri is developed by Thong Dang. You can contact me at [email protected].

If you like my project, you can support me or star (like) for it.