# [←](../../../docs/README.md) @crux-kit/keenicon

Документація для Keenicon реакт компонентів/іконок.

Компонент KeenIcon — це універсальний інструмент для відображення іконок системи KeenIcon. Він підтримує різні стилі (filled, outline, solid, duotone)

Приклади іконок знаходяться у:
`/assets/duotone/demo.html`
`/assets/filled/demo.html`
`/assets/outline/demo.html`
`/assets/solid/demo.html`

### 1. Підключення стилів

Перед використанням компонента потрібно імпортувати основні стилі іконок у головний файл (наприклад, app.tsx або main.tsx)

```jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import '@crux-kit/keenicon/assets/styles.css'
import "./css/styles.css";
import { App } from "./app";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

### 2. Використання компонента

Щоб використати іконку `ki-abstract-1` потрібно передали в проп `icon` значкення `abstract-1`.
Щоб змінити колір іконки потрібно передати у `className` класс з проп `color: red`.

```css
/*
    Tailwind
    className="text-destructive" 
*/
.text-destructive {
  color: red;
}
```

```jsx
import { KeenIcon } from './components/KeenIcon';

const MyComponent = () => {
  return (
    <div>
      <KeenIcon icon="abstract-1" />

      <KeenIcon icon="abstract-1" variant="outline" size="2x" className="text-primary" />

      <KeenIcon icon="abstract-1" variant="duotone" className="text-destructive" size="5x" />
    </div>
  );
};
```

### 3. Налаштування

| Prop      | Тип             | За замовчуванням | Опис                                                      |
| --------- | --------------- | ---------------- | --------------------------------------------------------- |
| icon      | string          | Обов'язково      | Назва іконки (наприклад, magnifier, abstract-1)           |
| variant   | KeeniconVariant | 'filled'         | Стиль іконки: duotone, filled, solid, outline             |
| size      | KeeniconSize    | 'md'             | Розмір іконки від 12px до 64px                            |
| className | string          | ''               | Додаткові CSS-класи (наприклад, для кольору чи відступів) |

### 4. Розмірна сітка

```css
.ki-xs {
  font-size: 12px;
}
.ki-sm {
  font-size: 14px;
}
.ki-md {
  font-size: 16px;
}
.ki-lg {
  font-size: 18px;
}
.ki-xl {
  font-size: 20px;
}
.ki-2x {
  font-size: 24px;
}
.ki-3x {
  font-size: 32px;
}
.ki-4x {
  font-size: 48px;
}
.ki-5x {
  font-size: 64px;
}
.ki-6x {
  font-size: 80px;
}
```

### 5. Використання у HTML

```html
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/keenicons/styles.css" />
  </head>
  <body>
    <i class="ki-solid ki-abstract-2 ki-xs" />
  </body>
</html>
```