Heroicons

npm install @heroicons/react

import { BeakerIcon as BeakerOutline } from "@heroicons/react/24/outline";
import { BeakerIcon as BeakerSolid } from "@heroicons/react/24/solid";

export function ExperimentStatus({ active }: { active: boolean }) {
  const Icon = active ? BeakerSolid : BeakerOutline;

  return (
    <span className="inline-flex items-center gap-2 text-sky-600">
      <Icon className="size-6" aria-hidden="true" />
      实验 {active ? "进行中" : "未开始"}
    </span>
  );
}

import { CheckIcon } from "@heroicons/react/20/solid";
import { XMarkIcon } from "@heroicons/react/16/solid";

export function CompactActions() {
  return (
    <div className="flex items-center gap-2">
      <CheckIcon className="size-5 text-emerald-600" aria-hidden="true" />
      <button type="button" aria-label="关闭">
        <XMarkIcon className="size-4" aria-hidden="true" />
      </button>
    </div>
  );
}

npm install @heroicons/vue

<script setup lang="ts">
import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
import { CheckIcon } from "@heroicons/vue/20/solid";
</script>

<template>
  <label class="flex items-center gap-2">
    <MagnifyingGlassIcon class="size-6" aria-hidden="true" />
    <input type="search" aria-label="搜索项目" />
    <CheckIcon class="size-5 text-emerald-600" aria-hidden="true" />
  </label>
</template>

<button type="button" aria-label="打开菜单">
  <svg
    class="size-6 text-slate-700"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.5"
    aria-hidden="true"
  >
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
    />
  </svg>
</button>

npm run lint
npm run typecheck
npm run build

# 检查 Bundle、无障碍名称、16/20/24px 清晰度和深色模式