viconic-react-icons 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,70 @@
+# Viconic React Icons
+
+![NPM Version](https://img.shields.io/npm/v/viconic-react-icons)
+![NPM License](https://img.shields.io/npm/l/viconic-react-icons)
+
+The official React component wrapper for [Viconic](https://viconic.io.vn), a modern, hyper-fast, CDN-powered icon system.
+
+`viconic-react-icons` gives you access to over 200,000+ open-source, pixel-perfect icons grouped in customizable collections. The icons are loaded dynamically from our Smart CDN at runtime, meaning your React bundle stays incredibly lightweight regardless of how many icons you use.
+
+## Highlights
+- ? **Zero-Bundle Bloat**: SVGs are fetched magically via our CDN and injected directly into the DOM.
+- ?? **Fully Customizable**: Compatible with Tailwind CSS and standard inline styles. Inherits color natively via `currentColor`.
+- ?? **Smart Caching**: LocalStorage and Memory caching so icons appear instantly on repeated renders.
+- ?? **SSR Ready**: Fully supports Next.js, Vite, and other Server-Side Rendering frameworks.
+- ?? **TypeScript Support**: Includes built-in types for easy autocompletion.
+
+## Installation
+
+```bash
+npm install viconic-react-icons
+# or
+yarn add viconic-react-icons
+# or
+pnpm add viconic-react-icons
+```
+
+## Quick Start
+
+Import the `ViconicIcon` component and pass the unique `name` identifier corresponding to your icon of choice from [viconic.io.vn](https://viconic.io.vn).
+
+```jsx
+import { ViconicIcon } from "viconic-react-icons";
+
+function App() {
+  return (
+    <div style={{ display: "flex", gap: "10px" }}>
+      {/* Basic Usage */}
+      <ViconicIcon name="h2:0" />
+      
+      {/* With Tailwind CSS */}
+      <ViconicIcon name="lucide:home" className="w-8 h-8 text-blue-500" />
+      
+      {/* With standard inline styles */}
+      <ViconicIcon name="fa:solid:user" style={{ fontSize: "32px", color: "green" }} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `name` | `string` | `undefined` | **Required.** The unique icon ID (e.g. `lucide:activity`, `h2:0`). |
+| `className` | `string` | `""` | Standard CSS class names (great for Tailwind). |
+| `style` | `React.CSSProperties` | `{}` | Inline CSS styling. |
+| `...props` | `HTMLAttributes` | | Spread standard HTML attributes (e.g. `onClick`, `title`). |
+
+## Architecture
+
+This package is a React wrapper around `<viconic-icon>` Web Components. The included `copyicons-smart-loader.js` script dynamically monitors the DOM using a `MutationObserver` and rapidly replaces `<viconic-icon>` elements with actual raw `<svg>` code. 
+
+Because we fetch SVGs in parallel and cache them across user sessions, your frontend performance score will skyrocket compared to packing large icon sets directly into your JS chunks.
+
+## License
+
+This project is licensed under the MIT License. Icon licenses depend on the specific icon families you request.
+

package/dist/index.js

@@ -1934,19 +1934,18 @@ var import_react = __toESM(require("react"));
 })();
 
 // src/index.jsx
-var ViconicIcon = ({ name, animate, className, style, ...props }) => {
+var ViconicIcon = ({ name, className, style, ...props }) => {
   const iconRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (window.CopyIcons && iconRef.current) {
       window.CopyIcons.forceProcess(iconRef.current);
     }
-  }, [name, animate, className]);
+  }, [name, className]);
   return /* @__PURE__ */ import_react.default.createElement(
     "viconic-icon",
     {
       ref: iconRef,
       icon: name,
-      animate,
       class: className,
       style,
       ...props

package/dist/index.mjs

@@ -1900,19 +1900,18 @@ import React, { useEffect, useRef } from "react";
 })();
 
 // src/index.jsx
-var ViconicIcon = ({ name, animate, className, style, ...props }) => {
+var ViconicIcon = ({ name, className, style, ...props }) => {
   const iconRef = useRef(null);
   useEffect(() => {
     if (window.CopyIcons && iconRef.current) {
       window.CopyIcons.forceProcess(iconRef.current);
     }
-  }, [name, animate, className]);
+  }, [name, className]);
   return /* @__PURE__ */ React.createElement(
     "viconic-icon",
     {
       ref: iconRef,
       icon: name,
-      animate,
       class: className,
       style,
       ...props

package/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export interface ViconicIconProps extends React.HTMLAttributes<HTMLElement> {
+    /** The unique icon ID (e.g., 'lucide:activity', 'h2:0'). Required. */
+    name: string;
+
+    style?: React.CSSProperties;
+}
+
+export const ViconicIcon: React.FC<ViconicIconProps>;
+export default ViconicIcon;
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Viconic Smart Icons loader for React",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,5 +16,6 @@
     "react"
   ],
   "author": "Viconic Team",
-  "license": "MIT"
+  "license": "MIT",
+  "types": "index.d.ts"
 }

package/src/index.jsx

@@ -1,20 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import './copyicons-smart-loader.js';
 
-export const ViconicIcon = ({ name, animate, className, style, ...props }) => {
+export const ViconicIcon = ({ name, className, style, ...props }) => { 
     const iconRef = useRef(null);
 
     useEffect(() => {
         if (window.CopyIcons && iconRef.current) {
             window.CopyIcons.forceProcess(iconRef.current);
         }
-    }, [name, animate, className]);
+    }, [name, className]);
 
     return (
         <viconic-icon
             ref={iconRef}
             icon={name}
-            animate={animate}
             class={className}
             style={style}
             {...props}
@@ -22,4 +21,4 @@ export const ViconicIcon = ({ name, animate, className, style, ...props }) => {
     );
 };
 
-export default ViconicIcon;
+export default ViconicIcon;