Three ways to use SVG in React
1. Import as a file: `import Logo from './logo.svg'` — simple, but not styleable per instance.
2. Inline JSX: paste the SVG markup into your component — styleable, tree-shakeable, but needs attribute conversion.
3. Icon component: convert the SVG to a React component and pass colors as props.
Converting SVG to JSX
JSX needs camelCase attributes: stroke-width becomes strokeWidth, class becomes className. The SVG to JSX converter does this automatically.
Styling inline SVGs
Use fill and stroke as props:
`function Logo({ color }) { return <svg fill={color}>…</svg>; }`
Performance notes
- Inline SVGs avoid extra HTTP requests
- Optimize before converting to keep bundles small
- Memoize icon components to prevent re-renders
Convert your first SVG to JSX now.