@impulse-ui-native/icon 4.0.0 → 5.0.0

package/README.md

@@ -1,38 +1,39 @@
-# @impulse-ui-native/icon
-
-A React Native SVG icon library with a common renderer and six visual weights.
-
-## Installation
-
-```sh
-pnpm add @impulse-ui-native/icon react-native-svg
-```
-
-## Main exports
-
-- `Icon` normalizes icon size, color, and rendering.
-- Named wrapper icons such as `HeartIcon` select a visual weight through the `variant` prop.
-- Available weights are `bold`, `duotone`, `fill`, `light`, `regular`, and `thin`.
-- `IconProps`, `IconWrapperProps`, `IconVariant`, and `IconStyle` support typed composition.
-
-## Usage
-
-```tsx
-import { Icon } from "@impulse-ui-native/icon/components/icon";
-import { HeartIcon } from "@impulse-ui-native/icon/icons/heart";
-
-<Icon icon={HeartIcon} variant="duotone" size="large" color="#6d5dfc" />;
-```
-
-You can also render a named wrapper directly when you want to control the SVG dimensions yourself.
-
-```tsx
-<HeartIcon variant="regular" width={24} height={24} fill="#111827" />
-```
-
-Wrapper names use the `{Name}Icon` form. Import wrappers through their per-icon
-entrypoints so Metro only includes the icons used by the application:
-
-```tsx
-import { HeartIcon } from "@impulse-ui-native/icon/icons/heart";
-```
+# @impulse-ui-native/icon
+
+A React Native SVG icon library with a common renderer and six visual weights.
+
+## Installation
+
+```sh
+pnpm add @impulse-ui-native/icon react-native-svg
+```
+
+## Main exports
+
+- `Icon` normalizes icon size, color, and rendering. Its default foreground is
+  `theme.colors.text.primary`; explicit `color`, then `fill`, override that default.
+- Named wrapper icons such as `HeartIcon` select a visual weight through the `variant` prop.
+- Available weights are `bold`, `duotone`, `fill`, `light`, `regular`, and `thin`.
+- `IconProps`, `IconWrapperProps`, `IconVariant`, and `IconStyle` support typed composition.
+
+## Usage
+
+```tsx
+import { Icon } from "@impulse-ui-native/icon/components/icon";
+import { HeartIcon } from "@impulse-ui-native/icon/icons/heart";
+
+<Icon icon={HeartIcon} variant="duotone" size="large" color="#6d5dfc" />;
+```
+
+You can also render a named wrapper directly when you want to control the SVG dimensions yourself. Supply its `color` explicitly; automatic theme defaults come from the shared `Icon` renderer.
+
+```tsx
+<HeartIcon variant="regular" width={24} height={24} color="#111827" />
+```
+
+Wrapper names use the `{Name}Icon` form. Import wrappers through their per-icon
+entrypoints so Metro only includes the icons used by the application:
+
+```tsx
+import { HeartIcon } from "@impulse-ui-native/icon/icons/heart";
+```

package/dist/components/icon.js

@@ -1,19 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { useComponentsTokens } from "@impulse-ui-native/theme";
+import { useTheme } from "@impulse-ui-native/theme";
 const Icon = memo(function Icon2({
   size = "medium",
   icon,
   ...props
 }) {
   const Icon3 = icon;
-  const tokens = useComponentsTokens();
-  const iconTokens = tokens.icon;
+  const theme = useTheme();
+  const iconTokens = theme.components.icon;
+  const color = props.color ?? props.fill ?? theme.colors.text.primary;
   const iconSize = useMemo(
     () => typeof size === "number" ? size : iconTokens.sizes[size],
     [iconTokens.sizes, size]
   );
-  return /* @__PURE__ */ jsx(Icon3, { ...props, width: iconSize, height: iconSize, fill: props.color });
+  return /* @__PURE__ */ jsx(
+    Icon3,
+    {
+      ...props,
+      color,
+      width: iconSize,
+      height: iconSize,
+      fill: color
+    }
+  );
 });
 export {
   Icon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/icon",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "A typed icon library for ImpulseUI Native applications.",
   "keywords": [
     "react-native",
@@ -34,7 +34,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/theme": "4.0.0"
+    "@impulse-ui-native/theme": "5.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.18.12",
@@ -46,8 +46,8 @@
     "react-native-svg": "15.15.4",
     "typescript": "~6.0.3",
     "@impulse-ui-native/eslint-config": "1.0.0",
-    "@impulse-ui-native/prettier-config": "1.0.0",
-    "@impulse-ui-native/tsconfig": "1.0.0"
+    "@impulse-ui-native/tsconfig": "1.0.0",
+    "@impulse-ui-native/prettier-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",