القائمة
Use Lucide React icons correctly. Reference file contains all 1,671 valid icon names — always verify against it before using an icon.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | lucide-icons |
| description | Use Lucide React icons correctly. Reference file contains all 1,671 valid icon names — always verify against it before using an icon. |
bun add lucide-react
import { ArrowRight, Check, Loader2 } from "lucide-react";
// Basic usage
<ArrowRight />
// With props
<ArrowRight size={16} strokeWidth={1.5} className="text-muted-foreground" />
arrow-right → ArrowRight, circle-check → CircleCheckBefore using any icon, verify it exists in references/icon-names.txt (1,671 icons, kebab-case).
To find icons by keyword, search the reference file:
grep "arrow" references/icon-names.txt
grep "chart" references/icon-names.txt
| Purpose | Icon |
|---|---|
| Close/dismiss | x |
| Menu | menu |
| Search | search |
| Settings | settings |
| User | user |
| Loading | loader-2 (add animate-spin) |
| Check/success | check, circle-check |
| Error | circle-x, triangle-alert |
| Info | info |
| Add | plus |
| Delete | trash-2 |
| Edit | pencil |
| Copy | copy |
| External link | external-link |
| Chevrons | chevron-up, chevron-down, chevron-left, chevron-right |
| Arrows | arrow-up, arrow-down, arrow-left, arrow-right |
| Sort | arrow-up-down |
| Filter | filter |
| Calendar | calendar |
mail | |
| Home | house |
Lucide is the default icon library for shadcn/ui. Icons work directly in Button, DropdownMenu, etc:
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
<Button>
<Plus /> New Item
</Button>
shadcn/ui Button automatically sizes icons — no need to pass size prop.
references/icon-names.txtcircle-check over check for status indicatorssize prop across a componentSet up GitHub Actions CI for lint, typecheck, and tests.
Set up and run Playwright end-to-end tests.
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
Configure Biome linting/formatting and Husky pre-commit hooks via Ultracite.
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.