87f265ec15
- Add product vision/market research doc (VISION.md) - Set up shadcn/ui (radix + nova preset) with blue/orange theme, Outfit + Work Sans fonts - Landing page: hero with rank input, problem/steps sections, comparison table, FAQ - Data pipeline: CSV archive ingest (2021-2024) + live YÖK Atlas API refresh (2025) into SQLite (npm run ingest / refresh); zeros normalized to NULL - /sonuc page: hayal/dengeli/garanti buckets by COALESCE(sira2025, sira2024), score-type switcher, 2024→2025 trend indicators - Add ui-ux-pro-max and shadcn agent skills, shadcn MCP config, launch.json Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
102 lines
1.9 KiB
Markdown
102 lines
1.9 KiB
Markdown
# Icons
|
|
|
|
**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
|
|
|
|
---
|
|
|
|
## Icons in Button use data-icon attribute
|
|
|
|
Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
|
|
|
|
**Incorrect:**
|
|
|
|
```tsx
|
|
<Button>
|
|
<SearchIcon className="mr-2 size-4" />
|
|
Search
|
|
</Button>
|
|
```
|
|
|
|
**Correct:**
|
|
|
|
```tsx
|
|
<Button>
|
|
<SearchIcon data-icon="inline-start"/>
|
|
Search
|
|
</Button>
|
|
|
|
<Button>
|
|
Next
|
|
<ArrowRightIcon data-icon="inline-end"/>
|
|
</Button>
|
|
```
|
|
|
|
---
|
|
|
|
## No sizing classes on icons inside components
|
|
|
|
Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
|
|
|
|
**Incorrect:**
|
|
|
|
```tsx
|
|
<Button>
|
|
<SearchIcon className="size-4" data-icon="inline-start" />
|
|
Search
|
|
</Button>
|
|
|
|
<DropdownMenuItem>
|
|
<SettingsIcon className="mr-2 size-4" />
|
|
Settings
|
|
</DropdownMenuItem>
|
|
```
|
|
|
|
**Correct:**
|
|
|
|
```tsx
|
|
<Button>
|
|
<SearchIcon data-icon="inline-start" />
|
|
Search
|
|
</Button>
|
|
|
|
<DropdownMenuItem>
|
|
<SettingsIcon />
|
|
Settings
|
|
</DropdownMenuItem>
|
|
```
|
|
|
|
---
|
|
|
|
## Pass icons as component objects, not string keys
|
|
|
|
Use `icon={CheckIcon}`, not a string key to a lookup map.
|
|
|
|
**Incorrect:**
|
|
|
|
```tsx
|
|
const iconMap = {
|
|
check: CheckIcon,
|
|
alert: AlertIcon,
|
|
}
|
|
|
|
function StatusBadge({ icon }: { icon: string }) {
|
|
const Icon = iconMap[icon]
|
|
return <Icon />
|
|
}
|
|
|
|
<StatusBadge icon="check" />
|
|
```
|
|
|
|
**Correct:**
|
|
|
|
```tsx
|
|
// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
|
|
import { CheckIcon } from "lucide-react"
|
|
|
|
function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
|
|
return <Icon />
|
|
}
|
|
|
|
<StatusBadge icon={CheckIcon} />
|
|
```
|