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

[seanmcintyre]

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

Expected behavior
Logo should reflect SVG component from brand property.

Screenshots

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

[kylepeeler]

I'm experiencing the same thing

[tmeasday]

I think you want brandImage? Is this a change we should document in MIGRATION.md?

[kylepeeler]

I tried both brandImage and brand and still am only seeing the title. :( Any other things to try?

[shilman]

I'm guessing this is probably a duplicate to https://github.com/storybooks/storybook/issues/5866

[sruda]

Same behavior. I modified the brand property, and nothing happens.

[kylepeeler]

FWIW The default storybook logo doesn't even show up for me, it only shows the title of the Storybook. Would this have anything to do with this? Screenshot

[regs79]

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,
});

[kylepeeler]

Yup, I had brandImage as a property within brand for some reason. Also it was helpful to note that the brandImage value should be a url (or a data url if you are using the included webpack url-loader)

[adamjang]

@regs79 Solution worked for me too. SVG's didn't work though and I couldn't have a URL set in the storybook config.

[shilman]

@ndelangen Since you're working on the theming documentation, please make sure this gets clarified in the docs.

[wirtzdan]

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
});

[seanmcintyre]

@wirtzdan Do you have a custom webpack config to support loading SVG files?

[shilman]

@seanmcintyre The reason this works without the custom webpack config is because brandImage expects a URL as its argument, not the SVG contents. The reason it's breaking on the other issue https://github.com/storybooks/storybook/issues/5708 is because in that case the user wants the SVG content. (I think!)

[bennypowers]

This is not working for me:

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

export default create({
  base: 'light',

  colorPrimary: '#8ff8ff',
  colorSecondary: '#6e7d81',

  fontBase: "'proxima-nova', arial, sans-serif",
  fontCode: 'monospace',

  brandImage: '/logo.png',
  brandTitle: 'Components',
  brandUrl: 'https://components.dev',

})

If i load the page, then set the 'logo' property on the themeprovider via react dev tools to '/logo.png', it updates and displays normally.

[rezaabedian]

I have tried multiple different ways to try and load an svg as a logo but no luck.

This is what I have tried:

config.js

import logo from './logo.svg';
addParameters({
  options: {
    theme: create({
      base: 'dark',
      colorPrimary: '#somehex',
      colorSecondary: '#somehex',
      brandImage: logo,

      // UI
      appBg: '#somehex',
      appContentBg: '#somehex',
      appBorderColor: '#somehex',
      appBorderRadius: 4,

      // Typography
      fontBase: '"Open Sans", sans-serif',
      fontCode: 'monospace',
    })
  }
});

and no luck. I have also added width="100" height="40" to my svg.

The result is I still see the Storybook logo being loaded in.

There seems to be some confusion as to whether this brandImage variable is a URL to an svg, or a URL to a png, or an import of an svg, or a require of an svg using svg-inline-loader. @shilman can you clarify?

i'm using:

 "@storybook/addon-actions": "^5.1.0-alpha.20",
    "@storybook/addon-knobs": "^5.1.0-alpha.20",
    "@storybook/addon-links": "^5.1.0-alpha.20",
    "@storybook/addon-notes": "^5.1.0-alpha.20",
    "@storybook/addon-storysource": "^5.1.0-alpha.20",
    "@storybook/addons": "^5.1.0-alpha.20",
    "@storybook/angular": "^5.1.0-alpha.20",
    "@storybook/theming": "^5.1.0-alpha.20",

[shilman]

@rezaabedian brandImage should be a URL. Try brandImage: 'https://placehold.it/350x150' to verify

[Pixelatex]

I'm loading an svg file from my directory.

This is converted to a base64 string and prefixed with data:image/svg+xml;base64,. It doesn't show... because the image component doesn't have any size of itself. Manually adding width/height to 100% shows the logo as intended.

[rezaabedian]

@shilman thank you for getting back to me, I will try that.

Edit: @shilman I have tried that and no luck. Intact, if you look at the localStorage representation of the store, you see that brandImage is set to null.

Edit 2: @shilman I downgraded from 5.1.0-alpha.20 to 5.0.6 and it's working.

@Pixelatex could you provide a sample of how you do that? I'd like to do something similar!

[Pixelatex]

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 :/

[DimitrK]

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

[milesj]

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

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

[lonyele]

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

[madhav-b]

I reproduce the same issue with Storybook version 5.0.5 I had tried with the brand, brandImage, brandTitle but with every case showing default text "Storybook". I want to replace this text with my own logo. Does anyone have any suggestion regarding this issue?

[aozora]

Hi, as @milesj found out, you have to remove the "name" option, and than "brandImage" must be a url: I couldn't point it to a local asset, so using a public url just works (I use the url of my logo image on a cdn).

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[alexdobsom]

In ./storybook/manager.js I have this code:

import { addons } from "@storybook/addons";
import { create } from "@storybook/theming/create";

addons.setConfig({
  theme: create({
    base: "light",
    brandTitle: "COMPANY NAME",
    brandUrl: "https://example.com",
    // brandImage: "https://placehold.it/350x150",
    colorPrimary: "hotpink",
    colorSecondary: "orangered"
  })
});

I can see the brandImage but the Title goes away even if the image is very small.
But why?

[shilman]

@alexdobsom that's the design. once you use the brandImage, it takes over. i think the rationale is that if you care enough to override the brand image you probably also care about the typography, so use a bigger image that includes that.

[ndelangen]

The title IS used as the image alt/title attribute though, so you should still provide it