SVG가 JS에 포함되는 경우

<svg viewBox="0 0 300 300">
  <g>
    <path d="M0 200 v-200 h200 a100,100 90 0,1 0,200 a100,100 90 0,1 -200,0z" />
  </g>
</svg>

//...

// App.jsx
import HeartIcon from "./HeartIcon.svg";
const App = () => <HeartIcon fill="red" />;

JSX의 일부로 사용이 될 때

svgr 같은 로더를 사용하기도 함

SVG-in-JS가 안티 패턴인 이유

JS 파싱과 컴파일 과정을 거쳐야 함
바이트 단위의 자바스크립트는 같은 크기의 이미지나 웹 폰트보다 브라우저 처리 비용이 더 많이 듭니다.
- Tom Dale, web.dev
React의 경우 하이드레이션도 필요, 컴포넌트 트리가 클 수록 하이드레이션 비용이 커짐