storybook: @storybook/theming brand property does not update with custom logo/svg

Describe the bug brand property in @storybook/theming create() function has no effect

Expected behavior Logo should reflect SVG component from brand property.

Screenshots screen shot 2019-03-05 at 12 25 48 pm

Code snippets

config.ts

import {
  addParameters,
  ...
} from '@storybook/react';
...
import { theme } from './theme';
...

addParameters({
  options: {
    theme,
  },
});

theme.ts

import { create } from '@storybook/theming';
import { logo } from './logo';

export const theme = create({
  base: 'light',
  colorPrimary: PistachioLightened,
  colorSecondary: VimeoBlue,
  ...
  brand: logo,
});

logo.tsx

import React from 'react';

export const logo = ({ alt, ...props }) => (
  <svg alt={alt} {...props}>
    ...
  </svg>
);

System:

OS: macOS
Device: all
Browser: all
Framework: React
Addons: @storybook/theming
Version: 5.0.0

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 11
Comments: 31 (9 by maintainers)

Most upvoted comments

I got this to work with an SVG. It’s important to set the width and height inside the svg. Here is what worked for me:

logo.svg

<svg width="100" height="40" viewBox="0 0 290.72 112.41" [...]

theme.js

import { create } from "@storybook/theming";
import logo from "../src/logo.svg";

export default create({

  [...]

  brandImage: logo
});

+23

wirtzdan on Mar 7, 2019

The below worked for me.

I just had to ensure I didn’t have a name set in the main storybook config file under addParameters. That seems to overwrite the logo.

import { create } from '@storybook/theming';
import logo from '../app/assets/images/logo.png';

export default create({
  brandImage: logo,
});

+22

regs79 on Mar 6, 2019

My issue is resolved by removing the storybook-dark-mode addon.

https://github.com/hipstersmoothie/storybook-dark-mode/issues/157

aberhamm on Aug 12, 2021

I can’t get the general branding working on Storybook 5.1.0-alpha.24. That means neither brandTitle nor brandImage seem to have an effect. The rest of the theming seems to be working fine though.

I tried the following:

Setting a URL (https://www.mybrand.com/image/path/file.png)
Setting a URI relative to brandUrl

  brandTitle: 'MyBrand',
  brandUrl: 'https://www.mybrand.com',
  brandImage: '/image/path/file.png',

Import the file, add the webpack loaders pass it as an object to the property
Import file and all the above - plus convert it to base64

DimitrK on Apr 12, 2019

Had an issue where the logo just wouldn’t show, figured it was caching because I couldn’t change anything about the theme, all of a sudden.

This helped me: https://github.com/storybookjs/storybook/issues/13200#issuecomment-733816046

Essentially, you might have to run storybook with the --no-manager-cache flag.

resistdesign on Mar 21, 2021

import Logo from '../public/assets/logo/logo.svg';
const convertSvgToBase64ImgString = SVG => `data:image/svg+xml;base64,${Buffer.from(SVG).toString('base64')}`;
const ConvertedLogo = convertSvgToBase64ImgString(Logo);

Then just use the converted logo. This works in a theme file but without height/width added on the img element, you won’t see it 😕

Pixelatex on Apr 3, 2019

@DimitrK I think you can get more info from #6521

lonyele on Apr 16, 2019

I got this working by removing the name from parameter options.

addParameters({
  options: {
    name: 'Name', // REMOVE THIS
    theme,
  },
});

milesj on Apr 16, 2019