2024-05-08 작성
How to change favicon and logo in Storybook 8
Table of contents
I had struggled to change favicon and logo in a storybook project.
So I want to share my tip who wants to change them.
1. Storybook version
My storybook version is 8.0.9
2. How To
First, go to .storybook/main.ts. We will change staticDirs which sets a list of directories of static files to be loaded by Storybook server.
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from "@storybook/your-framework";
const config: StorybookConfig = {
framework: "@storybook/your-framework",
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
};
export default config;
Second, go to public folder and paste your icon file and logo file.
It should be as follows…
- public
- favicon.ico
- logo.jpg
Then, Storybook server will read favicon.ico and it will render your image on a tab in a browser. Then, let’s try out to show some our logo.
Third, before we go to .storybook/manager.ts for applying the logo, We need a theme. Let’s make my theme.
// .storybook/YourTheme.ts
import { create } from "@storybook/theming/create";
export default create({
base: "light",
brandTitle: "My custom Storybook",
brandUrl: "https://example.com",
brandImage: "./logo.jpg", // or you could put an url from CDN.
brandTarget: "_self",
});
There’s our logo url ./logo.jpg, It will read from public folder. After that, we need to apply our theme in manager.ts.
// .storybook/manager.ts
import { addons } from "@storybook/manager-api";
import theme from "./YourTheme";
addons.setConfig({
theme,
});
All done! Check out your logo and favicon are at right place. If you have any problem with this tip, please let me know by issuing in my github.