@whydrf/nava-icon-react 1.1.0 → 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.
@@ -10,7 +12,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@whydrf/nava-icon-react"><img src="https://img.shields.io/npm/v/@whydrf/nava-icon-react?style=flat-square&color=blue" alt="npm version"></a>
-  <a href="https://github.com/whydrf/nava-icon/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@whydrf/nava-icon-react?style=flat-square" alt="license"></a>
+  <a href="https://github.com/vahidGhadiri/nava-icon/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@whydrf/nava-icon-react?style=flat-square" alt="license"></a>
   <a href="https://www.npmjs.com/package/@whydrf/nava-icon-react"><img src="https://img.shields.io/npm/dm/@whydrf/nava-icon-react?style=flat-square&color=blue" alt="npm downloads"></a>
 </p>
 
@@ -18,7 +20,7 @@
 
 ## What is this?
 
-`@whydrf/nava-icon-react` is the React binding for [Nava Icons](https://github.com/whydrf/nava-icon) — a collection of 950+ handcrafted SVG icons. Each icon is a native React component with full TypeScript support, tree shaking, and two visual variants (regular outlines and filled shapes).
+`@whydrf/nava-icon-react` is the React binding for [Nava Icons](https://vahidghadiri.github.io/Nava-icon/) — a collection of 950+ handcrafted SVG icons. Each icon is a native React component with full TypeScript support, tree shaking, and two visual variants (regular outlines and filled shapes).
 
 Unlike icon fonts or SVG sprites, every icon here is a proper React component. You import it, use it with JSX props, and your bundler eliminates anything you didn't import.
 
@@ -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:
@@ -245,7 +277,7 @@ All standard SVG attributes (`onClick`, `onMouseEnter`, `data-*`, `aria-*`, etc.
 | **Weather** | `sun`, `moon`, `cloud`, `droplet`, `wind`, `umbrella` |
 | **Shopping** | `cart`, `credit-card`, `bag`, `tag`, `badge`, `diamond` |
 
-Browse all 950+ icons with live preview at [**Nava Icons Docs**](https://vahidghadiri.github.io/Nava-icon/).
+Browse all 950+ icons with live preview at **[https://vahidghadiri.github.io/Nava-icon/](https://vahidghadiri.github.io/Nava-icon/)**.
 
 ## Comparing with Alternatives
 
@@ -262,4 +294,4 @@ Nava Icons strikes a balance between quantity and quality — every icon is desi
 
 ## License
 
-[MIT](https://github.com/whydrf/nava-icon/blob/main/LICENSE) &copy; [whydrf](https://github.com/whydrf)
+[MIT](https://github.com/vahidGhadiri/nava-icon/blob/main/LICENSE) &copy; [whydrf](https://github.com/whydrf)

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,