React で SVG を描画するための use タグでは xlinkHref を使う

React で use tag 使うときの躓き

結論

sprite - SVG use tag and ReactJS - Stack Overflow にある通り xlinkHref を使うとよい。

<svg>
  <use xlinkHref="#my-logo" />
</svg>

古いバージョンでは dangerouslySetInnerHTML を使うしか回避策が無かったようだが、今ではこの方法は避けたほうが良い。

HTML と同じノリで SVG を render できるかと思ったら compile error になってしまった

<svg>
  <use href="#my-logo" />
</svg>

TS2559: Type '{ href: string; }' has no properties in common with type 'SVGProps<SVGUseElement>'.

xlink もダメ

<svg>
  <use xlink:href="#my-logo" />
</svg>

TS1003: Identifier expected.