Reactアプリケーション内でSVGアイコンを以下のようによびだしている
<svg> <use href="/public/sprite.svg#icon-star" /> </svg>
ただ、このままだとStorybookで表示できないことに気づいたので対処方法を調べた
Storybookのpublicなassetsを表示する方法は以下にあった storybook.js.org
// .storybook/main.js module.exports = { stories: [], addons: [], staticDirs: ['../public'], };
これで、../public/sprite.svg
にあるファイルを/public/sprite.svg
でアクセスできるようになる
ただ、自分のアプリではスプライトSVGは../statics
ディレクトリにあるので、../statics/sprite.svg
にあるファイルを/public/sprite.svg
でアクセスできるようにするという特殊なことがしたい
調べたらドキュメントの下の方に書いてあった
// .storybook/main.js module.exports = { staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }], };
from
に../statics
、to
に/public
と設定して再起動したら無事表示された