histoire-dev / histoire-dev/histoire

Logo is not displaying

Open
#700 1 comment 0 reactions 0 assignees View on GitHub
to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

Hi, neither default nor custom logo can't be displayed:

![image](https://github.com/histoire-dev/histoire/assets/9670990/da781d21-d2c2-4d73-9c08-e56a8828d180)
image

I bet it's somehow related to SVG resolving, but I'm not sure how to fix it. SVGs within the stories (in my components) work fine.

### Reproduction

Vite config:

```js
import { sveltekit } from "@sveltejs/kit/vite"
import { defineConfig } from "vitest/config"
import svg from "@poppanator/sveltekit-svg"

export default defineConfig({
plugins: [sveltekit(), svg()],
test: {
include: ["src/**/*.{test,spec}.{js,ts}"],
},
})
```

Histoire config:
```js
import {defineConfig} from "histoire"
import {HstSvelte} from "@histoire/plugin-svelte"

export default defineConfig({
theme: {
logo: {
square: '/src/lib/assets/logos/mylogo.svg',
light: '/src/lib/assets/logos/mylogo.svg',
dark: '/src/lib/assets/logos/mylogo.svg',
},
},
setupFile: "/src/stories/_setup.ts",
plugins: [HstSvelte()],
})

```

I also tried to add `svg()` to list of plugins in histoire config, but it did no effect.

### System Info

```shell
System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M1 Pro
Memory: 519.59 MB / 16.00 GB
Shell: 3.6.0 - /opt/homebrew/bin/fish
Binaries:
Node: 18.19.0 - ~/.local/share/nvm/v18.19.0/bin/node
npm: 10.2.3 - ~/.local/share/nvm/v18.19.0/bin/npm
pnpm: 8.7.4 - /opt/homebrew/bin/pnpm
Browsers:
Brave Browser: 120.1.61.120
Chrome: 109.0.5414.87
Safari: 17.2.1
npmPackages:
@histoire/plugin-svelte: ^0.17.9 => 0.17.9
histoire: ^0.17.9 => 0.17.9
vite: ^5.0.11 => 5.1.4
```

### Used Package Manager

pnpm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Contributor guide

Open the contributing guide

Research direction

Start with the Vite config and the Histoire theme configuration shown in the issue, especially the logo paths under /src/lib/assets/logos/. Reproduce with the provided SvelteKit and SVG plugin setup, then trace how the theme logo is resolved. Done means both default and custom logos render correctly while SVGs in stories continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.