Import String and convert to JSX in Expo - react-native

Question

I would like to import a file as a String. Edit it. Then convert it to a JSX element.
Specifically, one use-case would be to import an svg file. Edit it so that it's compatible with React Native. Then convert it to a JSX element that can be reused.
I can't seem to get a string from importing .svg files and I would prefer not to change it to .txt as other projects already use these files and we also need to keep things DRY.
How can I import this:
<svg xmlns="http://www.w3.org/2000/svg" width="24.25" height="26.52">
<defs>
<style>
.circle, .line {
stroke: #77bc1f;
stroke-linecap: round;
stroke-width: 3.48px;
}
.circle {
fill: none;
}
.line {
fill: #9f9;
}
</style>
</defs>
<title>Logo Icon</title>
<path class="circle" fill="none" d="m19.12166,7a10.27,10.27 0 1 1
-14,0"/>
<line class="line" fill="#9f9" x1="12.06166" y1="1.74"
x2="12.06166" y2="14.88"/>
</svg>
And convert it into this:
<Svg width={24.25} height={26.52}>
<Path
class="circle"
fill="none"
d="m19.12166,7a10.27,10.27 0 1 1 -14,0"
stroke="#77bc1f"
strokeLinecap="round"
strokeWidth="3.48px"
/>
<Line
class="line"
stroke="#77bc1f"
strokeLinecap="round"
strokeWidth="3.48px"
fill="#000"
x1="12.06166"
y1="1.74"
x2="12.06166"
y2="14.88"
/>
</Svg>
Dynamically?

Answer 1

Great question. I never thought about with react native. I know with react you can do dangerouslySetInnerHTML. Please let me know if this works for you with rwact-native.
If doesn't may be try this from
https://medium.com/#remarkablemark/an-alternative-to-dangerously-set-innerhtml-64a12a7c1f96
Now to import the svg, there are multiple options to do that
Option 1. Use react-native-remote-svg
For example
import Image from 'react-native-remote-svg';
const SVGComponent = '<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect></svg>';
<Image
source={{
uri: "data:image/svg+xml;utf8," + SVGComponent
}}/>
Option 2:
Use WebView
<WebView
source={{ html: svgstring }}
/>