Custom favicon (and customize layout in general)

[jeffcarbs]

My specific question: how can you add a custom favicon (like http://airbnb.io/react-dates). I'm using a webpack config if it makes any difference.

More general question: Is it possible to customize the CSS/layout at all? I'd like to add my company name/logo in place of the REACT STORYBOOK header in the top left. I could also see it being useful to customize the CSS of the "chrome" around the examples. Is this possible now or are there any plans to support this?

BTW I'm a huge fan of this project. We recently switched to it from a home-grown version which:

• was harder to maintain
• more inconsistent across example groups
• was shipped with our prod build which meant we needed to load dependencies like faker in prod.

[thani-sh]

Hi @jcarbo

You can use the -s flag to copy static files when running/bundling storybook. If one of your static file directories has a favicon then it'll be used. Example:

"scripts": {
  "storybook": "start-storybook -s ./my-dir-with-favicon",
  "build-storybook": "build-storybook -s ./my-dir-with-favicon"
}

You can use the options addon to customize some parts of the UI. You can change the header text and the link with this addon.

We're using inline-styles for our React Components (chrome) so it'll be difficult to customize them with custom CSS. If it's a relatively small and general customization, maybe we could add it to the options addon.

[jeffcarbs]

Thanks for the response!

I got the options working but having trouble with the favicon still the solution was as you suggested, setting a path to static assets and ensuring there's a favicon.ico in that folder. Turns out it was a caching issue 😐 a hard refresh fixed it :)

Another question: is there an option to update the main document title (not the iframe, the main document)?

[thani-sh]

It doesn't have an option to change the title for now. I think we can add this feature to the options addon. I've opened an issue there storybook-eol/storybook-addon-options#7 .

[jeffcarbs]

@mnmtanish - I realized the favicon issue wasn't resolved via the hard refresh. I had been messing around internally with the node module and something I changed fixed it. I wound up digging in further and just opened a PR with a fix (see #592).

[pixelomo]

Couldn't get the favicon working but to change options such as the title follow these steps from the docs:

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import '@storybook/addon-options/register';

Then Import and use the setOptions function in your config.js file.

import * as storybook from '@storybook/react';
import { setOptions } from '@storybook/addon-options';

// Option defaults:
setOptions({
  /**
   * name to display in the top left corner
   * @type {String}
   */
  name: 'Storybook',
  /**
   * URL for name in top left corner to link to
   * @type {String}
   */
  url: '#',
  /**
   * show story component as full screen
   * @type {Boolean}
   */
  goFullScreen: false,
  /**
   * display panel that shows a list of stories
   * @type {Boolean}
   */
  showStoriesPanel: true,
  /**
   * display panel that shows addon configurations
   * @type {Boolean}
   */
  showAddonPanel: true,
  /**
   * display floating search box to search through stories
   * @type {Boolean}
   */
  showSearchBox: false,
  /**
   * show addon panel as a vertical panel on the right
   * @type {Boolean}
   */
  addonPanelInRight: false,
  /**
   * sorts stories
   * @type {Boolean}
   */
  sortStoriesByKind: false,
  /**
   * regex for finding the hierarchy separator
   * @example:
   *   null - turn off hierarchy
   *   /\// - split by `/`
   *   /\./ - split by `.`
   *   /\/|\./ - split by `/` or `.`
   * @type {Regex}
   */
  hierarchySeparator: null,
  /**
   * regex for finding the hierarchy root separator
   * @example:
   *   null - turn off mulitple hierarchy roots
   *   /\|/ - split by `|`
   * @type {Regex}
   */
  hierarchyRootSeparator: null,
  /**
   * sidebar tree animations
   * @type {Boolean}
   */
  sidebarAnimations: true,
  /**
   * id to select an addon panel
   * @type {String}
   */
  selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
});

storybook.configure(() => require('./stories'), module);

I had to change the final line to

configure(loadStories, module)