How To use in React Native

[quddus-larik]

I am trying to use in react native. but, I can use it by manually copy paste SVG. I want to use it dynamically by using Import in React Native. Is it available for React Native?

[vincere-mori]

For React Native I would not use @thesvg/react directly, since that package is for web React components.

The base thesvg package gives you raw SVG strings, so in React Native you can render them with react-native-svg:

import { SvgXml } from 'react-native-svg';
import github from 'thesvg/github';

export function GithubIcon() {
  return <SvgXml xml={github.svg} width={24} height={24} />;
}

Install both packages:

npm install thesvg react-native-svg

If by dynamic import you mean choosing an icon by name at runtime, Metro still needs to know possible imports at build time. A small map is usually the safest option:

const icons = {
  github: () => import('thesvg/github'),
  figma: () => import('thesvg/figma'),
};

For truly arbitrary icon names, use the CDN/API URL, fetch the SVG XML, and pass it to SvgXml.