favicon-stealer 1.0.2 → 1.2.0

package/README.md

@@ -21,7 +21,14 @@ import { Favicon } from 'favicon-stealer';
 | `size` | `number` | The size of the favicon in pixels. Default is 32. |
 | `className` | `string` | A class name to apply to the element. |
 | `timeout` | `number` | The timeout in milliseconds for fetching the favicon. Default is 1000 (1 second). |
+| `lazy` | `boolean` | Whether to load the favicon lazily. Default is false. |
+| `border` | `boolean` | Whether to show a border around the favicon. Default is false. |
+| `padding` | `number` | The padding in pixels.(px) Default is 0. |
+| `background` | `string` | The background color of the favicon. Default is transparent.(in hex) |
+| `borderRadius` | `number` | The border radius in pixels.(px) Default is 0. |
 
+# npm package
+https://www.npmjs.com/package/favicon-stealer
 
 # license
 MIT License
@@ -29,4 +36,6 @@ MIT License
 # Changelog
 - v1.0.0: Initial release (2025.1.21)
 - v1.0.1: Add README.md (2025.1.21)
-- v1.0.2: Update license to MIT (2025.1.21)
+- v1.0.2: Update license to MIT (2025.1.21)
+- v1.1.0: Fix show bug(2025.2.1)
+- v1.2.0: Add props(lazy, border, padding, background, borderRadius)(2025.2.1)

package/dist/Favicon.js

@@ -0,0 +1,105 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("./lib/utils");
+const react_1 = __importStar(require("react"));
+const Favicon = ({ url, size = 32, className = "", timeout = 1000, // 1 second
+border = false, padding = 0, background = "transparent", borderRadius = 0, lazy = false, }) => {
+    const domain = (0, utils_1.getDomain)(url);
+    const [imgSrc, setImgSrc] = (0, react_1.useState)(`https://${domain}/logo.svg`);
+    const [fallbackIndex, setFallbackIndex] = (0, react_1.useState)(0);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const fallbackSources = [
+        `https://${domain}/logo.svg`,
+        `https://${domain}/logo.png`,
+        `https://${domain}/apple-touch-icon.png`,
+        `https://${domain}/apple-touch-icon-precomposed.png`,
+        `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
+        `https://icons.duckduckgo.com/ip3/${domain}.ico`,
+        `https://${domain}/favicon.ico`,
+    ];
+    (0, react_1.useEffect)(() => {
+        let timeoutId;
+        if (isLoading) {
+            timeoutId = setTimeout(() => {
+                handleError();
+            }, timeout);
+        }
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [imgSrc, isLoading]);
+    const handleError = () => {
+        const nextIndex = fallbackIndex + 1;
+        if (nextIndex < fallbackSources.length) {
+            setFallbackIndex(nextIndex);
+            setImgSrc(fallbackSources[nextIndex]);
+            setIsLoading(true);
+        }
+        else {
+            setHasError(true);
+            setIsLoading(false);
+        }
+    };
+    const handleLoad = () => {
+        setIsLoading(false);
+        setHasError(false);
+    };
+    return (react_1.default.createElement("div", { className: `relative inline-block 
+        ${className} 
+        ${border ? "border" : ""} 
+        ${hasError ? "opacity-0" : ""}
+        ${padding ? `p-[${padding}px]` : ""}
+        ${borderRadius ? `rounded-[${borderRadius}px]` : ""}
+        `, style: {
+            width: size,
+            height: size,
+            background: background,
+            padding: padding ? `${padding}px` : 0,
+            borderRadius: borderRadius ? `${borderRadius}px` : 0,
+        } },
+        isLoading && (react_1.default.createElement("div", { className: "absolute inset-0 animate-pulse" },
+            react_1.default.createElement("div", { className: "w-full h-full rounded-md bg-gray-200/60" }))),
+        react_1.default.createElement("img", { src: imgSrc, alt: `${domain} logo`, width: size, height: size, loading: lazy ? "lazy" : "eager", onError: handleError, onLoad: handleLoad, className: `inline-block transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`, style: {
+                objectFit: "contain",
+                display: hasError ? "none" : "inline-block",
+            } }),
+        hasError && (react_1.default.createElement("div", { className: "w-full h-full flex items-center justify-center bg-gray-100 rounded-md", style: { fontSize: `${size * 0.5}px` } }, domain.charAt(0).toUpperCase()))));
+};
+exports.default = Favicon;

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Favicon = void 0;
+var Favicon_1 = require("./Favicon");
+Object.defineProperty(exports, "Favicon", { enumerable: true, get: function () { return __importDefault(Favicon_1).default; } });

package/dist/lib/utils/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDomain = void 0;
+const getDomain = (url) => {
+    try {
+        // Add https:// protocol if not present
+        const urlWithProtocol = url.startsWith('http') ? url : `https://${url}`;
+        const domain = new URL(urlWithProtocol).hostname;
+        // Remove 'www.' prefix if exists
+        return domain.replace(/^www\./, '');
+    }
+    catch (error) {
+        // Return original input if URL parsing fails
+        return url;
+    }
+};
+exports.getDomain = getDomain;

package/dist/types/Favicon.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface IProps {
+    url: string;
+    size?: number;
+    className?: string;
+    timeout?: number;
+    border?: boolean;
+    padding?: number;
+    background?: string;
+    borderRadius?: number;
+    lazy?: boolean;
+}
+declare const Favicon: ({ url, size, className, timeout, border, padding, background, borderRadius, lazy, }: IProps) => React.JSX.Element;
+export default Favicon;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { default as Favicon } from './Favicon';

package/dist/types/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getDomain: (url: string) => string;

package/package.json

@@ -1,22 +1,30 @@
 {
   "name": "favicon-stealer",
-  "version": "1.0.2",
-  "main": "index.js",
+  "version": "1.2.0",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
     "prepublishOnly": "npm run build"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "react",
+    "favicon",
+    "icon",
+    "logo",
+    "website",
+    "component"
+  ],
+  "author": "Corey Chiu",
   "license": "MIT",
-  "description": "",
+  "description": "Get clear and consistent favicon of a website easily",
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.7",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "typescript": "^5.7.3"
   }

package/src/Favicon.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { getDomain } from "@/lib/utils";
+import { getDomain } from "./lib/utils";
 import React, { useEffect, useState } from "react";
 
 interface IProps {
@@ -8,6 +8,11 @@ interface IProps {
   size?: number;
   className?: string;
   timeout?: number;
+  border?: boolean;
+  padding?: number;
+  background?: string;
+  borderRadius?: number;
+  lazy?: boolean;
 }
 
 const Favicon = ({
@@ -15,6 +20,11 @@ const Favicon = ({
   size = 32,
   className = "",
   timeout = 1000, // 1 second
+  border = false,
+  padding = 0,
+  background = "transparent",
+  borderRadius = 0,
+  lazy = false,
 }: IProps) => {
   const domain = getDomain(url);
   const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.svg`);
@@ -67,8 +77,22 @@ const Favicon = ({
 
   return (
     <div
-      className={`relative inline-block ${className}`}
-      style={{ width: size, height: size }}
+      className={
+        `relative inline-block 
+        ${className} 
+        ${border ? "border" : ""} 
+        ${hasError ? "opacity-0" : ""}
+        ${padding ? `p-[${padding}px]` : ""}
+        ${borderRadius ? `rounded-[${borderRadius}px]` : ""}
+        `
+      }
+      style={{
+        width: size,
+        height: size,
+        background: background,
+        padding: padding ? `${padding}px` : 0,
+        borderRadius: borderRadius ? `${borderRadius}px` : 0,
+      }}
     >
       {/* placeholder */}
       {isLoading && (
@@ -82,6 +106,7 @@ const Favicon = ({
         alt={`${domain} logo`}
         width={size}
         height={size}
+        loading={lazy ? "lazy" : "eager"}
         onError={handleError}
         onLoad={handleLoad}
         className={`inline-block transition-opacity duration-300 ${

package/tsconfig.json

@@ -8,14 +8,18 @@
     "declarationDir": "dist/types",
     "strict": true,
     "moduleResolution": "node",
-    "baseUrl": ".",
+    "baseUrl": "./src",
+    "rootDir": "./src",
     "paths": {
       "@/*": ["./*"]
     },
     "esModuleInterop": true
   },
   "include": [
-    "src",
-    "lib"
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
   ]
 }