Can't apply color to custom icons

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

Start with the custom icon configuration in nuxt.config.ts and the icon definitions in icons.json, then compare how these icons are rendered with the Iconify icons that receive mask rules. Reproduce the issue using text-white and fill-white on a custom icon. Done means custom icons respond to color classes or the supported limitation is documented.