-
-
Notifications
You must be signed in to change notification settings - Fork 144
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Storybook: auto-import support #92
Comments
Doesn't seem to work for me either. :( |
@Akryum For me, auto-import works perfectly well with storybook. I tested your case with feather icons and it seems it can be one of three causes:
my guess is option 1, as without closing tag it doesn't work for me either :) |
I can confirm I have the issue even when using the above steps.
...
const Template = args => ({
components: { AppTimeline },
setup() {
return { ...args }
},
template: `
<div class="w-64">
<AppTimeline :steps="steps" :currentStep="currentStep" />
<ICarbonAccessibility />
</div>
`,
})
... 2 & 3 .stories/webpack.config.js const Components = require('unplugin-vue-components/webpack')
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')
const carbon = require('@iconify-json/carbon')
module.exports = ({config, mode}) => {
config.plugins.push(Components({
resolvers: [
IconsResolver()
],
}))
config.plugins.push(Icons({ /* options */}))
return config
} The example above fails when using the icon in the story, it works when using the icon in the component itself |
I am also having this problem with Storybook not importing the icons in the story template (even though inside a Vue component does work). A workaround is to explicitly import the icon at the top of the story file and then in the story template, e.g.
|
I'm having what looks like a related problem; so posting details here rather than raising a new issue. I'm using unplugin-icons and FileSystemIconLoader to embed an SVG in a Svelte component. This works fine when rendered in a Sveltekit application; but in Storybook the documentation page fails to load and an error is reported in the console:
Since we're heavily relying on Storybook for development and documentation purposes this renders unplugin-icons unusable for us; which is a great shame as it would otherwise save us a lot of effort 😢 From digging around I've seen a few similar issues raised related to Storybook - which IIUC may be related to the use of a Minimum repro is here: https://github.com/blindfish3/svelte-unplugin-icons-storybook
edit: updated repro to include my attempted fix: i.e. to manually add plugins in StorybookConfig. note: this is not related to use of customCollections. Just in case, I tried removing that from my repro and using iconify/mdi icons but got the same error. |
I ran into the same issue while using Unplugin icons with SvelteKit and Storybook. It seems to be related to the virtual paths but I can't dig into that. For now, Unplugin icons are off the table until they work correctly with Storybook. I wasn't using that many icons so decided to just take all the icons' raw XML and load them via my own component. |
Is it possible to use it with storybook?
Example story:
The text was updated successfully, but these errors were encountered: