Overview
The project name, logo and favicon can be customised as required.
Project name
The project name is displayed in the header. It defaults to the name of the host application.
To customise the name, use the project_name config option:
config.lookbook.project_name = "GlobalCorp Components"
To hide the project name completely, set the project_name option to false:
config.lookbook.project_name = false
The project name will be automatically hidden if a project logo has been specified but no custom name has been configured.
Logo
The project logo is displayed in the header, next to the project name. It defaults to the Lookbook logo.
You can provide an alternative logo as an SVG string:
config.lookbook.project_logo = "<svg>...</svg>"
To match the header text color the fill and/or stroke of the SVG
should be set to currentColor. The logo SVG is embedded into the header so will inherit the
text color from the theme.
config.lookbook.project_logo = "<svg stroke='currentColor'>...</svg>"
Logos will be scaled to fill the available height within the header.
To ensure the width is set proportionally it is recommended to ensure there is a viewBox attribute
on the root node, and to remove any width or height attributes:
config.lookbook.project_logo = "<svg viewBox='0 0 32 32'>...</svg>"
To hide the logo completely, set the project_logo option to false:
config.lookbook.project_logo = false
Favicon
By default Lookbook serves the Lookbook logo as a favicon, but this can be customised using the ui_favicon config option:
You can provide an alternative favicon as an SVG string:
config.lookbook.ui_favicon = "<svg>...</svg>"
To specify different favicons for light and dark browser themes, use a hash of favicon SVG strings:
config.lookbook.ui_favicon = {
light: "<svg>...</svg>", # used when `prefers-color-scheme: light`
dark: "<svg>...</svg>", # used when `prefers-color-scheme: dark`
}
Favicon SVGs should not be URL encoded. Lookbook will handle the encoding and conversion to a data URI automatically.
To prevent Lookbook from serving any favicon, set the ui_favicon option to false:
config.lookbook.ui_favicon = false