自社サイトをスマホでみてみたらアイコンが全部表示されていない障害をみつけてしまった
原因は最近対応したこれだった
webpackのurl-loaderをつかって、スプライトSVGをimportするようにして、次のようにSVGアイコンを実装していた
<svg> <use href={sprite + "#icon-star"} /> </svg>
これはPCのChormeでは問題なく表示されていたが、iPhone（Mac Safariもダメだった）では表示されていなかった
HTMLをみると次のようにレンダリングされており
<use href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj....#icon-star />
次のようにコンソールエラーが発生していた
Unsafe attempt to load URL data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj....#icon-star
おそらくSame-origin policyかと思われるが、調査しても手立てがなかったので、webpackのurl-loaderの利用をやめて、/publicにスプライトSVGをおき
<svg> <use href={"/public/sprite.svg#icon-star"} /> </svg>
というように修正した
svgファイルのダウンロードが発生する分パフォーマンスに影響あるかもだが、いったんこれで凌ぎたい
