feat: iconClass prop to NqCard component

Author: onmax

packages/nimiq-vitepress-theme/src/components/NqCard.vue

@@ -7,14 +7,15 @@ import { computed } from 'vue'
 export type CardColor = 'green' | 'blue' | 'red' | 'gold' | 'orange'
 export interface NqCardProps {
   icon?: string
+  iconClass?: string
   bgColor?: CardColor
   href?: string
   title?: string
   description?: string
   label?: string
 }
 
-const { bgColor, icon, href } = defineProps<NqCardProps>()
+const { bgColor, icon, href, iconClass } = defineProps<NqCardProps>()
 
 const hasLink = computed(() => !!href)
 
@@ -34,7 +35,7 @@ const colors: Partial<Record<CardColor, string>> = { blue: '#0E65C9', green: '#1
       { 'children:max-w-[max(50%,240px)]': bgColor },
     ]"
   >
-    <div v-if="icon" :class="icon" f-size="~ max-160 min-120" absolute right--12 :style="`color: ${colors[bgColor!]}`" />
+    <div v-if="icon" :class="`${icon} ${iconClass}`" f-size="~ max-160 min-120" absolute right--12 :style="`color: ${colors[bgColor!]}`" />
     <span nq-label text-12 mb-4 text="neutral-700 data-inverted:white/50" data-inverted:mb-8>{{ label }}</span>
     <h2 font-semibold f-text="xl data-inverted:2xl" data-inverted:text-white>
       {{ title }}

packages/nimiq-vitepress-theme/src/components/NqGrid.vue

@@ -17,7 +17,7 @@ function getSpan({ span, bgColor }: NqCardInGrid): CardSpan | undefined {
 </script>
 
 <template>
-  <ul v-if="cards.length > 0" grid="~ cols-6 gap-16" class="nq-grid nq-raw">
+  <ul v-if="cards.length > 0" grid="~ cols-6 gap-16" class="nq-grid nq-raw" f-my-md>
     <slot>
       <li v-for="(card, index) in cards" :key="index" :data-span="getSpan(card)">
         <component :is="largeCards ? NqLargeCard : NqCard" v-bind="card" />