【Storybook】publicなassetsをStorybookで使いたい

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と設定して再起動したら無事表示された