Phosphor Icons

npx shadcn@latest add https://brutallab.facilito.dev/r/icon.json

"use client";
import { useState } from "react";
import {
  HeartIcon,
  GaugeIcon,
  RepeatIcon,
  KeyboardIcon,
  SpeakerHighIcon,
  StarIcon,
  type IconWeight,
} from "@phosphor-icons/react";
import { Icon, iconWeights } from "@/components/ui/icon";
export default function Demo() {
  const [weight, setWeight] = useState<IconWeight>("bold");
  return (
    <div className="grid gap-6">
      <label className="flex items-center gap-3">
        Weight / Variante
        <select
          aria-label="Icon weight"
          value={weight}
          onChange={(event) => setWeight(event.target.value as IconWeight)}
          className="rounded border border-ink bg-card text-card-foreground p-2"
        >
          {iconWeights.map((value) => (
            <option key={value}>{value}</option>
          ))}
        </select>
      </label>
      <div className="flex flex-wrap gap-6">
        {[HeartIcon, GaugeIcon, RepeatIcon, KeyboardIcon, SpeakerHighIcon, StarIcon].map(
          (glyph, i) => (
            <Icon key={i} icon={glyph} weight={weight} size={32} />
          ),
        )}
      </div>
      <div className="flex flex-wrap gap-5">
        {iconWeights.map((value) => (
          <div key={value} className="grid justify-items-center gap-2">
            <Icon icon={HeartIcon} weight={value} size={32} />
            <span className="text-xs text-foreground">{value}</span>
          </div>
        ))}
      </div>
    </div>
  );
}