Storybook: auto-import support

[Akryum]

Is it possible to use it with storybook?

Example story:

const IconOnlyTemplate = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  methods: actions,
  template: `<BaseButton v-bind="$props" class="base-button-primary base-button-square" @click="onClick">
    <template #icon-left>
      <IconFeatherMail>
    </template>
  </BaseButton>`,
})

[dmalson-zaelab]

Doesn't seem to work for me either. :(

[martaradziszewska]

@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:

• missing closing tag for the Icon -> <IconFeatherMail />
• missing iconify dependency -> @iconify-json/feather
• missing extension for webpack IconResolver with auto-import

my guess is option 1, as without closing tag it doesn't work for me either :)

[blowsie]

@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:

• missing closing tag for the Icon -> <IconFeatherMail />
• missing iconify dependency -> @iconify-json/feather
• missing extension for webpack IconResolver with auto-import

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.

1. AppTimeline.stories.js

...
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

[simondib]

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.

import RiArrowRightLine from '~icons/ri/arrowRightLine'
...
const IconTemplate: StoryFn<typeof SButton> = (args) => ({
  components: {  RiArrowRightLine }
...

[blindfish3]

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:

ENOENT: no such file or directory, open '~icons/lib-icons/error.svelte'

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 virtual: path - but TBH that's pushing the limit of my understanding and I haven't found any concrete solution.

Minimum repro is here: https://github.com/blindfish3/svelte-unplugin-icons-storybook

• run npm run dev and open http://localhost:5173 to see the SVG rendered in the application
• run npm run storybook and open the documentation page for "Foo" and check console for error in 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.

[lnoir]

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.