Shouldn't this icon colour override work?

[mitya33]

Shouldn't the below set the colour of the icon to red, or have I misunderstood?

<template>
    <n-icon size='medium' :theme-overrides='foo' :component='CheckCircleRegular' />
</template>
<script setup>
import { CheckCircleRegular } from '@vicons/fa'
const foo = {color: 'red'};
</script>

Also tried:

const foo = {Icon: {color: 'red'}};

Icon colour doesn't change. Thanks in advance.

[jahnli]

<n-icon size='medium' :color='red' :component='CheckCircleRegular' />

[mitya33]

Thanks, that works. But just out of interest, shouldn't my attempt have worked too? The theme explorer confirms that the Icon component supports a color CSS property, so I thought I could set that via a theme overrides parent.

[jahnli]

theme-overrides act on n-config-provider

you can try

const themeOverrides: GlobalThemeOverrides = {
  Icon: {
    color: 'red'
  }
};

<n-config-provider
  inline-theme-disabled
  :theme-overrides="themeOverrides"
>
  <n-loading-bar-provider>
    <n-dialog-provider>
      <n-notification-provider>
        <n-message-provider>
          <app />
        </n-message-provider>
      </n-notification-provider>
    </n-dialog-provider>
  </n-loading-bar-provider>
</n-config-provider>

[mitya33]

Thanks, I'll try that.

[jahnli]

@mitya33 For the discussion, if you feel that the answer to a question is correct, hopefully you can mark it as answered, which will help others who are interested in the question

[mitya33]

Thanks for the heads up. Will do.