How to optimize custom svg component in react or react native to only import / load used svg

Question

I am creating a custom category component that will load all of my SVGs listed in an object.

import { type SvgProps } from 'react-native-svg';

import FoodAndDrink from './icon-svgs/food-and-drink.svg';
import TransportOrFuel from './icon-svgs/transport-or-fuel.svg';

const Svgs = {
  foodAndDrink: FoodAndDrink,
  transportOrFueld: TransportOrFuel,
};

export type CategoryIconProps = {
  name: keyof typeof Svgs;
  size?: number;
};

export const CategoryIcon = ({ name, size, ...props }: SvgProps & CategoryIconProps) => {
  const Component = Svgs[name];
  return <Component {...(size && { width: size, height: size })} {...props} />;
};

This will work well. But i'm worried that as my Svg list grows. It will starting to hurt the performance since even though i'm only selecting one svg like this.

<CategoryIcon name="foodAndDrink" size={horizontalScale(32)} />

All the other svgs that aren't being used are still being loaded.

Is there a better approach to work around this so that only the selected SVGs are being loaded?

I have tried to use dynamic import but it expected to be not worked since we need to turn the react-native component into async like this

export const CategoryIcon = async ({ name, size, ...props }: SvgProps & CategoryIconProps) => {
  const Svgs = {
    foodAndDrink: (await import('./icon-svgs/food-and-drink.svg')).default,
    // ... define other SVGs similarly
  };

  const Component = Svgs[name];
  return <Component {...(size && { width: size, height: size })} {...props} />;
};

unfortunately i haven't

Bryan Lumbantobing
– Bryan Lumbantobing

2023-12-19 07:18:13 +00:00
Commented Dec 19, 2023 at 7:18 — Bryan Lumbantobing
– Bryan Lumbantobing, Commented Dec 19, 2023 at 7:18

redberry · Accepted Answer · 2023-08-10 07:53:15Z

0

This is certainly not a bad approach so I wouldn't worry too much about it, unless you have something excessive like 5-10 thousand svgs to manage. Even then the performance is probably not going to be the main issue, but rather maintenance and code readability. With that said, you have an alternative option that can be useful especially if you are preparing to work with a lot of sgvs.

You can add all your sgvs in a .ttf font file (you can use https://fontello.com/ or https://icomoon.io/) and import them with react-native-vector-icons library. That way you have one font file in your app and you can call all svgs in your font. Drawback here is another library and if you want to add another icon you have to redo the whole process from scratch.

answered Aug 10, 2023 at 7:53

redberry

7668 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naresh · Accepted Answer · 2023-12-13 04:24:27Z

0

Another approach could be creating separate component for each SVG icon

Icons/FoodAndDrinkIcon.tsx

import FoodAndDrink from './icon-svgs/food-and-drink.svg';

export const FoodAndDrinkIcon = ({height, width, fill}) => {
    <FoodAndDrink height={height} width={width} fill={fill} />
};

Icons/TransportOrFuelIcon.tsx

import TransportOrFuel from './icon-svgs/transport-or-fuel.svg';

export const TransportOrFuelIcon = ({height, width, fill}) => {
    <TransportOrFuel height={height} width={width} fill={fill} />
};

This way only the icons that we imported will be loaded but we have to create a component for each icon

answered Dec 13, 2023 at 4:24

Naresh

1,29113 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to optimize custom svg component in react or react native to only import / load used svg

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related