Can't get icons to render in Storybook

[andersravn]

Hi there.

I'm trying to get svgicon to render icons in Storybook (using Vite). It renders the svg tag, but not the paths inside of it. I have tried to make a simple repo that outlines the problem here: https://github.com/andersravn/storybook-vue-icons. Use npm run storybook. There's a Button story with the label "Button with an icon:", where the icon is supposed to show after the colon.

I'm not seeing any errors.

What am I missing?

Thanks in advance.

[Allenice]

Did you register vue-svgicon plugin?

https://github.com/MMF-FE/svgicon/tree/master/packages/vite-plugin-svgicon#setup

// main.ts
import { createApp } from 'vue'
import App from './App'
import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'

createApp(App)
    .use(VueSvgIconPlugin, {
        tagName: 'icon'
    })
    .mount('#app')

[andersravn]

@Allenice I would say so: https://github.com/andersravn/storybook-vue-icons/blob/main/.storybook/preview.js

[bajzarpa]

@andersravn have you figured it out? I've just encountered the same problem

[fcojalvarez]

Same problem here.. any solution?