onecart-ui 0.1.0 → 0.2.1

package/README.md

@@ -15,15 +15,21 @@ npm install onecart-ui
 ```typescript
 // Import components
 import { Button, Typography } from 'onecart-ui';
+// Import icons
+import { Home, Search, ShoppingCart, Menu } from 'onecart-ui/icons';
 // Import tokens
 import { tokens } from 'onecart-ui/tokens';
 
 function App() {
   return (
     <div>
-      <Typography.Heading size="xl">Welcome</Typography.Heading>
+      <Typography.Heading size="xl">
+        <Home size="lg" style={{ marginRight: 8 }} />
+        Welcome
+      </Typography.Heading>
       <Typography.Body size="md">This is a web component</Typography.Body>
       <Button variant="primary" onClick={() => alert('Clicked!')}>
+        <ShoppingCart size="sm" style={{ marginRight: 4 }} />
         Click Me
       </Button>
     </div>
@@ -36,13 +42,18 @@ function App() {
 ```typescript
 // Import mobile components
 import { Button, Typography } from 'onecart-ui/mobile';
+// Import icons
+import { Home, Search, ShoppingCart, Menu } from 'onecart-ui/icons';
 // Import tokens
 import { tokens } from 'onecart-ui/tokens';
 
 function App() {
   return (
     <View>
-      <Typography.Heading size="xl">Welcome</Typography.Heading>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Home size="lg" color="#333" />
+        <Typography.Heading size="xl">Welcome</Typography.Heading>
+      </View>
       <Typography.Body size="md">This is a mobile component</Typography.Body>
       <Button variant="primary" onPress={() => alert('Pressed!')}>
         Press Me
@@ -52,14 +63,14 @@ function App() {
 }
 ```
 
-### For Mobile Projects (React Native)
+### Design Tokens
 
 ```typescript
 // Web tokens
-import { tokens } from 'onecart-ui/tokens/web';
+import { tokens } from "onecart-ui/tokens/web";
 
 // Mobile tokens
-import { tokens } from 'onecart-ui/tokens/mobile';
+import { tokens } from "onecart-ui/tokens/mobile";
 
 // Use tokens in your styles
 const styles = {
@@ -68,12 +79,52 @@ const styles = {
 };
 ```
 
+### Icons
+
+```typescript
+// Import specific icons
+import { Home, Search, ShoppingCart } from 'onecart-ui/icons';
+
+function MyComponent() {
+  return (
+    <div>
+      {/* Default size (24px) */}
+      <Home />
+
+      {/* Different sizes */}
+      <Search size="xs" /> {/* 16px */}
+      <Search size="sm" /> {/* 20px */}
+      <Search size="md" /> {/* 24px - default */}
+      <Search size="lg" /> {/* 32px */}
+      <Search size="xl" /> {/* 40px */}
+      <Search size={48} />  {/* Custom size */}
+
+      {/* With color */}
+      <ShoppingCart color="#FF5733" />
+
+      {/* With className and style */}
+      <Home
+        size="lg"
+        color="blue"
+        className="my-icon"
+        style={{ marginRight: 8 }}
+      />
+    </div>
+  );
+}
+```
+
+**Available Icons**: 466+ icons including Home, Search, ShoppingCart, Menu, Close, Add, Remove, Edit, Delete, Notifications, Settings, and more. See [full icon list](./packages/icons/README.md).
+
 ## Components
 
 - **Button**: Primary, secondary, and tertiary variants for web and mobile
 - **Typography**: Body, Display, Heading, and Utility text components
   - Each with multiple size options
   - Platform-specific implementations (web/mobile)
+- **Icons**: 466+ SVG icons with customizable size and color
+  - Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (40px), or custom
+  - All icons support color customization
 
 ## Development
 
@@ -105,12 +156,6 @@ onecart-ui/
   apps/
     docs/                  # Storybook documentation
 ```
-```
-
-## License
-
-MIT
-```
 
 ### For Mobile Projects (React Native)