valid,invalid

関心を持てる事柄について

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.

環境

  • TypeScript 2.7.2
  • React 16.0.4