Компонент 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)

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.

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

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. Розмірна сітка

.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

<!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>