Can't apply color to custom icons

[aoor9]

I'm using icons library on Nuxt UI (still I don't know whose issue this is) for my Nuxt project which uses Tailwind v4 , and I set up some custom icons through a JSON file:

{
    "icons": {
        "arrow-small-right": {
            "body": "<path fill=\"currentColor\" d=...
        },
        "auction": {
            "body": "<path fill=\"currentColor\" d=...
        },
...
    }
}

// nuxt.config.ts

import customIcons from './icons.json' with { type: 'json' };

...

 icon: {
        customCollections: [{
            prefix: 'custom',
            icons: customIcons.icons,
            width: 512,
            height: 512,
        }],
    }

They can be imported, however when I try to change their color like text-white or fill-white, it doesn't work.

What I noticed is that icons imported from Iconify have important css rules such as mask-*, while mine don't.
So how am I supposed to inject these rules inside them, if there is a way?

p.s. sorry for creating my issue without completing it

[lucassimines]

I also need this

[CalebKester]

I found that if you change the mode to SVG (will apply to all icons) it will insert it as an svg instead of css. This will allow you to use currentColor to colorize it instead of the mask method they use.

		mode: 'svg',
		customCollections: [
			{
				prefix: 'my-icons',
				dir: './app/assets/icons',
			},
		],
	},```

[imaverickk]

#367 (comment)

use fill="currentColor" in svg to generate mask-* rules. this should be in the document.

[awacode21]

i am dealing with the same issue! i already use fill="currentColor" in my svg but it happens that nuxt icons removes all my fill attributes completely. Did anyone found a solution to color the icons?