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.