histoire-dev / histoire-dev/histoire
@nuxt/icon not working in histoire
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
I added @nuxt/icon to my project. In the project it is working fine but in histoire it is not working.
In histoire it is not able to render the stories that contain components that use @nuxt/icon.
On devtools console you always see the error:
it doesn't matter if mode is css or svg, it doesn't matter if from iconify icon libs, global components or custom collections, it is simple not able to work with it. The error is always the same.
### Reproduction
https://stackblitz.com/edit/nuxt-starter-kckxy8
run the histoire to see the story not getting rendered and the console error in devtools.
### System Info
```shell
MacBook Pro Apple M2 Max 14.2.1 (23C71), Google Chrome Browser Version 126.0.6478.127 (Offizieller Build) (arm64)
```
### Used Package Manager
npm
### 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
Research direction
Run the linked StackBlitz reproduction and inspect the browser console while rendering the affected Histoire stories. Trace the @nuxt/icon integration from the reported error; done means stories containing icon components render in Histoire in both CSS and SVG modes, including the listed icon sources.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100