Add universal support for color attribute (similar to CSS icons)

[Rednas83]

<Icon name="uil:github" color="red" /> returns App.config.ts

// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F
export default defineAppConfig({
  icon: {
    size: "300%", // default <Icon> size applied
    class: "icon", // default <Icon> class applied
    mode: "css", // svg || css
    aliases: {
      nuxt: "logos:nuxt-icon",
    },
  },
})

[antfu]

Use style="color:red" instead.

[Rednas83]

This works just like class="text-red-600" for tailwind users. But the docs still mentions color in the example

Will color as a shorthand be supported again or should the docs be updated?

[danjrwalsh]

This works just like class="text-red-600" for tailwind users. But the docs still mentions color in the example

Will color as a shorthand be supported again or should the docs be updated?

The color attribute in that reference is regarding the built-in attribute available on the SVG element, that's why it's below the message "you can give all the attributes of the native element" and has a link to the mozilla doc for SVG.

With that said, I do agree that it's a bit confusing in that context.

When using CSS icons (the default now), you must use style or class, otherwise for SVG icons you can continue to use color like you did previously.

[Rednas83]

Ok, I migrated to style for now

:color="page.name == selected ? settings.color : page.name == 'Alarms' && coptions.alarm ? 'red' : 'black'" // ISSUE: Not supported
:class="page.name == selected ? `text-[${settings.color}]` : page.name == 'Alarms' && coptions.alarm ? 'text-red-600' : 'text-black'" // ISSUE: Only typed colors are supported
:style="{ color: page.name == selected ? settings.color : page.name == 'Alarms' && coptions.alarm ? 'red' : 'black' }" // ISSUE: Little less convenient??

Is it an idea to also support the color attribute for svg icons? It would make the library much more universal I think🤔

And perhaps also add universal support stroke-width while at it?

[antfu]

color attribute is a SVG specific feature, just updated the docs to correct the example.

For stroke-width, please keep an eye on https://github.com/nuxt/icon/pull/199