@kollexeo/icons 0.2.1 → 1.0.0

package/README.md

@@ -1,106 +1,92 @@
 # @kollexeo/icons
 
-Custom SVG icon library for Kollexeo React Native apps.
+Custom SVG icon library for Kollexeo React Native apps. Works out of the box on iOS and Android.
 
 ## Installation
 
 ```bash
-npm install @kollexeo/icons
+npm install @kollexeo/icons react-native-svg
 ```
 
-### Requirements
+For iOS, run:
 
 ```bash
-npm install react-native-svg
+npx pod-install
 ```
 
-### Metro Configuration
-
-Add SVG transformer support in your `metro.config.js`:
-
-```js
-const { getDefaultConfig } = require('expo/metro-config');
-
-const config = getDefaultConfig(__dirname);
-
-config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer');
-config.resolver.assetExts = config.resolver.assetExts.filter((ext) => ext !== 'svg');
-config.resolver.sourceExts.push('svg');
-
-module.exports = config;
-```
+> **Note:** No additional configuration required. Icons are pre-compiled React Native components.
 
 ## Usage
 
-### Basic Usage
+### Using the Icon component
 
 ```tsx
 import { Icon } from '@kollexeo/icons';
 
 export default function MyComponent() {
-  return <Icon name="addAddCircle" size={24} color="#000000" />;
+  return <Icon name="AddAddCircleIcon" size={24} color="#000000" />;
 }
 ```
 
-### With Custom Props
+### Direct import
 
 ```tsx
-<Icon name="wifiWifi" size={32} color="#3B82F6" style={{ marginRight: 8 }} />
+import { AddAddCircleIcon } from '@kollexeo/icons';
+
+export default function MyComponent() {
+  return <AddAddCircleIcon size={24} color="#000000" />;
+}
 ```
 
-### Direct SVG Import
+### Customizing stroke width
 
 ```tsx
-import { icons } from '@kollexeo/icons';
-
-const WifiIcon = icons.wifiWifi;
-
-export default function MyComponent() {
-  return <WifiIcon width={24} height={24} fill="#000000" />;
-}
+<Icon name="AddAdd01Icon" size={32} color="#3B82F6" strokeWidth={2} />
 ```
 
 ## Props
 
-| Prop       | Type                   | Default   | Description                |
-| ---------- | ---------------------- | --------- | -------------------------- |
-| `name`     | `IconName`             | required  | Icon name                  |
-| `size`     | `number`               | `24`      | Icon size in pixels        |
-| `color`    | `string`               | `#000000` | Icon fill color            |
-| `style`    | `StyleProp<ViewStyle>` | -         | Additional styles          |
-| `...props` | `SvgProps`             | -         | All react-native-svg props |
+| Prop          | Type       | Default          | Description           |
+| ------------- | ---------- | ---------------- | --------------------- |
+| `name`        | `IconName` | required         | Icon name             |
+| `size`        | `number`   | `24`             | Icon size in pixels   |
+| `color`       | `string`   | `'currentColor'` | Icon color            |
+| `strokeWidth` | `number`   | -                | Override stroke width |
 
-## Available Icons
+## TypeScript
 
-Icons are organized by category:
+Full TypeScript support with autocomplete for icon names:
 
-- `add` - Add, remove, delete icons
-- `alert` - Alert and notification icons
-- `arrow` - Arrow and direction icons
-- `wifi` - Wifi and connectivity icons
-- ... and more
+```tsx
+import { Icon, IconName, IconProps } from '@kollexeo/icons';
 
-### Naming Convention
+const iconName: IconName = 'AddAddCircleIcon';
 
-Icon names follow the pattern: `{category}{IconName}`
+<Icon name={iconName} size={24} color="red" />;
+```
 
-Examples:
+## Available Icons
 
-- `addAddCircle`
-- `arrowArrowLeft`
-- `wifiWireless`
+3000+ icons organized by category:
 
-## TypeScript
+- `Add` - Add, remove, delete icons
+- `Alert` - Alert and notification icons
+- `Arrow` - Arrow and direction icons
+- `Media` - Play, pause, volume icons
+- `Security` - Lock, shield, fingerprint icons
+- `Wifi` - Wifi and connectivity icons
+- ... and more
 
-Full TypeScript support with autocomplete for icon names:
+### Naming Convention
 
-```tsx
-import { Icon, IconName } from '@kollexeo/icons';
+Icon names follow the pattern: `{Category}{IconName}Icon`
 
-const iconName: IconName = 'addAddCircle';
+Examples:
 
-<Icon name={iconName} />;
-```
+- `AddAddCircleIcon`
+- `ArrowArrowLeftIcon`
+- `WifiWirelessIcon`
+- `MediaPlayIcon`
 
 ## License