@xsolla/xui-icons 0.99.0 → 0.100.0

package/README.md

@@ -1,47 +1,232 @@
-# @xsolla/xui-icons
+---
+title: Icons
+subtitle: Theme-aware Lucide-based icons.
+description: A cross-platform React icon component library based on Lucide icons with theme integration.
+---
 
-General-purpose UI icons built on Lucide, wrapped in the XUI Icon primitive.
+# Icons
+
+A cross-platform React icon component library based on Lucide icons. Provides theme-aware icons that automatically adapt to the current theme colors.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-icons
+# or
 yarn add @xsolla/xui-icons
 ```
 
-## Usage
+## Demo
+
+### Basic Usage
+
+Icons are exported as named components. Import and use them directly:
+
+```tsx
+import * as React from 'react';
+import { Home, Settings, User, Search } from '@xsolla/xui-icons';
+
+export default function BasicIcons() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Home />
+      <Settings />
+      <User />
+      <Search />
+    </div>
+  );
+}
+```
+
+### Icon Sizes
+
+```tsx
+import * as React from 'react';
+import { Bell } from '@xsolla/xui-icons';
+
+export default function IconSizes() {
+  return (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+      <Bell size={12} />
+      <Bell size={16} />
+      <Bell size={20} />
+      <Bell size={24} />
+      <Bell size={32} />
+    </div>
+  );
+}
+```
+
+### Custom Colors
 
 ```tsx
-import { Check, Search, ShoppingCart } from '@xsolla/xui-icons';
+import * as React from 'react';
+import { Check, AlertCircle, X } from '@xsolla/xui-icons';
 
-function App() {
+export default function ColoredIcons() {
   return (
-    <>
-      <Check size={24} color="green" />
-      <Search size={20} />
-      <ShoppingCart size={24} color="blue" />
-    </>
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Check color="#2ecc71" />
+      <AlertCircle color="#f39c12" />
+      <X color="#e74c3c" />
+    </div>
   );
 }
 ```
 
+## Anatomy
+
+Import icons as named exports and use them as components:
+
+```jsx
+import { Home, Settings, Check } from '@xsolla/xui-icons';
+
+<Home
+  size={24}            // Size in pixels (default: 24)
+  color="#color"       // Custom color (uses theme default if not specified)
+/>
+```
+
+## Examples
+
+### Navigation Icons
+
+```tsx
+import * as React from 'react';
+import { ArrowLeft, ArrowRight, Menu, X } from '@xsolla/xui-icons';
+
+export default function NavigationIcons() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <ArrowLeft />
+      <ArrowRight />
+      <Menu />
+      <X />
+    </div>
+  );
+}
+```
+
+### Action Icons
+
+```tsx
+import * as React from 'react';
+import { Check, X, Minus, Copy } from '@xsolla/xui-icons';
+
+export default function ActionIcons() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Check />
+      <X />
+      <Minus />
+      <Copy />
+    </div>
+  );
+}
+```
+
+### Status Icons
+
+```tsx
+import * as React from 'react';
+import { Check, AlertCircle } from '@xsolla/xui-icons';
+
+export default function StatusIcons() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Check color="#2ecc71" />
+      <AlertCircle color="#f39c12" />
+    </div>
+  );
+}
+```
+
+### With Button
+
+```tsx
+import * as React from 'react';
+import { ArrowRight, ArrowLeft } from '@xsolla/xui-icons';
+import { Button } from '@xsolla/xui-button';
+
+export default function IconWithButton() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <Button iconLeft={<ArrowLeft />}>Back</Button>
+      <Button iconRight={<ArrowRight />}>Continue</Button>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Icon Components
+
+Each icon is exported as a named component with the following props:
+
+**Icon Props:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| size | `number` | `24` | Icon size in pixels. |
+| color | `string` | Theme default | Icon color. |
+
 ## Available Icons
 
-- `Check`
-- `X`
-- `Copy`
-- `Eye`
-- `EyeOff`
-- `ArrowLeft`
-- `ArrowRight`
-- `Settings`
-- `Minus`
-- `AlertCircle`
-- `CreditCard`
-- `Menu`
-- `Bell`
-- `User`
-- `Search`
-- `Home`
-- `ShoppingCart`
-- `Upload`
-- `File`
+The `@xsolla/xui-icons` package exports a curated set of commonly used icons:
+
+- `Check` - Checkmark icon
+- `X` - Close/remove icon
+- `Copy` - Copy to clipboard icon
+- `Eye` - Visibility on icon
+- `EyeOff` - Visibility off icon
+- `ArrowLeft` - Left arrow icon
+- `ArrowRight` - Right arrow icon
+- `Settings` - Settings/gear icon
+- `Minus` - Minus/subtract icon
+- `AlertCircle` - Alert/warning circle icon
+- `CreditCard` - Credit card icon
+- `Menu` - Hamburger menu icon
+- `Bell` - Notification bell icon
+- `User` - User profile icon
+- `Search` - Search/magnifying glass icon
+- `Home` - Home icon
+- `ShoppingCart` - Shopping cart icon
+- `Upload` - Upload icon
+- `File` - File icon
+
+### Extended Icon Sets
+
+For additional icons, use the specialized icon packages:
+
+- **`@xsolla/xui-icons-base`** - Comprehensive icon library with 400+ icons organized by category (controls, communication, files, finance, etc.)
+- **`@xsolla/xui-icons-brand`** - Brand and company logos (160+ brands)
+- **`@xsolla/xui-icons-flag`** - Country flag icons
+- **`@xsolla/xui-icons-payment`** - Payment method icons
+- **`@xsolla/xui-icons-currency`** - Currency icons
+- **`@xsolla/xui-icons-product`** - Product-specific icons
+
+### Using icons-base
+
+```tsx
+import { ChevronDown, ChevronUp, Calendar, Clock } from '@xsolla/xui-icons-base';
+
+// Use like any other icon
+<ChevronDown size={16} />
+<Calendar color="#333" />
+```
+
+## Theming
+
+Icons use the design system theme for default color:
+
+```typescript
+// Default color from theme
+theme.colors.content.primary  // Default icon color
+```
+
+## Accessibility
+
+- Icons are decorative by default (`aria-hidden="true"`)
+- When using icons alone without text, provide an `aria-label` on the parent element
+- For icon buttons, use the `IconButton` component which requires `aria-label`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-icons",
-  "version": "0.99.0",
+  "version": "0.100.0",
   "main": "./web/index.js",
   "types": "./web/index.d.ts",
   "scripts": {
@@ -8,7 +8,7 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-primitives-core": "0.99.0",
+    "@xsolla/xui-primitives-core": "0.100.0",
     "lucide-react": "^0.470.0"
   },
   "peerDependencies": {