Lucide

npm install lucide-react

import { Camera, Search, Settings } from "lucide-react";

export function Toolbar() {
  return (
    <div className="flex items-center gap-3">
      <Camera aria-hidden="true" />
      <Search size={20} strokeWidth={1.75} aria-hidden="true" />
      <Settings
        size={32}
        absoluteStrokeWidth
        className="text-sky-600"
        aria-hidden="true"
      />
    </div>
  );
}

import { House, Trash2 } from "lucide-react";

export function IconActions() {
  return (
    <div>
      <button type="button" aria-label="返回首页">
        <House />
      </button>

      <button type="button" aria-label="删除项目">
        <Trash2 />
      </button>
    </div>
  );
}

import { CircleAlert } from "lucide-react";

export function WarningIcon() {
  return (
    <CircleAlert
      color="var(--destructive)"
      aria-label="警告"
    />
  );
}

import {
  Bell,
  House,
  LucideProvider,
  Settings,
} from "lucide-react";

export function AppIcons() {
  return (
    <LucideProvider
      size={20}
      color="currentColor"
      strokeWidth={1.75}
    >
      <House />
      <Bell />
      <Settings />
    </LucideProvider>
  );
}

import { DynamicIcon } from "lucide-react/dynamic";

const allowedIcons = new Set(["camera", "house", "settings"]);

export function CmsIcon({ name }: { name: string }) {
  if (!allowedIcons.has(name)) return null;

  return (
    <DynamicIcon
      name={name as "camera" | "house" | "settings"}
      size={20}
      aria-hidden="true"
    />
  );
}

npm install lucide-react @lucide/lab

import { Icon } from "lucide-react";
import { coconut } from "@lucide/lab";

export function CoconutIcon() {
  return (
    <Icon
      iconNode={coconut}
      size={24}
      aria-hidden="true"
    />
  );
}

npm run lint
npm run typecheck
npm run build

# 检查 Bundle、图标按钮名称、深色模式和小尺寸清晰度