@xsolla/xui-icons-base 0.141.0 → 0.147.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-icons-base",
-  "version": "0.141.0",
+  "version": "0.147.1",
   "main": "./web/index.js",
   "types": "./web/index.d.ts",
   "exports": {

package/README.md

@@ -1,316 +0,0 @@
-# Icons Base
-
-A comprehensive collection of functional UI icons organized by category. Each icon is available in both solid (filled) and line (outlined) variants for design flexibility.
-
-## Installation
-
-```bash
-npm install @xsolla/xui-icons-base
-# or
-yarn add @xsolla/xui-icons-base
-```
-
-## Demo
-
-### Basic Usage
-
-```tsx
-import * as React from 'react';
-import { HomeSolid, HomeLine } from '@xsolla/xui-icons-base';
-
-export default function BasicIconsBase() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <HomeSolid size={24} />
-      <HomeLine size={24} />
-    </div>
-  );
-}
-```
-
-### Icon Variants
-
-```tsx
-import * as React from 'react';
-import {
-  StarSolid, StarLine,
-  HeartSolid, HeartLine,
-  BellSolid, BellLine,
-} from '@xsolla/xui-icons-base';
-
-export default function IconVariants() {
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: 16 }}>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <StarSolid size={24} />
-        <span>Solid</span>
-      </div>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <StarLine size={24} />
-        <span>Line</span>
-      </div>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <HeartSolid size={24} color="#e74c3c" />
-        <span>Solid</span>
-      </div>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <HeartLine size={24} color="#e74c3c" />
-        <span>Line</span>
-      </div>
-    </div>
-  );
-}
-```
-
-### Custom Sizes
-
-```tsx
-import * as React from 'react';
-import { CheckCircleSolid } from '@xsolla/xui-icons-base';
-
-export default function IconSizes() {
-  return (
-    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <CheckCircleSolid size={16} />
-      <CheckCircleSolid size={20} />
-      <CheckCircleSolid size={24} />
-      <CheckCircleSolid size={32} />
-      <CheckCircleSolid size={48} />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-Import icons directly by name with their variant suffix:
-
-```jsx
-import { IconNameSolid, IconNameLine } from '@xsolla/xui-icons-base';
-
-// Solid variant (filled)
-<IconNameSolid size={24} color="#color" />
-
-// Line variant (outlined)
-<IconNameLine size={24} color="#color" />
-```
-
-## Icon Categories
-
-### User Interface
-
-```tsx
-import {
-  // Navigation
-  HomeSolid, HomeLine,
-  SearchSolid, SearchLine,
-  MenuSolid, MenuLine,
-  SettingsSolid, SettingsLine,
-
-  // Actions
-  PlusSolid, PlusLine,
-  EditSolid, EditLine,
-  TrashSolid, TrashLine,
-  CopySolid, CopyLine,
-} from '@xsolla/xui-icons-base';
-```
-
-### Communication
-
-```tsx
-import {
-  MailSolid, MailLine,
-  MessageSolid, MessageLine,
-  NotificationSolid, NotificationLine,
-  BellSolid, BellLine,
-} from '@xsolla/xui-icons-base';
-```
-
-### Media
-
-```tsx
-import {
-  ImageSolid, ImageLine,
-  CameraSolid, CameraLine,
-  VideoSolid, VideoLine,
-  PlaySolid, PlayLine,
-  PauseSolid, PauseLine,
-} from '@xsolla/xui-icons-base';
-```
-
-### Files & Folders
-
-```tsx
-import {
-  FileSolid, FileLine,
-  FolderSolid, FolderLine,
-  DocumentSolid, DocumentLine,
-  DownloadSolid, DownloadLine,
-  UploadSolid, UploadLine,
-} from '@xsolla/xui-icons-base';
-```
-
-### Status & Feedback
-
-```tsx
-import {
-  CheckCircleSolid, CheckCircleLine,
-  WarningCircleSolid, WarningCircleLine,
-  ErrorCircleSolid, ErrorCircleLine,
-  InfoCircleSolid, InfoCircleLine,
-  HelpCircleSolid, HelpCircleLine,
-} from '@xsolla/xui-icons-base';
-```
-
-### Shopping & E-commerce
-
-```tsx
-import {
-  CartSolid, CartLine,
-  BagSolid, BagLine,
-  CreditCardSolid, CreditCardLine,
-  TagSolid, TagLine,
-  GiftSolid, GiftLine,
-} from '@xsolla/xui-icons-base';
-```
-
-## Examples
-
-### Icon Grid Display
-
-```tsx
-import * as React from 'react';
-import * as Icons from '@xsolla/xui-icons-base';
-
-export default function IconGrid() {
-  const solidIcons = [
-    'HomeSolid', 'SearchSolid', 'UserSolid', 'SettingsSolid',
-    'BellSolid', 'HeartSolid', 'StarSolid', 'BookmarkSolid'
-  ];
-
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
-      {solidIcons.map(name => {
-        const IconComponent = Icons[name];
-        return (
-          <div key={name} style={{ textAlign: 'center' }}>
-            <IconComponent size={24} />
-            <div style={{ fontSize: 10, marginTop: 4 }}>
-              {name.replace('Solid', '')}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-```
-
-### Toggle Between Variants
-
-```tsx
-import * as React from 'react';
-import { HeartSolid, HeartLine } from '@xsolla/xui-icons-base';
-
-export default function ToggleIcon() {
-  const [liked, setLiked] = React.useState(false);
-
-  return (
-    <button
-      onClick={() => setLiked(!liked)}
-      style={{ background: 'none', border: 'none', cursor: 'pointer' }}
-    >
-      {liked ? (
-        <HeartSolid size={24} color="#e74c3c" />
-      ) : (
-        <HeartLine size={24} />
-      )}
-    </button>
-  );
-}
-```
-
-### Status Indicators
-
-```tsx
-import * as React from 'react';
-import {
-  CheckCircleSolid,
-  WarningCircleSolid,
-  ErrorCircleSolid,
-  InfoCircleSolid,
-} from '@xsolla/xui-icons-base';
-
-export default function StatusIndicators() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <CheckCircleSolid size={20} color="#2ecc71" />
-        <span>Success message</span>
-      </div>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <WarningCircleSolid size={20} color="#f39c12" />
-        <span>Warning message</span>
-      </div>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <ErrorCircleSolid size={20} color="#e74c3c" />
-        <span>Error message</span>
-      </div>
-      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-        <InfoCircleSolid size={20} color="#3498db" />
-        <span>Info message</span>
-      </div>
-    </div>
-  );
-}
-```
-
-## API Reference
-
-### Icon Components
-
-All icons share the same props interface.
-
-**Icon Props:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| size | `number` | `24` | Icon size in pixels. |
-| color | `string` | `currentColor` | Icon color. |
-
-### Naming Convention
-
-Icons follow a consistent naming pattern:
-
-```
-{IconName}{Variant}
-
-Where:
-- IconName: PascalCase name (e.g., Home, CheckCircle, ShoppingCart)
-- Variant: Either "Solid" or "Line"
-
-Examples:
-- HomeSolid, HomeLine
-- CheckCircleSolid, CheckCircleLine
-- ShoppingCartSolid, ShoppingCartLine
-```
-
-## Theming
-
-Icons use `currentColor` by default, inheriting color from parent elements:
-
-```tsx
-// Icon inherits text color from parent
-<div style={{ color: '#3498db' }}>
-  <HomeSolid /> {/* Will be #3498db */}
-</div>
-
-// Or set color directly
-<HomeSolid color="#e74c3c" />
-```
-
-## Accessibility
-
-- Icons are decorative by default (`aria-hidden="true"`)
-- When using icons to convey meaning, add appropriate `aria-label` to the container
-- For icon-only buttons, always provide accessible labels