自社サイトをスマホでみてみたらアイコンが全部表示されていない障害をみつけてしまった
原因は最近対応したこれだった
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ファイルのダウンロードが発生する分パフォーマンスに影響あるかもだが、いったんこれで凌ぎたい