histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite
https://histoire.dev
MIT License
3.03k stars 174 forks source link

Logo is not displaying #700

Open fbjorn opened 2 months ago

fbjorn commented 2 months ago

Describe the bug

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

image

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:

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:

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

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

50rayn commented 2 months ago

Hello @fbjorn. Could you please provide e reproduction link (preferably on stackblitz) ? Would be easier and faster for us to debug.