N
Nuxt•8mo ago
Alex

Change icon color of UPageCard

Is it possible to change the color of the icon of a UPageCard component? If yes, how?
2 Replies
kapa.ai
kapa.ai•8mo ago
Hi @Alex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can change the color of the icon in a UPageCard component by customizing the UI slots. Based on the documentation, the icon in UPageCard is rendered in the leadingIcon slot, which by default has the class text-(--ui-primary) that applies the primary color to the icon. There are a few ways to customize the icon color: 1. Using the ui prop You can override the default styles by using the ui prop to target the leadingIcon slot: 
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI v3 integrates with latest Tailwind CSS v4"
    icon="i-simple-icons-tailwindcss"
    :ui="{
      leadingIcon: 'size-5 shrink-0 text-blue-500' // Custom color
    }"
  />
</template>
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI v3 integrates with latest Tailwind CSS v4"
    icon="i-simple-icons-tailwindcss"
    :ui="{
      leadingIcon: 'size-5 shrink-0 text-blue-500' // Custom color
    }"
  />
</template>
2. Using the highlight-color prop If you're using the highlight feature, you can use the highlight-color prop which will affect the icon color since it uses the primary color variable: 
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI v3 integrates with latest Tailwind CSS v4"
    icon="i-simple-icons-tailwindcss"
    highlight
    highlight-color="success" // Changes the highlight and icon color
  />
</template>
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI v3 integrates with latest Tailwind CSS v4"
    icon="i-simple-icons-tailwindcss"
    highlight
    highlight-color="success" // Changes the highlight and icon color
  />
</template>
3. Using a custom class You can also apply a custom class to the entire component and use CSS to target the icon: 
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI v3 integrates with latest Tailwind CSS v4"
    icon="i-simple-icons-tailwindcss"
    class="custom-icon-color"
  />
</template>

<style>
.custom-icon-color :deep(.size-5) {
  color: red;
}
</style>
<template>
  <UPageCard
    title="Tailwind CSS"
    description="Nuxt UI v3 integrates with latest Tailwind CSS v4"
    icon="i-simple-icons-tailwindcss"
    class="custom-icon-color"
  />
</template>

<style>
.custom-icon-color :deep(.size-5) {
  color: red;
}
</style>
The documentation shows that the PageCard component's theme configuration includes the leadingIcon slot with the default styling of size-5 shrink-0 text-(--ui-primary), which you can override using any of the methods above. PageCard documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•8mo ago
<@319451898790936576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?