Add initial project files

2026-09-01 13:03:41 +03:00
parent 22e111bb44
commit 74cb5b6176
1841 changed files with 242819 additions and 30 deletions
@@ -0,0 +1,118 @@
+# [←](../../../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>
+```