Icon

1import { cn } from "@/lib/utils";
2import { type VariantProps, cva } from "class-variance-authority";
3import type { SVGProps } from "react";
4 
5const iconVariants = cva("inline-flex items-center justify-center", {
6  variants: {
7    variant: {
8      default: "",
9      subtle: "p-1 rounded-md bg-primary-bg",
10      filled: "p-1 rounded-md bg-primary-fg text-background",
11    },
12    colorScheme: {
13      primary: "text-primary-fg",
14      neutral: "text-neutral-fg",
15      success: "text-success-fg",
16      danger: "text-danger-fg",
17      warning: "text-warning-fg",
18      yellow: "text-yellow-800 dark:text-yellow-200",
19      teal: "text-teal-800 dark:text-teal-200",
20      cyan: "text-cyan-800 dark:text-cyan-200",
21      blue: "text-blue-800 dark:text-blue-200",
22      purple: "text-info-fg",
23      pink: "text-pink-800 dark:text-pink-200",
24    },
25  },
26  compoundVariants: [
27    {
28      variant: "subtle",
29      colorScheme: "primary",
30      class: "bg-primary-bg",
31    },
32    {
33      variant: "subtle",
34      colorScheme: "neutral",
35      class: "bg-neutral-bg",
36    },
37    {
38      variant: "subtle",
39      colorScheme: "success",
40      class: "bg-success-bg",
41    },
42    {
43      variant: "subtle",
44      colorScheme: "danger",
45      class: "bg-danger-bg",
46    },
47    {
48      variant: "subtle",
49      colorScheme: "warning",
50      class: "bg-warning-bg",
51    },
52    {
53      variant: "subtle",
54      colorScheme: "yellow",
55      class: "bg-yellow-100 dark:text-yellow-800",
56    },
57    {
58      variant: "subtle",
59      colorScheme: "teal",
60      class: "bg-teal-100 dark:bg-teal-800",
61    },
62    {
63      variant: "subtle",
64      colorScheme: "cyan",
65      class: "bg-cyan-100 dark:bg-cyan-800",
66    },
67    {
68      variant: "subtle",
69      colorScheme: "blue",
70      class: "bg-blue-100 dark:bg-blue-800",
71    },
72    {
73      variant: "subtle",
74      colorScheme: "purple",
75      class: "bg-info-bg",
76    },
77    {
78      variant: "subtle",
79      colorScheme: "pink",
80      class: "bg-pink-100 dark:bg-pink-800",
81    },
82    {
83      variant: "filled",
84      colorScheme: "primary",
85      class: "bg-primary-fg text-background",
86    },
87    {
88      variant: "filled",
89      colorScheme: "neutral",
90      class: "bg-neutral-fg text-background",
91    },
92    {
93      variant: "filled",
94      colorScheme: "success",
95      class: "bg-success-fg text-background",
96    },
97    {
98      variant: "filled",
99      colorScheme: "danger",
100      class: "bg-danger-fg text-background",
101    },
102    {
103      variant: "filled",
104// … truncated