119 lines
3.2 KiB
Markdown
119 lines
3.2 KiB
Markdown
# [←](../../../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>
|
|
```
|