Question 46192 in React native Question posted in
The official React Native documentation can be found here.

Using SVGs in a React Native app: better to store them locally or serve from CDN?

I’m working on a pretty big React Native app and have over 20 SVG images saved in an "assets" folder. I’m wondering if it’s okay to keep using them from this folder, or if it would be better to serve them from a CDN.

Here’s an example of the code I have for one of the SVG files in my assets folder:

import React from "react";
import Svg, { Path, Line } from "react-native-svg";

interface Props {
  size?: number;
  color?: string;
  filled?: boolean;
}

export default function Message({ color, size, filled }: Props) {
  return (
    <>
      {filled ? (
        <Svg width={size} height={size} viewBox="0 0 22 20" fill="none">
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H16C18.2091 18 20 16.2091 20 14V4C20 1.79086 18.2091 0 16 0H4ZM4.41603 4.37592C4.07138 4.14616 3.60573 4.23929 3.37597 4.58393C3.1462 4.92858 3.23933 5.39423 3.58398 5.624L7.36518 8.1448C8.9607 9.20848 11.0393 9.20848 12.6348 8.14479L16.416 5.624C16.7607 5.39423 16.8538 4.92858 16.624 4.58393C16.3943 4.23929 15.9286 4.14616 15.584 4.37592L11.8028 6.89672C10.7111 7.6245 9.2889 7.6245 8.19723 6.89672L4.41603 4.37592Z"
            fill={color}
          />
        </Svg>
      ) : (
        <Svg width={size} height={size} viewBox="0 0 22 20" fill="none">
          <Path
            d="M5.41603 5.37596C5.07138 5.1462 4.60573 5.23933 4.37596 5.58397C4.1462 5.92862 4.23933 6.39427 4.58397 6.62404L5.41603 5.37596ZM8.7812 8.5208L9.19723 7.89676L8.7812 8.5208ZM13.2188 8.5208L12.8028 7.89676L13.2188 8.5208ZM17.416 6.62404C17.7607 6.39427 17.8538 5.92862 17.624 5.58397C17.3943 5.23933 16.9286 5.1462 16.584 5.37596L17.416 6.62404ZM5 1.75H17V0.25H5V1.75ZM20.25 5V15H21.75V5H20.25ZM17 18.25H5V19.75H17V18.25ZM1.75 15V5H0.25V15H1.75ZM5 18.25C3.20507 18.25 1.75 16.7949 1.75 15H0.25C0.25 17.6234 2.37665 19.75 5 19.75V18.25ZM20.25 15C20.25 16.7949 18.7949 18.25 17 18.25V19.75C19.6234 19.75 21.75 17.6234 21.75 15H20.25ZM17 1.75C18.7949 1.75 20.25 3.20507 20.25 5H21.75C21.75 2.37665 19.6234 0.25 17 0.25V1.75ZM5 0.25C2.37665 0.25 0.25 2.37665 0.25 5H1.75C1.75 3.20507 3.20507 1.75 5 1.75V0.25ZM4.58397 6.62404L8.36518 9.14484L9.19723 7.89676L5.41603 5.37596L4.58397 6.62404ZM13.6348 9.14484L17.416 6.62404L16.584 5.37596L12.8028 7.89676L13.6348 9.14484ZM8.36518 9.14484C9.9607 10.2085 12.0393 10.2085 13.6348 9.14484L12.8028 7.89676C11.7111 8.62454 10.2889 8.62454 9.19723 7.89676L8.36518 9.14484Z"
            fill={color}
          />
        </Svg>
      )}
    </>
  );
}
Tags:

2

Answers


  1. 0

    Serve the images from CDN. It will make your app smaller and offer you performance benefit due to caching. It will allow images to be cached on the user’s device hence reducing the load time for subsequent requests.

    Login or Signup to reply.
  2. 0

    If those SVGs are used for UI controls that are required to make your app usable, there is no benefit in pushing them to CDN.

    Yes, your initial app size would be smaller, but you would hide that cost until later once user would start using your app, and it would even be worse because a request would have to be made for each of those assets. And if each user gets to see those SVGs, you can imagine how many requests and how much waiting time that would mean.

    SVGs also tend to be fairly small and one can usually minify them to shrink them further, so even more than 20 SVGs shouldn’t increase the app’s size much.

    Now this is opinionated, but I’d generally put to CDN those images that are not critical for app load, ie. user can wait for them before they load, and then one can benefit from all the advantages of CDN.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search