@xsolla/xui-icons 0.150.0 → 0.151.0

package/README.md

@@ -1,148 +1,98 @@
 # Icons
 
-A cross-platform React icon component library based on Lucide icons. Provides theme-aware icons that automatically adapt to the current theme colors.
+A small curated set of icons backed by `lucide-icon-platform` and rendered through the cross-platform `<Icon>` primitive from `@xsolla/xui-primitives`. Each icon scales with its container.
 
 ## Installation
 
 ```bash
 npm install @xsolla/xui-icons
-# or
-yarn add @xsolla/xui-icons
 ```
 
-## Demo
-
-### Basic Usage
-
-Icons are exported as named components. Import and use them directly:
+## Imports
 
 ```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>
-  );
-}
+import { Home, Settings, Search, Check, Bell } from '@xsolla/xui-icons';
 ```
 
-### Icon Sizes
+## Quick start
 
 ```tsx
 import * as React from 'react';
-import { Bell } from '@xsolla/xui-icons';
+import { Home } 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>
-  );
+export default function QuickStart() {
+  return <Home aria-hidden />;
 }
 ```
 
-### Custom Colors
+For most product surfaces prefer `@xsolla/xui-icons-base` (500+ icons with `solid`/`line` variants). This package exists as a lightweight, primitive-backed alternative for primitives-aligned consumers.
 
-```tsx
-import * as React from 'react';
-import { Check, AlertCircle, X } from '@xsolla/xui-icons';
-
-export default function ColoredIcons() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Check color="#2ecc71" />
-      <AlertCircle color="#f39c12" />
-      <X color="#e74c3c" />
-    </div>
-  );
-}
-```
+## API Reference
 
-## Anatomy
+### Icon components (`<Home>`, `<Settings>`, `<Check>`, ...)
 
-Import icons as named exports and use them as components:
+Each icon is a thin wrapper around `<Icon>` from `@xsolla/xui-primitives` containing a Lucide glyph rendered at `size="100%"`. Props are forwarded to `<Icon>`; refer to the primitives package for the authoritative prop list. Common props:
 
-```jsx
-import { Home, Settings, Check } from '@xsolla/xui-icons';
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `number \| string` | inherited from `<Icon>` | Outer icon size. The inner SVG always fills the container. |
+| `color` | `string` | theme default | Icon colour. |
+| `aria-label` | `string` | — | Accessible label. |
+| `aria-hidden` | `boolean` | — | Mark as decorative. |
 
-<Home
-  size={24}            // Size in pixels (default: 24)
-  color="#color"       // Custom color (uses theme default if not specified)
-/>
-```
+Additional props supported by `<Icon>` (e.g. `className`, `style`, test IDs) are passed through.
 
-## Examples
+This package does not consume `ThemeOverrideProps` directly; theme awareness is handled by the underlying `<Icon>` primitive.
 
-### Navigation Icons
+## Available icons
 
-```tsx
-import * as React from 'react';
-import { ArrowLeft, ArrowRight, Menu, X } from '@xsolla/xui-icons';
+`Check`, `X`, `Copy`, `Eye`, `EyeOff`, `ArrowLeft`, `ArrowRight`, `Settings`, `Minus`, `AlertCircle`, `CreditCard`, `Menu`, `Bell`, `User`, `Search`, `Home`, `ShoppingCart`, `Upload`, `File`, `Info`.
 
-export default function NavigationIcons() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <ArrowLeft />
-      <ArrowRight />
-      <Menu />
-      <X />
-    </div>
-  );
-}
-```
+## Examples
 
-### Action Icons
+### Basic usage
 
 ```tsx
 import * as React from 'react';
-import { Check, X, Minus, Copy } from '@xsolla/xui-icons';
+import { Home, Settings, User, Search } from '@xsolla/xui-icons';
 
-export default function ActionIcons() {
+export default function Basic() {
   return (
     <div style={{ display: 'flex', gap: 16 }}>
-      <Check />
-      <X />
-      <Minus />
-      <Copy />
+      <Home aria-hidden />
+      <Settings aria-hidden />
+      <User aria-hidden />
+      <Search aria-hidden />
     </div>
   );
 }
 ```
 
-### Status Icons
+### Coloured icons
 
 ```tsx
 import * as React from 'react';
-import { Check, AlertCircle } from '@xsolla/xui-icons';
+import { Check, AlertCircle, X } from '@xsolla/xui-icons';
 
-export default function StatusIcons() {
+export default function Coloured() {
   return (
     <div style={{ display: 'flex', gap: 16 }}>
-      <Check color="#2ecc71" />
-      <AlertCircle color="#f39c12" />
+      <Check color="#2ecc71" aria-hidden />
+      <AlertCircle color="#f39c12" aria-hidden />
+      <X color="#e74c3c" aria-hidden />
     </div>
   );
 }
 ```
 
-### With Button
+### With a button
 
 ```tsx
 import * as React from 'react';
-import { ArrowRight, ArrowLeft } from '@xsolla/xui-icons';
+import { ArrowLeft, ArrowRight } from '@xsolla/xui-icons';
 import { Button } from '@xsolla/xui-button';
 
-export default function IconWithButton() {
+export default function ButtonsWithIcons() {
   return (
     <div style={{ display: 'flex', gap: 16 }}>
       <Button iconLeft={<ArrowLeft />}>Back</Button>
@@ -152,75 +102,19 @@ export default function IconWithButton() {
 }
 ```
 
-## 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
-
-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
+### Extended icon sets
 
-```tsx
-import { ChevronDown, ChevronUp, Calendar, Clock } from '@xsolla/xui-icons-base';
-
-// Use like any other icon
-<ChevronDown size={16} />
-<Calendar color="#333" />
-```
+For a wider palette, use the family-specific packages:
 
-## Theming
-
-Icons use the design system theme for default color:
-
-```typescript
-// Default color from theme
-theme.colors.content.primary  // Default icon color
-```
+- `@xsolla/xui-icons-base` — 500+ functional icons (`solid`/`line`).
+- `@xsolla/xui-icons-brand` — brand and platform logos.
+- `@xsolla/xui-icons-flag` — country flags (ISO 3166-1 alpha-2).
+- `@xsolla/xui-icons-payment` — payment-method logos.
+- `@xsolla/xui-icons-currency` — Xsolla virtual-currency icons.
+- `@xsolla/xui-icons-product` — Xsolla product icons.
 
 ## 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`
+- Mark decorative icons with `aria-hidden`.
+- For meaningful icons, set `aria-label` on the icon or its parent.
+- Use `IconButton` from `@xsolla/xui-button` for interactive icon-only controls.

package/package.json

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