histoire-dev / histoire

⚡ Fast and beautiful interactive component playgrounds, powered by Vite

Home Page:https://histoire.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with NuxtIcon color param

dimitrileduc opened this issue · comments

Describe the bug

Hello,

I am currently trying to use NuxtIcon in a Histoire story, but I am encountering an issue with the color not being rendered correctly.

When I use the NuxtIcon in my app.vue file, the red color is rendered correctly:

<Icon name="heroicons:check-16-solid" size="40px" color="red" />

However, when I try to use the same code in a Histoire story, the color is rendered as black:
I have inspected the rendered SVG in the browser and it shows that the color is set to "currentColor", which should be red

Has anyone else encountered this issue before? Any help would be greatly appreciated.

Thank you in advance.

Reproduction

System Info

Nuxt3 - Tailwind

Used Package Manager

pnpm

Validations

How did you managed to render https://nuxt.com/modules/icon in histoire? I ask because i am running into this issue: #746 and it seems you already solved it when you are on the next step trying to color the icons. Help would be appreciated.