React - storybook. Bootstrap Icon components don't show in storybook

Question

I am building React storybook components using react-bootstrap. Almost components are completed well. But only some components that includes bootstrap icons don't show in storybook. Is there any way to fix this issue? Thanks.

Answer 1

Sometimes the issue is for linked components, in this case, you need import each icon from SVG.

import {
  faEdit,
  faUser,
  faCartShopping,
  faHeart,
} from "@fortawesome/free-solid-svg-icons";

Don't forget link the components in console with: npm link

Answer 2

import "bootstrap-icons/font/bootstrap-icons.css"; in the .storybook/preview.js file solved that issue.

Answer 3

Two things:

1. import "bootstrap-icons/font/bootstrap-icons.min.css"; in .storybook/preview.js, as mentioned by @li-1001 (note that I recommend using the minified version, though).
2. Add the node_modules/bootstrap-icons/font directory to statically served files. Otherwise you will get a 404, because the bootstrap-icons.woff2 file can't be found. At least that's what I got.

So in .storybook/main.js, do:

module.exports = {
    defaultSettings: {
        staticDirs: [
            '../node_modules/bootstrap-icons/font',
        ],
        // ...

And adjust this package.json script:

"build-storybook": "storybook build -s ../node_modules/bootstrap-icons/font",

-s can take a comma separated list, if you need to serve multiple static directories.