storybookのチュートリアルで、アイコンが読み込めません

前提・実現したいこと

storybookのチュートリアルを進めています。
https://www.learnstorybook.com/intro-to-storybook/react/ja/get-started/
こちらの「はじめに」を進めているところです。
cssのコピペを終え、アイコンとフォントをpublicフォルダに入れた所次のようなエラーになってしまいました。

CSS とアセットを追加すると、アプリケーションの描画が崩れてしまいますが、そのままで問題ありません。今はアプリケーションに手はつけません。まずは一つ目のコンポーネントを作り始めましょう！
とチュートリアルに書いてあるのですが、この描画が崩れるというのがこのエラーのことなのでしょうか。

発生しているエラーメッセージ

ポート3000の方でエラーが起きています。
storybookの方でエラーは起きていません。

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve '/icon/percolate.woff?5w3um4' in '/Users/ユーザーネーム/Desktop/ts-app/src'

試したこと

他の方が
./.storybook/config.js で index.css を読み込む
ということをされていたので、真似してみたのですが、別のエラーが発生してstorybookが開けなくなったので、さくじょしました。

javascript
1import { configure } from '@storybook/react';
2// 追加
3import '../src/index.css';
4
5// automatically import all files ending in *.stories.js
6configure(require.context('../src/stories', true, /.stories.js$/), module);