@whydrf/nava-icon-web-components 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-web-components</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 as native Web Components.
@@ -10,7 +12,7 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@whydrf/nava-icon-web-components"><img src="https://img.shields.io/npm/v/@whydrf/nava-icon-web-components?style=flat-square&color=purple" 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-web-components?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-web-components?style=flat-square" alt="license"></a>
   <a href="https://www.npmjs.com/package/@whydrf/nava-icon-web-components"><img src="https://img.shields.io/npm/dm/@whydrf/nava-icon-web-components?style=flat-square&color=purple" alt="npm downloads"></a>
 </p>
 
@@ -18,7 +20,7 @@
 
 ## What is this?
 
-`@whydrf/nava-icon-web-components` is the framework-agnostic binding for [Nava Icons](https://github.com/whydrf/nava-icon) — a collection of 950+ handcrafted SVG icons. Each icon is a native Web Component using the Custom Elements API, so it works everywhere: vanilla HTML, React, Vue, Angular, Svelte, Solid, Lit — any framework that can render HTML.
+`@whydrf/nava-icon-web-components` is the framework-agnostic binding for [Nava Icons](https://vahidghadiri.github.io/Nava-icon/) — a collection of 950+ handcrafted SVG icons. Each icon is a native Web Component using the Custom Elements API, so it works everywhere: vanilla HTML, React, Vue, Angular, Svelte, Solid, Lit — any framework that can render HTML.
 
 Unlike icon fonts or SVG sprites, every icon here is a proper Custom Element with Shadow DOM encapsulation. You use it in your markup exactly like any native HTML element — no framework, no build step, no configuration.
 
@@ -52,6 +54,33 @@ Once imported, every icon becomes available as a custom element. Icons follow th
 
 That's it — no framework, no components to import, no configuration. Just HTML.
 
+## Global Configuration
+
+You can set default icon properties globally using `setNavaIconConfig`. All icons will use these defaults unless overridden by individual attributes.
+
+```html
+<script type="module">
+  import '@whydrf/nava-icon-web-components'
+  import { setNavaIconConfig } from '@whydrf/nava-icon-web-components'
+
+  // Set global defaults
+  setNavaIconConfig({ size: 20, color: 'gray', strokeWidth: 1.5 })
+</script>
+
+<!-- All icons inherit global defaults -->
+<nava-icon-home></nava-icon-home>              <!-- size=20, color="gray" -->
+<nava-icon-search size="24"></nava-icon-search> <!-- size=24 overrides — rest inherited -->
+```
+
+**Attributes always override global configuration.** If you pass `size="32"` on an element, that takes priority over the global `size`.
+
+You can read the current configuration at any time:
+
+```js
+import { getNavaIconConfig } from '@whydrf/nava-icon-web-components'
+console.log(getNavaIconConfig()) // { size: 20, color: 'gray', strokeWidth: 1.5 }
+```
+
 ## How Tree Shaking Works
 
 When you import the package in a `<script type="module">`, only the icons actually used in your HTML are included in the final bundle. The build tool (Vite, Rollup, webpack, esbuild) traces which custom elements are referenced and eliminates the rest.
@@ -164,7 +193,7 @@ You can theme icons using CSS custom properties that inherit through the Shadow
 | **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/)**.
 
 ## Accessibility
 
@@ -306,4 +335,4 @@ Each icon is registered as a custom element with the prefix `nava-icon-` followe
 
 ## 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/chunk-6PLL5KGQ.js

@@ -0,0 +1,13 @@
+// src/config.ts
+var globalConfig = {};
+function setNavaIconConfig(config) {
+  globalConfig = { ...globalConfig, ...config };
+}
+function getNavaIconConfig() {
+  return { ...globalConfig };
+}
+
+export {
+  setNavaIconConfig,
+  getNavaIconConfig
+};

package/dist/config.d.ts

@@ -0,0 +1,7 @@
+import { NavaIconConfig } from '@whydrf/nava-icon-core';
+export { NavaIconConfig } from '@whydrf/nava-icon-core';
+
+declare function setNavaIconConfig(config: NavaIconConfig): void;
+declare function getNavaIconConfig(): NavaIconConfig;
+
+export { getNavaIconConfig, setNavaIconConfig };

package/dist/config.js

@@ -0,0 +1,8 @@
+import {
+  getNavaIconConfig,
+  setNavaIconConfig
+} from "./chunk-6PLL5KGQ.js";
+export {
+  getNavaIconConfig,
+  setNavaIconConfig
+};