Theme Icon

npm install @kuzenbo/core

import { ThemeIcon } from "@kuzenbo/core";
import { CheckIcon } from "lucide-react";

function Example() {
  return (
    <ThemeIcon>
      <CheckIcon />
    </ThemeIcon>
  );
}

<ThemeIcon>
  <StarIcon />
</ThemeIcon>

<div className="flex gap-2">
  <ThemeIcon variant="default">
    <CheckIcon />
  </ThemeIcon>
  <ThemeIcon variant="secondary">
    <CheckIcon />
  </ThemeIcon>
  <ThemeIcon variant="success">
    <CheckIcon />
  </ThemeIcon>
  <ThemeIcon variant="danger">
    <XIcon />
  </ThemeIcon>
  <ThemeIcon variant="warning">
    <AlertIcon />
  </ThemeIcon>
  <ThemeIcon variant="info">
    <InfoIcon />
  </ThemeIcon>
</div>

<div className="flex items-center gap-2">
  <ThemeIcon size="xs">
    <StarIcon />
  </ThemeIcon>
  <ThemeIcon size="sm">
    <StarIcon />
  </ThemeIcon>
  <ThemeIcon size="md">
    <StarIcon />
  </ThemeIcon>
  <ThemeIcon size="lg">
    <StarIcon />
  </ThemeIcon>
  <ThemeIcon size="xl">
    <StarIcon />
  </ThemeIcon>
</div>

<ThemeIcon variant="outline">
  <SettingsIcon />
</ThemeIcon>

<ThemeIcon variant="ghost">
  <BellIcon />
</ThemeIcon>

<div className="flex gap-2">
  <ThemeIcon variant="success" size="sm">
    <CheckCircleIcon />
  </ThemeIcon>
  <ThemeIcon variant="danger" size="sm">
    <XCircleIcon />
  </ThemeIcon>
  <ThemeIcon variant="warning" size="sm">
    <AlertTriangleIcon />
  </ThemeIcon>
  <ThemeIcon variant="info" size="sm">
    <InfoIcon />
  </ThemeIcon>
</div>

function FeatureList() {
  const features = [
    { icon: <CheckIcon />, text: "Fast performance" },
    { icon: <CheckIcon />, text: "Easy to use" },
    { icon: <CheckIcon />, text: "Fully customizable" },
  ];

  return (
    <ul className="space-y-3">
      {features.map((feature, i) => (
        <li key={i} className="flex items-center gap-3">
          <ThemeIcon variant="success" size="sm">
            {feature.icon}
          </ThemeIcon>
          <span>{feature.text}</span>
        </li>
      ))}
    </ul>
  );
}