Serving static files in "storybook js"

If someone come across same problem, try code below (I am using: storybook, react - without create react app, typescript) :

First issue was about typescript and here is what worked for me: I created custom.d.ts file in root folder and put this code inside:

declare module "*.svg" {
  const content: string;
  export default content;
}

declare module "svg-inline-react" 

Then I add this file inside tsconfig.json like this:

"files": [
  "./custom.d.ts"
],

After that, error - "could't find imageName.svg" disappeared, but svg-inline-react still didn't show icon, now problem was inside 'webpack.config.js' file, fixed code is written below.

const path = require('path');

module.exports = ({ config }) => {

  config.module.rules = config.module.rules.map( data => {
    // This overrides default svg rouls of storybook, and after that we can use 
   //svg-inline-loader.
    if (/svg\|/.test( String( data.test ) ))
      data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani) 
 (\?.*)?$/;
    return data;
  });

    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      });
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('awesome-typescript-loader'),
        },
      ],
    });
    config.module.rules.push({
      test: /\.svg$/,
      include: path.resolve(__dirname, '../'),
      loader: 'svg-inline-loader'
    });

    config.resolve.extensions.push('.ts', '.tsx')
    return config;
};

^_^

Configuring the static folder in the storybook-start script worked for me:

Documentation: Static Files Via Directory

You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag.

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public -p 9001"
  }
}

Good Luck...