@xaui/icons 0.0.2 → 0.0.4

package/README.md

@@ -1,6 +1,6 @@
 # @xaui/icons
 
-Icon components for XAUI - A Flutter-inspired React Native UI library.
+Icon components for XAUI - A Flutter-inspired React Native UI library. Includes 520+ icons with individual exports for optimal tree-shaking.
 
 ## Installation
 
@@ -18,6 +18,8 @@ For optimal performance and tree-shaking, import icons individually:
 import { ChevronLeftIcon } from '@xaui/icons/chevron-left'
 import { ChevronRightIcon } from '@xaui/icons/chevron-right'
 import { HeartIcon } from '@xaui/icons/heart'
+import { HomeIcon } from '@xaui/icons/home'
+import { SettingsIcon } from '@xaui/icons/settings'
 import type { IconProps } from '@xaui/icons/heart'
 
 function MyComponent() {
@@ -26,6 +28,8 @@ function MyComponent() {
       <ChevronLeftIcon size={24} color="#000" variant="baseline" />
       <ChevronRightIcon size={32} color="#FF0000" variant="filled" />
       <HeartIcon size={24} color="#FF0000" variant="filled" isAnimated />
+      <HomeIcon size={28} color="#3B82F6" variant="duotone" />
+      <SettingsIcon size={24} variant="round-outlined" />
     </>
   )
 }
@@ -45,43 +49,96 @@ import { ChevronLeftIcon, ChevronRightIcon, HeartIcon } from '@xaui/icons'
 
 All icons support the following props:
 
-- `variant`: Icon style variant
-  - `'baseline'` (default) - Outline style
-  - `'filled'` - Solid fill style
-  - `'duotone'` - Two-tone style with opacity
-  - `'round-outlined'` - Outline with circular background
-  - `'square-outlined'` - Outline with square background
-  - `'round-filled'` - Filled with circular background
-  - `'square-filled'` - Filled with square background
+### `variant`
 
-- `size`: Icon size in pixels (default: `24`)
+Icon style variant:
 
-- `color`: Icon color as a string (default: `'default'`)
-  - Can be any valid color string: `'#FF0000'`, `'rgb(255, 0, 0)'`, `'red'`
+- `'baseline'` (default) - Outline style
+- `'filled'` - Solid fill style
+- `'duotone'` - Two-tone style with opacity
+- `'round-outlined'` - Outline with circular background
+- `'square-outlined'` - Outline with square background
+- `'round-filled'` - Filled with circular background
+- `'square-filled'` - Filled with square background
 
-- `isAnimated`: Whether to animate the icon on mount (default: `false`)
-  - Animates with a scale and fade-in effect
+### `size`
 
-## Available Icons
+Icon size in pixels (default: `24`)
 
-This package includes 520+ icons. To see all available icons, check the [icons directory](./src/icons).
+### `color`
 
-### Icon Naming Convention
+Icon color as a string (default: `'default'`)
+
+- Can be any valid color string: `'#FF0000'`, `'rgb(255, 0, 0)'`, `'red'`
+- Use theme colors from `@xaui/core`: `theme.colors.primary.main`
+
+### `isAnimated`
+
+Whether to animate the icon on mount (default: `false`)
+
+- Animates with a scale and fade-in effect
+
+## Icon Naming Convention
 
 Icon names follow kebab-case format:
 
-- `chevron-left` → `ChevronLeftIcon`
-- `arrow-forward-circle` → `ArrowForwardCircleIcon`
-- `logo-react` → `LogoReactIcon`
+| File Name              | Component Name           |
+| ---------------------- | ------------------------ |
+| `chevron-left`         | `ChevronLeftIcon`        |
+| `arrow-forward-circle` | `ArrowForwardCircleIcon` |
+| `logo-react`           | `LogoReactIcon`          |
+| `home`                 | `HomeIcon`               |
+| `settings`             | `SettingsIcon`           |
+| `user-profile`         | `UserProfileIcon`        |
+
+## Common Icons
+
+### Navigation
+
+- `chevron-left`, `chevron-right`, `chevron-up`, `chevron-down`
+- `arrow-left`, `arrow-right`, `arrow-up`, `arrow-down`
+- `arrow-back`, `arrow-forward`
+- `menu`, `close`, `more-horizontal`, `more-vertical`
+
+### Actions
+
+- `home`, `settings`, `search`, `filter`
+- `plus`, `minus`, `check`, `x`
+- `edit`, `trash`, `copy`, `share`
+- `heart`, `star`, `bookmark`, `flag`
+
+### Communication
+
+- `mail`, `message`, `chat`, `bell`
+- `phone`, `video`, `mic`, `camera`
+- `send`, `attachment`, `emoji`
+
+### Content
+
+- `image`, `file`, `folder`, `document`
+- `calendar`, `clock`, `location`, `map`
+- `music`, `play`, `pause`, `skip-forward`
+
+### Social & Brand
+
+- `logo-react`, `logo-github`, `logo-twitter`, `logo-facebook`
+- `logo-instagram`, `logo-linkedin`, `logo-youtube`
+- `user`, `users`, `group`, `community`
+
+### Status
+
+- `check-circle`, `x-circle`, `alert-circle`, `info`
+- `warning`, `error`, `success`, `help`
+- `loading`, `spinner`, `refresh`, `sync`
 
 ## Performance
 
 ### Individual Imports vs Batch Imports
 
-| Import Method | Bundle Size Impact | Load Time | Recommended |
-|---------------|-------------------|-----------|-------------|
-| Individual (`@xaui/icons/chevron-left`) | Minimal (~2-5KB per icon) | Fast | ✅ Yes |
-| Batch (`@xaui/icons`) | Large (~2-3MB all icons) | Slow | ❌ No |
+| Import Method                           | Bundle Size Impact        | Load Time | Recommended |
+| --------------------------------------- | ------------------------- | --------- | ----------- |
+| Individual (`@xaui/icons/chevron-left`) | Minimal (~2-5KB per icon) | Fast      | ✅ Yes      |
+| Batch (`@xaui/icons`)                   | Large (~2-3MB all icons)  | Slow      | ❌ No       |
 
 ### Example Bundle Size Comparison
 
@@ -93,6 +150,13 @@ import { ChevronLeftIcon } from '@xaui/icons/chevron-left'
 import { ChevronLeftIcon } from '@xaui/icons'
 ```
 
+### Best Practices
+
+1. **Always use individual imports** for production apps
+2. **Import only the icons you need** in each component
+3. **Use consistent icon sizes** across your app for visual harmony
+4. **Leverage theme colors** instead of hardcoded colors
+
 ## TypeScript
 
 All icons are fully typed with TypeScript. Import types alongside icons:
@@ -109,6 +173,31 @@ const iconProps: IconProps = {
 }
 ```
 
+### Available Types
+
+```typescript
+import type { IconProps, IconVariant, IconSize } from '@xaui/icons/chevron-left'
+
+// IconProps - All props available on icon components
+// IconVariant - 'baseline' | 'filled' | 'duotone' | 'round-outlined' | 'square-outlined' | 'round-filled' | 'square-filled'
+// IconSize - number (default: 24)
+```
+
+## Integration with Theme
+
+Use icons with the XAUI theme system:
+
+```tsx
+import { useXUITheme } from '@xaui/core/theme'
+import { HeartIcon } from '@xaui/icons/heart'
+
+function LikeButton() {
+  const theme = useXUITheme()
+
+  return <HeartIcon size={24} color={theme.colors.danger.main} variant="filled" />
+}
+```
+
 ## Development
 
 ### Generate Exports
@@ -120,6 +209,7 @@ pnpm generate-exports
 ```
 
 This script:
+
 1. Scans all icon files in `src/icons/`
 2. Generates entry files in `src/entries/`
 3. Updates `package.json` exports

package/dist/add.cjs

@@ -91,16 +91,7 @@ var AddIcon = ({
       ...animatedProps
     }
   );
-  const renderDuotone = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_react_native_svg.Circle,
-    {
-      cx: "256",
-      cy: "256",
-      r: "192",
-      fill: resolvedColor,
-      opacity: 0.3
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  const renderDuotone = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Circle, { cx: "256", cy: "256", r: "192", fill: resolvedColor, opacity: 0.3 }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       fill: "none",

package/dist/add.js

@@ -1,6 +1,6 @@
 import {
   AddIcon
-} from "./chunk-4OGN5M2M.js";
+} from "./chunk-5JTKLX7E.js";
 export {
   AddIcon
 };

package/dist/alert-circle.cjs

@@ -232,14 +232,7 @@ var AlertCircleIcon = ({
     }
   ));
   const renderRoundFilled = () => renderFilled();
-  const renderSquareFilled = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    AnimatedPath,
-    {
-      fill: "none",
-      d: "M240 304h32l6-160h-44z",
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  const renderSquareFilled = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(AnimatedPath, { fill: "none", d: "M240 304h32l6-160h-44z", ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,

package/dist/alert-circle.js

@@ -1,6 +1,6 @@
 import {
   AlertCircleIcon
-} from "./chunk-PG36FES7.js";
+} from "./chunk-G2SJTDXE.js";
 export {
   AlertCircleIcon
 };

package/dist/binoculars.cjs

@@ -73,23 +73,7 @@ var BinocularsIcon = ({
     transform: [{ scale: scaleAnim }],
     opacity: opacityAnim
   } : void 0;
-  const renderBaseline = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 392,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 120,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  const renderBaseline = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 392, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 120, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       d: "M208 344V128c0-26.5-16-48-44-48c-35 0-46.5 21.5-57 48c0 0-48.5 127.833-71 189.5M208 184s16.5-8 48-8s48 8 48 8m-96 88s16.5-8 48-8s48 8 48 8m0 72V128c0-26.5 16-48 44-48c35 0 46.5 21.5 57 48c0 0 48.5 127.833 71 189.5",
@@ -116,23 +100,7 @@ var BinocularsIcon = ({
       opacity: 0.3,
       ...animatedProps
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 392,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 120,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 392, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 120, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       d: "M208 344V128c0-26.5-16-48-44-48c-35 0-46.5 21.5-57 48c0 0-48.5 127.833-71 189.5M208 184s16.5-8 48-8s48 8 48 8m-96 88s16.5-8 48-8s48 8 48 8m0 72V128c0-26.5 16-48 44-48c35 0 46.5 21.5 57 48c0 0 48.5 127.833 71 189.5",
@@ -150,23 +118,7 @@ var BinocularsIcon = ({
       strokeWidth: 32,
       ...animatedProps
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 392,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 120,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 392, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 120, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       d: "M208 344V128c0-26.5-16-48-44-48c-35 0-46.5 21.5-57 48c0 0-48.5 127.833-71 189.5M208 184s16.5-8 48-8s48 8 48 8m-96 88s16.5-8 48-8s48 8 48 8m0 72V128c0-26.5 16-48 44-48c35 0 46.5 21.5 57 48c0 0 48.5 127.833 71 189.5",
@@ -186,23 +138,7 @@ var BinocularsIcon = ({
       strokeWidth: 32,
       ...animatedProps
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 392,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 120,
-      cy: 344,
-      r: 88,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 392, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(AnimatedCircle, { cx: 120, cy: 344, r: 88, ...animatedProps }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       d: "M208 344V128c0-26.5-16-48-44-48c-35 0-46.5 21.5-57 48c0 0-48.5 127.833-71 189.5M208 184s16.5-8 48-8s48 8 48 8m-96 88s16.5-8 48-8s48 8 48 8m0 72V128c0-26.5 16-48 44-48c35 0 46.5 21.5 57 48c0 0 48.5 127.833 71 189.5",

package/dist/binoculars.js

@@ -1,6 +1,6 @@
 import {
   BinocularsIcon
-} from "./chunk-OV7TWY6D.js";
+} from "./chunk-Z527TDP3.js";
 export {
   BinocularsIcon
 };

package/dist/calendar.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(calendar_exports);
 // src/icons/calendar.tsx
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
-var import_react_native_svg = require("react-native-svg");
+var import_react_native_svg = __toESM(require("react-native-svg"), 1);
 var AnimatedPath = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Path);
 var AnimatedCircle = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Circle);
 var AnimatedRect = import_react_native.Animated.createAnimatedComponent(import_react_native_svg.Rect);
@@ -190,25 +190,15 @@ var CalendarIcon = ({
       ...animatedProps
     }
   ));
-  const renderFilled = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+  const renderFilled = () => /* @__PURE__ */ import_react.default.createElement(
     AnimatedPath,
     {
       fill: resolvedColor,
       d: "M480 128a64 64 0 0 0-64-64h-16V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 368 48v16H144V48.45c0-8.61-6.62-16-15.23-16.43A16 16 0 0 0 112 48v16H96a64 64 0 0 0-64 64v12a4 4 0 0 0 4 4h440a4 4 0 0 0 4-4ZM32 416a64 64 0 0 0 64 64h320a64 64 0 0 0 64-64V179a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3Zm344-208a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m-80-80a24 24 0 1 1-24 24a24 24 0 0 1 24-24m0 80a24 24 0 1 1-24 24a24 24 0 0 1 24-24",
       ...animatedProps
     }
-  ));
-  const renderDuotone = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    AnimatedCircle,
-    {
-      cx: 256,
-      cy: 256,
-      r: 192,
-      fill: resolvedColor,
-      opacity: 0.3,
-      ...animatedProps
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(
+  );
+  const renderDuotone = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Circle, { cx: 256, cy: 256, r: 192, fill: resolvedColor, opacity: 0.3 }), /* @__PURE__ */ import_react.default.createElement(
     AnimatedRect,
     {
       width: 416,
@@ -611,7 +601,7 @@ var CalendarIcon = ({
         return renderBaseline();
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/calendar.js

@@ -1,6 +1,6 @@
 import {
   CalendarIcon
-} from "./chunk-5367KJ6I.js";
+} from "./chunk-RGAXLVVL.js";
 export {
   CalendarIcon
 };

package/dist/call.js

@@ -1,6 +1,158 @@
-import {
-  CallIcon
-} from "./chunk-E5G6BE4Q.js";
+// src/icons/call.tsx
+import React, { useEffect, useMemo, useRef } from "react";
+import { Animated } from "react-native";
+import { Svg, Path, Circle, Rect } from "react-native-svg";
+var AnimatedPath = Animated.createAnimatedComponent(Path);
+var AnimatedCircle = Animated.createAnimatedComponent(Circle);
+var AnimatedRect = Animated.createAnimatedComponent(Rect);
+var CallIcon = ({
+  variant = "baseline",
+  size = 24,
+  color = "black",
+  isAnimated = false
+}) => {
+  const scaleAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
+  const opacityAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
+  const resolvedColor = useMemo(() => {
+    return color;
+  }, [color]);
+  useEffect(() => {
+    if (isAnimated) {
+      Animated.parallel([
+        Animated.spring(scaleAnim, {
+          toValue: 1,
+          useNativeDriver: true,
+          tension: 50,
+          friction: 7
+        }),
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 200,
+          useNativeDriver: true
+        })
+      ]).start();
+    }
+  }, [isAnimated, scaleAnim, opacityAnim]);
+  const animatedProps = isAnimated ? {
+    transform: [{ scale: scaleAnim }],
+    opacity: opacityAnim
+  } : void 0;
+  const renderBaseline = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeMiterlimit: 10,
+      strokeWidth: 32,
+      d: "M451 374c-15.88-16-54.34-39.35-73-48.76c-24.3-12.24-26.3-13.24-45.4.95c-12.74 9.47-21.21 17.93-36.12 14.75s-47.31-21.11-75.68-49.39s-47.34-61.62-50.53-76.48s5.41-23.23 14.79-36c13.22-18 12.22-21 .92-45.3c-8.81-18.9-32.84-57-48.9-72.8C119.9 44 119.9 47 108.83 51.6A160 160 0 0 0 83 65.37C67 76 58.12 84.83 51.91 98.1s-9 44.38 23.07 102.64s54.57 88.05 101.14 134.49S258.5 406.64 310.85 436c64.76 36.27 89.6 29.2 102.91 23s22.18-15 32.83-31a159 159 0 0 0 13.8-25.8C465 391.17 468 391.17 451 374Z",
+      ...animatedProps
+    }
+  ));
+  const renderFilled = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: resolvedColor,
+      d: "M391 480c-19.52 0-46.94-7.06-88-30c-49.93-28-88.55-53.85-138.21-103.38C116.91 298.77 93.61 267.79 61 208.45c-36.84-67-30.56-102.12-23.54-117.13C45.82 73.38 58.16 62.65 74.11 52a176.3 176.3 0 0 1 28.64-15.2c1-.43 1.93-.84 2.76-1.21c4.95-2.23 12.45-5.6 21.95-2c6.34 2.38 12 7.25 20.86 16c18.17 17.92 43 57.83 52.16 77.43c6.15 13.21 10.22 21.93 10.23 31.71c0 11.45-5.76 20.28-12.75 29.81c-1.31 1.79-2.61 3.5-3.87 5.16c-7.61 10-9.28 12.89-8.18 18.05c2.23 10.37 18.86 41.24 46.19 68.51s57.31 42.85 67.72 45.07c5.38 1.15 8.33-.59 18.65-8.47c1.48-1.13 3-2.3 4.59-3.47c10.66-7.93 19.08-13.54 30.26-13.54h.06c9.73 0 18.06 4.22 31.86 11.18c18 9.08 59.11 33.59 77.14 51.78c8.77 8.84 13.66 14.48 16.05 20.81c3.6 9.53.21 17-2 22c-.37.83-.78 1.74-1.21 2.75a176.5 176.5 0 0 1-15.29 28.58c-10.63 15.9-21.4 28.21-39.38 36.58A67.4 67.4 0 0 1 391 480",
+      ...animatedProps
+    }
+  ));
+  const renderDuotone = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedCircle,
+    {
+      cx: 256,
+      cy: 256,
+      r: 192,
+      fill: resolvedColor,
+      opacity: 0.3,
+      ...animatedProps
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeMiterlimit: 10,
+      strokeWidth: 32,
+      d: "M451 374c-15.88-16-54.34-39.35-73-48.76c-24.3-12.24-26.3-13.24-45.4.95c-12.74 9.47-21.21 17.93-36.12 14.75s-47.31-21.11-75.68-49.39s-47.34-61.62-50.53-76.48s5.41-23.23 14.79-36c13.22-18 12.22-21 .92-45.3c-8.81-18.9-32.84-57-48.9-72.8C119.9 44 119.9 47 108.83 51.6A160 160 0 0 0 83 65.37C67 76 58.12 84.83 51.91 98.1s-9 44.38 23.07 102.64s54.57 88.05 101.14 134.49S258.5 406.64 310.85 436c64.76 36.27 89.6 29.2 102.91 23s22.18-15 32.83-31a159 159 0 0 0 13.8-25.8C465 391.17 468 391.17 451 374Z",
+      ...animatedProps
+    }
+  ));
+  const renderRoundOutlined = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedCircle,
+    {
+      cx: 256,
+      cy: 256,
+      r: 192,
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32,
+      ...animatedProps
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeMiterlimit: 10,
+      strokeWidth: 32,
+      d: "M451 374c-15.88-16-54.34-39.35-73-48.76c-24.3-12.24-26.3-13.24-45.4.95c-12.74 9.47-21.21 17.93-36.12 14.75s-47.31-21.11-75.68-49.39s-47.34-61.62-50.53-76.48s5.41-23.23 14.79-36c13.22-18 12.22-21 .92-45.3c-8.81-18.9-32.84-57-48.9-72.8C119.9 44 119.9 47 108.83 51.6A160 160 0 0 0 83 65.37C67 76 58.12 84.83 51.91 98.1s-9 44.38 23.07 102.64s54.57 88.05 101.14 134.49S258.5 406.64 310.85 436c64.76 36.27 89.6 29.2 102.91 23s22.18-15 32.83-31a159 159 0 0 0 13.8-25.8C465 391.17 468 391.17 451 374Z",
+      ...animatedProps
+    }
+  ));
+  const renderSquareOutlined = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedRect,
+    {
+      x: 64,
+      y: 64,
+      width: 384,
+      height: 384,
+      rx: 48,
+      fill: "none",
+      stroke: resolvedColor,
+      strokeWidth: 32,
+      ...animatedProps
+    }
+  ), /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: "none",
+      stroke: resolvedColor,
+      strokeMiterlimit: 10,
+      strokeWidth: 32,
+      d: "M451 374c-15.88-16-54.34-39.35-73-48.76c-24.3-12.24-26.3-13.24-45.4.95c-12.74 9.47-21.21 17.93-36.12 14.75s-47.31-21.11-75.68-49.39s-47.34-61.62-50.53-76.48s5.41-23.23 14.79-36c13.22-18 12.22-21 .92-45.3c-8.81-18.9-32.84-57-48.9-72.8C119.9 44 119.9 47 108.83 51.6A160 160 0 0 0 83 65.37C67 76 58.12 84.83 51.91 98.1s-9 44.38 23.07 102.64s54.57 88.05 101.14 134.49S258.5 406.64 310.85 436c64.76 36.27 89.6 29.2 102.91 23s22.18-15 32.83-31a159 159 0 0 0 13.8-25.8C465 391.17 468 391.17 451 374Z",
+      ...animatedProps
+    }
+  ));
+  const renderRoundFilled = () => renderFilled();
+  const renderSquareFilled = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    AnimatedPath,
+    {
+      fill: resolvedColor,
+      d: "M478.94 370.14c-5.22-5.56-23.65-22-57.53-43.75c-34.13-21.94-59.3-35.62-66.52-38.81a3.83 3.83 0 0 0-3.92.49c-11.63 9.07-31.21 25.73-32.26 26.63c-6.78 5.81-6.78 5.81-12.33 4c-9.76-3.2-40.08-19.3-66.5-45.78s-43.35-57.55-46.55-67.3c-1.83-5.56-1.83-5.56 4-12.34c.9-1.05 17.57-20.63 26.64-32.25a3.83 3.83 0 0 0 .49-3.92c-3.19-7.23-16.87-32.39-38.81-66.52c-21.78-33.87-38.2-52.3-43.76-57.52a3.9 3.9 0 0 0-3.89-.87a322.4 322.4 0 0 0-56 25.45A338 338 0 0 0 33.35 92a3.83 3.83 0 0 0-1.26 3.74c2.09 9.74 12.08 50.4 43.08 106.72c31.63 57.48 53.55 86.93 100 133.22S252 405.21 309.54 436.84c56.32 31 97 41 106.72 43.07a3.86 3.86 0 0 0 3.75-1.26A337.7 337.7 0 0 0 454.35 430a322.7 322.7 0 0 0 25.45-56a3.9 3.9 0 0 0-.86-3.86",
+      ...animatedProps
+    }
+  ));
+  const renderVariant = () => {
+    switch (variant) {
+      case "filled":
+        return renderFilled();
+      case "duotone":
+        return renderDuotone();
+      case "round-outlined":
+        return renderRoundOutlined();
+      case "square-outlined":
+        return renderSquareOutlined();
+      case "round-filled":
+        return renderRoundFilled();
+      case "square-filled":
+        return renderSquareFilled();
+      case "baseline":
+      default:
+        return renderBaseline();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 512 512" }, renderVariant());
+};
 export {
   CallIcon
 };