Convert SVG from Illustrator to a React Typescript Component (Works in Chrome and IE11+)

ParentComponent.tsx

import * as React from 'react'

export function IconUsage() {
  
  return (
    <div style={{ height: "100%", display: "flex" }}>
        <div style={{ height: "40px", width: "40px" }} /* Size icon from parent. Event handlers go here */>
            <CircleIcon />
        </div>
        /* you can add other html here and position it with flexbox */
    </div>
  )
}

ReactIcon.tsx

import * as React from 'react'

export function CircleIcon({stroke = "#8BC53F"}) {
    return (
        // Add height: "100%" to svg style so the icon grows
        <svg viewBox="0 0 40 40" style={{ height: "100%", "fill": "none", "stroke": stroke, "strokeLinecap": "round", "strokeLinejoin": "round", "strokeWidth": "2px" }}>
            <circle cx="20" cy="20" r="10"/>
        </svg>
    )
}

sample.svg

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
  <title>Artboard 6</title>
  <circle cx="20" cy="20" r="10" style="fill: none;stroke: #414042;stroke-linecap: round;stroke-linejoin: round;stroke-width: 2px"/>
</svg>

settings.md

Illustrator Format Settings - SVG

• Styling: Inline Style
• Font: SVG
• Images: Preserve
• Object IDs: Layer Names
• Decimal: 2
• Minify: Unchecked
• Responsive: Checked

this was extremely helpful thank you. I was trying to get an svg graphic to work in react and just needed a little nudge.