@loke/icons/skills/use-icons/SKILL.md

A Loke icon library package for React applications.

---
name: use-icons
description: >
  Import and render @loke/icons components in React. Covers LokeProps (size,
  color, strokeWidth, absoluteStrokeWidth, className), SVG passthrough
  attributes, accessibility (aria-hidden auto-behavior, aria-label for
  interactive icons), aliases (PascalCaseIcon suffix, Material UI names like
  Close, Error, Add), and forwardRef support. Activate when using icon
  components from @loke/icons in a React application.
type: core
library: '@loke/icons'
library_version: '1.0.0-alpha.1'
sources:
  - 'LOKE/merchant-frontends:packages/icons/src/Icon.tsx'
  - 'LOKE/merchant-frontends:packages/icons/src/createLokeIcon.ts'
  - 'LOKE/merchant-frontends:packages/icons/src/types.ts'
  - 'LOKE/merchant-frontends:packages/icons/src/defaultAttributes.ts'
  - 'LOKE/merchant-frontends:packages/icons/src/shared.ts'
  - 'LOKE/merchant-frontends:packages/icons/README.md'
---

# @loke/icons — Using Icons

## Setup

```tsx
import { Check, Calendar, Users } from "@loke/icons";

function App() {
  return (
    <div>
      <Check />
      <Calendar size={32} />
      <Users color="red" strokeWidth={1.5} />
    </div>
  );
}
```

All icons are imported from `@loke/icons`. There is a single entry point — no subpath imports.

## Core Patterns

### Customizing icon appearance

```tsx
import { Settings } from "@loke/icons";

<Settings size={20} color="#6366f1" strokeWidth={1.5} />
```

Props: `size` (default 24), `color` (default `"currentColor"`), `strokeWidth` (default 2), `className`. All standard SVG attributes are also accepted.

### Absolute stroke width

```tsx
import { Star } from "@loke/icons";

<Star size={48} absoluteStrokeWidth strokeWidth={2} />
```

When `absoluteStrokeWidth` is true, stroke width stays constant regardless of icon size. The formula is `(strokeWidth * 24) / size`.

### Making icons accessible

```tsx
import { Trash } from "@loke/icons";

// Decorative icon — aria-hidden is auto-applied
<Trash />

// Interactive icon — provide accessible label on the button
<button aria-label="Delete item">
  <Trash />
</button>

// Icon with accessible meaning — add aria-label directly
<Trash aria-label="Delete" />
```

Icons auto-set `aria-hidden="true"` when no children and no `aria-*` props are present. Adding any `aria-*` prop or `role` disables the auto-hidden behavior.

### Using aliases

```tsx
// Primary name
import { X } from "@loke/icons";

// Aliases — same icon, alternative names
import { Close } from "@loke/icons";    // Material UI-style alias
import { XIcon } from "@loke/icons";    // PascalCaseIcon suffix alias
```

Every icon has a `PascalCaseIcon` alias (e.g., `CheckIcon` for `Check`). Many icons also have Material UI-style aliases (e.g., `Delete` for `Trash`, `Add` for `Plus`).

### Using refs

```tsx
import { useRef } from "react";
import { Search } from "@loke/icons";

function SearchInput() {
  const iconRef = useRef<SVGSVGElement>(null);
  return <Search ref={iconRef} />;
}
```

All icons use `forwardRef` and expose the underlying `SVGSVGElement`.

## Common Mistakes

### CRITICAL Hand-writing inline SVG instead of using a library icon

Wrong:

```tsx
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
  <polyline points="20 6 9 17 4 12" />
</svg>
```

Correct:

```tsx
import { Check } from "@loke/icons";

<Check size={24} />
```

The library provides 107 icons. Always check if an icon exists before writing inline SVG. Inline SVGs bypass the library's consistent props API, accessibility defaults, and class naming.

Source: maintainer interview

### CRITICAL Importing from a subpath that does not exist

Wrong:

```tsx
import { Check } from "@loke/icons/icons/check";
```

Correct:

```tsx
import { Check } from "@loke/icons";
```

The package has a single entry point at `@loke/icons`. No subpath exports exist.

Source: package.json exports field

### CRITICAL Using lucide-react imports instead of @loke/icons

Wrong:

```tsx
import { Check } from "lucide-react";
```

Correct:

```tsx
import { Check } from "@loke/icons";
```

@loke/icons is inspired by lucide-react but is a separate package with its own icon set. Some icon names overlap but the packages are not interchangeable.

Source: README.md

### HIGH Using fill prop for icon color

Wrong:

```tsx
<Check fill="green" />
```

Correct:

```tsx
<Check color="green" />
```

Icons are stroke-based with `fill="none"` as a default SVG attribute. Use the `color` prop (which sets `stroke`) to change icon color.

Source: src/defaultAttributes.ts

### HIGH Missing accessible label on interactive icons

Wrong:

```tsx
<button><Trash /></button>
```

Correct:

```tsx
<button aria-label="Delete"><Trash /></button>
```

Icons auto-set `aria-hidden="true"` when no children or `aria-*` props are present. Icon-only buttons need an explicit `aria-label` on the button element.

Source: src/Icon.tsx:52

### MEDIUM Non-numeric size string with absoluteStrokeWidth

Wrong:

```tsx
<Check size="large" absoluteStrokeWidth />
```

Correct:

```tsx
<Check size={32} absoluteStrokeWidth />
```

`absoluteStrokeWidth` computes `(strokeWidth * 24) / Number(size)`. A non-numeric string produces `NaN` for the stroke width.

Source: src/Icon.tsx:48-49

See also: find-icons/SKILL.md — verify icon exists before importing
See also: add-icons/SKILL.md — if a needed icon doesn't exist, add it to the library