@whydrf/nava-icon-web-components 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-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.
@@ -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.

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
+};