@whydrf/nava-icon-react 1.1.2 → 1.4.0

package/README.md

@@ -1,8 +1,10 @@
-<p align="center">
-  <img src="https://raw.githubusercontent.com/whydrf/nava-icon/main/docs/public/favicon.svg" width="60" alt="Nava Icons">
-</p>
 
 <h1 align="center">@whydrf/nava-icon-react</h1>
+<p align="center">
+  <a href="https://vahidghadiri.github.io/Nava-icon/">
+    Live Documentation
+  </a>
+</p>
 
 <p align="center">
   950+ beautiful, tree-shakeable SVG icons for React applications.
@@ -48,7 +50,7 @@ export function Navigation() {
 }
 ```
 
-That's it — no provider, no context, no configuration. Just import and use.
+That's it — no setup required. Just import and use. For setting default props across your app, see [Global Configuration](#global-configuration).
 
 ## How Tree Shaking Works
 
@@ -157,6 +159,36 @@ With **Tailwind CSS**, wrap the icon in a utility class and use `currentColor`:
 <HomeIcon className="text-gray-900 dark:text-white" />
 ```
 
+## Global Configuration
+
+Instead of passing the same props to every icon, wrap your app with `NavaIconProvider` to set defaults once. All `Icon` components and static icon imports within the provider will inherit these values.
+
+```tsx
+import { NavaIconProvider, HomeIcon, SearchIcon } from '@whydrf/nava-icon-react'
+
+function App() {
+  return (
+    <NavaIconProvider size={20} color="gray" strokeWidth={1.5}>
+      <HomeIcon />              {/* size=20, color="gray", strokeWidth=1.5 */}
+      <SearchIcon size={24} />  {/* size=24 overrides provider — color and strokeWidth inherited */}
+    </NavaIconProvider>
+  )
+}
+```
+
+**Props always override provider values.** If you pass `size={32}` to an icon, that takes priority over the provider's `size`.
+
+You can also use the `useNavaIconConfig` hook to read the current configuration:
+
+```tsx
+import { useNavaIconConfig } from '@whydrf/nava-icon-react'
+
+function DebugConfig() {
+  const config = useNavaIconConfig()
+  return <pre>{JSON.stringify(config)}</pre>
+}
+```
+
 ## Accessibility
 
 Icons include built-in accessibility features:

package/dist/Icon.cjs

@@ -23,7 +23,7 @@ __export(Icon_exports, {
   Icon: () => Icon
 });
 module.exports = __toCommonJS(Icon_exports);
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/icons/index.ts
 var icons_exports = {};
@@ -39854,14 +39854,23 @@ function ZoomOutIcon(props) {
   );
 }
 
+// src/NavaIconProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime953 = require("react/jsx-runtime");
+var NavaIconContext = (0, import_react.createContext)(null);
+function useNavaIconConfig() {
+  return (0, import_react.useContext)(NavaIconContext) ?? {};
+}
+
 // src/Icon.tsx
 var iconRecord = icons_exports;
 function normalizeIconName(name) {
   if (name.endsWith("Icon")) return name;
   return name.split(/[-_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join("") + "Icon";
 }
-var Icon = (0, import_react.forwardRef)(
+var Icon = (0, import_react2.forwardRef)(
   ({ name, size, color, strokeWidth, className, title, style, mode, ...props }, ref) => {
+    const config = useNavaIconConfig();
     const iconName = normalizeIconName(name);
     const Component = iconRecord[iconName];
     if (!Component) {
@@ -39870,12 +39879,12 @@ var Icon = (0, import_react.forwardRef)(
       }
       return null;
     }
-    return (0, import_react.createElement)(Component, {
+    return (0, import_react2.createElement)(Component, {
       ref,
-      size,
-      color,
-      strokeWidth,
-      className,
+      size: size ?? config.size,
+      color: color ?? config.color,
+      strokeWidth: strokeWidth ?? config.strokeWidth,
+      className: className ?? config.className,
       title,
       style,
       mode,