Search code examples
themespngheightwidthstorybook

In Storybook theming for brandImage how to change logo height or width?

Within Storybook's manager.js when changing the theme I've found the documentation where you can add a custom logo with:

import { create } from '@storybook/theming'
import logo from '../src/images/logo.png'

export default create({
  brandImage: logo,
})

However I've been unable to find a way to adjust the logo size of a PNG. From my research it seems the only way to adjust the size is to implement a width or height in the SVG:

logo.svg:

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

maanger.js:

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

export default create({
  brandImage: logo,
})

I'm unable to find a way in the docs (params or themeing) if there is a way to set the width or height of a PNG.

Research

In Storybook is there a way when using a PNG for brandImage I can adjust the width or height without having to implement it as a SVG?

Solution

  • I found a 'hacky' way of achieving this:

    brandTitle: `<img src="/your-logo.png" width="10px" height="10px"/>`

    Make sure your png file is inside the public folder in your root project.