@tamagui/helpers-icon 1.68.6 → 1.69.1

package/dist/cjs/themed.js

@@ -24,10 +24,19 @@ function themed(Component, opts = {
   fallbackColor: "#000"
 }) {
   return (propsIn) => {
-    const props = (0, import_core.useProps)(propsIn), theme = (0, import_core.useTheme)(), defaultColor = props.color ?? opts.defaultThemeColor, color = (0, import_core.getVariable)(
-      (defaultColor ? theme[defaultColor] : void 0) || props.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
+    const [props, style] = (0, import_core.usePropsAndStyle)(propsIn), theme = (0, import_core.useTheme)(), defaultColor = style.color ?? opts.defaultThemeColor, color = (0, import_core.getVariable)(
+      (defaultColor ? theme[defaultColor] : void 0) || style.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
     ), size = typeof props.size == "string" ? (0, import_core.getTokenValue)(props.size, "size") : props.size, strokeWidth = typeof props.strokeWidth == "string" ? (0, import_core.getTokenValue)(props.strokeWidth, "size") : props.strokeWidth ?? `${opts.defaultStrokeWidth}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, color, size, strokeWidth });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      {
+        ...props,
+        color,
+        size,
+        strokeWidth,
+        style
+      }
+    );
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/themed.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/themed.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA+D,0BAyCpD;AA9BJ,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AA0BA,SAzBgB,CAAC,YAAuB;AACtC,UAAM,YAAQ,sBAAS,OAAO,GACxB,YAAQ,sBAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,YAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,eAClB,2BAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,eACzB,2BAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WAAO,4CAAC,aAAW,GAAG,OAAO,OAAc,MAAY,aAA0B;AAAA,EACnF;AAGF;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuE,0BA0CjE;AA/BC,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AAkCA,SAjCgB,CAAC,YAAuB;AACtC,UAAM,CAAC,OAAO,KAAK,QAAI,8BAAiB,OAAO,GACzC,YAAQ,sBAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,YAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,eAClB,2BAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,eACzB,2BAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAGF;",
   "names": []
 }

package/dist/cjs/themed.native.js

@@ -25,10 +25,19 @@ function themed(Component, opts = {
   fallbackColor: "#000"
 }) {
   return (propsIn) => {
-    const props = (0, import_core.useProps)(propsIn), theme = (0, import_core.useTheme)(), defaultColor = props.color ?? opts.defaultThemeColor, color = (0, import_core.getVariable)(
-      (defaultColor ? theme[defaultColor] : void 0) || props.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
+    const [props, style] = (0, import_core.usePropsAndStyle)(propsIn), theme = (0, import_core.useTheme)(), defaultColor = style.color ?? opts.defaultThemeColor, color = (0, import_core.getVariable)(
+      (defaultColor ? theme[defaultColor] : void 0) || style.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
     ), size = typeof props.size == "string" ? (0, import_core.getTokenValue)(props.size, "size") : props.size, strokeWidth = typeof props.strokeWidth == "string" ? (0, import_core.getTokenValue)(props.strokeWidth, "size") : props.strokeWidth ?? `${opts.defaultStrokeWidth}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, color, size, strokeWidth });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      {
+        ...props,
+        color,
+        size,
+        strokeWidth,
+        style
+      }
+    );
   };
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/themed.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/themed.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA+D,0BAyCpD;AA9BJ,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AA0BA,SAzBgB,CAAC,YAAuB;AACtC,UAAM,YAAQ,sBAAS,OAAO,GACxB,YAAQ,sBAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,YAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,eAClB,2BAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,eACzB,2BAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WAAO,4CAAC,aAAW,GAAG,OAAO,OAAc,MAAY,aAA0B;AAAA,EACnF;AAGF;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuE,0BA0CjE;AA/BC,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AAkCA,SAjCgB,CAAC,YAAuB;AACtC,UAAM,CAAC,OAAO,KAAK,QAAI,8BAAiB,OAAO,GACzC,YAAQ,sBAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,YAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,eAClB,2BAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,eACzB,2BAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAGF;",
   "names": []
 }

package/dist/esm/themed.js

@@ -1,4 +1,4 @@
-import { getTokenValue, getVariable, useProps, useTheme } from "@tamagui/core";
+import { getTokenValue, getVariable, usePropsAndStyle, useTheme } from "@tamagui/core";
 import { jsx } from "react/jsx-runtime";
 function themed(Component, opts = {
   defaultThemeColor: process.env.DEFAULT_ICON_THEME_COLOR || "$color",
@@ -6,10 +6,19 @@ function themed(Component, opts = {
   fallbackColor: "#000"
 }) {
   return (propsIn) => {
-    const props = useProps(propsIn), theme = useTheme(), defaultColor = props.color ?? opts.defaultThemeColor, color = getVariable(
-      (defaultColor ? theme[defaultColor] : void 0) || props.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
+    const [props, style] = usePropsAndStyle(propsIn), theme = useTheme(), defaultColor = style.color ?? opts.defaultThemeColor, color = getVariable(
+      (defaultColor ? theme[defaultColor] : void 0) || style.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
     ), size = typeof props.size == "string" ? getTokenValue(props.size, "size") : props.size, strokeWidth = typeof props.strokeWidth == "string" ? getTokenValue(props.strokeWidth, "size") : props.strokeWidth ?? `${opts.defaultStrokeWidth}`;
-    return /* @__PURE__ */ jsx(Component, { ...props, color, size, strokeWidth });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...props,
+        color,
+        size,
+        strokeWidth,
+        style
+      }
+    );
   };
 }
 export {

package/dist/esm/themed.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/themed.tsx"],
-  "mappings": "AAAA,SAAS,eAAe,aAAa,UAAU,gBAAgB;AAyCpD;AA9BJ,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AA0BA,SAzBgB,CAAC,YAAuB;AACtC,UAAM,QAAQ,SAAS,OAAO,GACxB,QAAQ,SAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,QAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,WAClB,cAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,WACzB,cAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WAAO,oBAAC,aAAW,GAAG,OAAO,OAAc,MAAY,aAA0B;AAAA,EACnF;AAGF;",
+  "mappings": "AAAA,SAAS,eAAe,aAAa,kBAAkB,gBAAgB;AA0CjE;AA/BC,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AAkCA,SAjCgB,CAAC,YAAuB;AACtC,UAAM,CAAC,OAAO,KAAK,IAAI,iBAAiB,OAAO,GACzC,QAAQ,SAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,QAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,WAClB,cAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,WACzB,cAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAGF;",
   "names": []
 }

package/dist/jsx/themed.js

@@ -1,14 +1,20 @@
-import { getTokenValue, getVariable, useProps, useTheme } from "@tamagui/core";
+import { getTokenValue, getVariable, usePropsAndStyle, useTheme } from "@tamagui/core";
 function themed(Component, opts = {
   defaultThemeColor: process.env.DEFAULT_ICON_THEME_COLOR || "$color",
   defaultStrokeWidth: 2,
   fallbackColor: "#000"
 }) {
   return (propsIn) => {
-    const props = useProps(propsIn), theme = useTheme(), defaultColor = props.color ?? opts.defaultThemeColor, color = getVariable(
-      (defaultColor ? theme[defaultColor] : void 0) || props.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
+    const [props, style] = usePropsAndStyle(propsIn), theme = useTheme(), defaultColor = style.color ?? opts.defaultThemeColor, color = getVariable(
+      (defaultColor ? theme[defaultColor] : void 0) || style.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
     ), size = typeof props.size == "string" ? getTokenValue(props.size, "size") : props.size, strokeWidth = typeof props.strokeWidth == "string" ? getTokenValue(props.strokeWidth, "size") : props.strokeWidth ?? `${opts.defaultStrokeWidth}`;
-    return <Component {...props} color={color} size={size} strokeWidth={strokeWidth} />;
+    return <Component
+      {...props}
+      color={color}
+      size={size}
+      strokeWidth={strokeWidth}
+      style={style}
+    />;
   };
 }
 export {

package/dist/jsx/themed.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/themed.tsx"],
-  "mappings": "AAAA,SAAS,eAAe,aAAa,UAAU,gBAAgB;AAWxD,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AA0BA,SAzBgB,CAAC,YAAuB;AACtC,UAAM,QAAQ,SAAS,OAAO,GACxB,QAAQ,SAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,QAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,WAClB,cAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,WACzB,cAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WAAO,CAAC,cAAc,OAAO,OAAO,OAAO,MAAM,MAAM,aAAa,aAAa;AAAA,EACnF;AAGF;",
+  "mappings": "AAAA,SAAS,eAAe,aAAa,kBAAkB,gBAAgB;AAWhE,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AAkCA,SAjCgB,CAAC,YAAuB;AACtC,UAAM,CAAC,OAAO,KAAK,IAAI,iBAAiB,OAAO,GACzC,QAAQ,SAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,QAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,WAClB,cAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,WACzB,cAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WACE,CAAC;AAAA,UACK;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EAEJ;AAGF;",
   "names": []
 }

package/dist/jsx/themed.native.js

@@ -1,14 +1,20 @@
-import { getTokenValue, getVariable, useProps, useTheme } from "@tamagui/core";
+import { getTokenValue, getVariable, usePropsAndStyle, useTheme } from "@tamagui/core";
 function themed(Component, opts = {
   defaultThemeColor: process.env.DEFAULT_ICON_THEME_COLOR || "$color",
   defaultStrokeWidth: 2,
   fallbackColor: "#000"
 }) {
   return (propsIn) => {
-    const props = useProps(propsIn), theme = useTheme(), defaultColor = props.color ?? opts.defaultThemeColor, color = getVariable(
-      (defaultColor ? theme[defaultColor] : void 0) || props.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
+    const [props, style] = usePropsAndStyle(propsIn), theme = useTheme(), defaultColor = style.color ?? opts.defaultThemeColor, color = getVariable(
+      (defaultColor ? theme[defaultColor] : void 0) || style.color || (props.disableTheme ? null : theme.color) || opts.fallbackColor
     ), size = typeof props.size == "string" ? getTokenValue(props.size, "size") : props.size, strokeWidth = typeof props.strokeWidth == "string" ? getTokenValue(props.strokeWidth, "size") : props.strokeWidth ?? `${opts.defaultStrokeWidth}`;
-    return <Component {...props} color={color} size={size} strokeWidth={strokeWidth} />;
+    return <Component
+      {...props}
+      color={color}
+      size={size}
+      strokeWidth={strokeWidth}
+      style={style}
+    />;
   };
 }
 export {

package/dist/jsx/themed.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/themed.tsx"],
-  "mappings": "AAAA,SAAS,eAAe,aAAa,UAAU,gBAAgB;AAWxD,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AA0BA,SAzBgB,CAAC,YAAuB;AACtC,UAAM,QAAQ,SAAS,OAAO,GACxB,QAAQ,SAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,QAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,WAClB,cAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,WACzB,cAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WAAO,CAAC,cAAc,OAAO,OAAO,OAAO,MAAM,MAAM,aAAa,aAAa;AAAA,EACnF;AAGF;",
+  "mappings": "AAAA,SAAS,eAAe,aAAa,kBAAkB,gBAAgB;AAWhE,SAAS,OACd,WACA,OAAsB;AAAA,EACpB,mBAAmB,QAAQ,IAAI,4BAA4B;AAAA,EAC3D,oBAAoB;AAAA,EACpB,eAAe;AACjB,GACA;AAkCA,SAjCgB,CAAC,YAAuB;AACtC,UAAM,CAAC,OAAO,KAAK,IAAI,iBAAiB,OAAO,GACzC,QAAQ,SAAS,GAEjB,eAAe,MAAM,SAAS,KAAK,mBACnC,QAAQ;AAAA,OACX,eAAe,MAAM,YAAY,IAAI,WACpC,MAAM,UACJ,MAAM,eAA6B,OAAd,MAAM,UAC7B,KAAK;AAAA,IACT,GAEM,OACJ,OAAO,MAAM,QAAS,WAClB,cAAc,MAAM,MAAa,MAAM,IACvC,MAAM,MAEN,cACJ,OAAO,MAAM,eAAgB,WACzB,cAAc,MAAM,aAAoB,MAAM,IAC9C,MAAM,eAAe,GAAG,KAAK,kBAAkB;AAErD,WACE,CAAC;AAAA,UACK;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EAEJ;AAGF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/helpers-icon",
-  "version": "1.68.6",
+  "version": "1.69.1",
   "sideEffects": false,
   "description": "Utilities for icon packages",
   "source": "src/index.ts",
@@ -21,14 +21,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@tamagui/core": "1.68.6"
+    "@tamagui/core": "1.69.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native-svg": ">=12"
   },
   "devDependencies": {
-    "@tamagui/build": "1.68.6",
+    "@tamagui/build": "1.69.1",
     "react": "^18.2.0",
     "react-native-svg": "^13.9.0"
   }

package/src/IconProps.ts

@@ -6,7 +6,7 @@ export type BaseIconProps = {
   strokeWidth?: number | SizeTokens
   color?: (ColorTokens | ThemeTokens | (string & {})) | null
   disableTheme?: boolean
-  style?: any
+  style?: SvgProps['style']
 }
 
-export type IconProps = SvgProps & Omit<SvgProps, keyof BaseIconProps> & BaseIconProps
+export type IconProps = Omit<SvgProps, keyof BaseIconProps> & BaseIconProps

package/src/themed.tsx

@@ -1,4 +1,4 @@
-import { getTokenValue, getVariable, useProps, useTheme } from '@tamagui/core'
+import { getTokenValue, getVariable, usePropsAndStyle, useTheme } from '@tamagui/core'
 import React from 'react'
 
 import { IconProps } from './IconProps'
@@ -18,13 +18,13 @@ export function themed(
   }
 ) {
   const wrapped = (propsIn: IconProps) => {
-    const props = useProps(propsIn)
+    const [props, style] = usePropsAndStyle(propsIn)
     const theme = useTheme()
 
-    const defaultColor = props.color ?? opts.defaultThemeColor
+    const defaultColor = style.color ?? opts.defaultThemeColor
     const color = getVariable(
       (defaultColor ? theme[defaultColor] : undefined) ||
-        props.color ||
+        style.color ||
         (!props.disableTheme ? theme.color : null) ||
         opts.fallbackColor
     )
@@ -39,7 +39,15 @@ export function themed(
         ? getTokenValue(props.strokeWidth as any, 'size')
         : props.strokeWidth ?? `${opts.defaultStrokeWidth}`
 
-    return <Component {...props} color={color} size={size} strokeWidth={strokeWidth} />
+    return (
+      <Component
+        {...props}
+        color={color}
+        size={size}
+        strokeWidth={strokeWidth}
+        style={style as any}
+      />
+    )
   }
 
   return wrapped

package/types/IconProps.d.ts

@@ -5,7 +5,7 @@ export type BaseIconProps = {
     strokeWidth?: number | SizeTokens;
     color?: (ColorTokens | ThemeTokens | (string & {})) | null;
     disableTheme?: boolean;
-    style?: any;
+    style?: SvgProps['style'];
 };
-export type IconProps = SvgProps & Omit<SvgProps, keyof BaseIconProps> & BaseIconProps;
+export type IconProps = Omit<SvgProps, keyof BaseIconProps> & BaseIconProps;
 //# sourceMappingURL=IconProps.d.ts.map

package/types/IconProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconProps.d.ts","sourceRoot":"","sources":["../src/IconProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAA;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,aAAa,CAAC,GAAG,aAAa,CAAA"}
+{"version":3,"file":"IconProps.d.ts","sourceRoot":"","sources":["../src/IconProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IACjC,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAA;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,aAAa,CAAC,GAAG,aAAa,CAAA"}

package/types/themed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themed.d.ts","sourceRoot":"","sources":["../src/themed.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,KAAK,aAAa,GAAG;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CACpB,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,EAC9B,IAAI,GAAE,aAIL,aAEyB,SAAS,iBA0BpC"}
+{"version":3,"file":"themed.d.ts","sourceRoot":"","sources":["../src/themed.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,KAAK,aAAa,GAAG;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,MAAM,CACpB,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,EAC9B,IAAI,GAAE,aAIL,aAEyB,SAAS,iBAkCpC"}