favicon-stealer 1.8.0 → 2.0.0

package/README.md

@@ -2,7 +2,7 @@
 A react component to get clear and consistent favicon of a website easily.
 
 
-# installation
+# Installation
 ## npm
 ```shell
 npm install favicon-stealer
@@ -12,14 +12,14 @@ npm install favicon-stealer
 pnpm add favicon-stealer
 ```
 
-# usage
+# Usage
 ```typescript
 import { Favicon } from 'favicon-stealer';
 
 <Favicon url="https://example.com" />
 ```
 
-## props
+## Props
 | Name | Type | Description |
 | ---- | ---- | ----------- |
 | `url` | `string` | The URL of the website to fetch the favicon for. |
@@ -37,15 +37,15 @@ import { Favicon } from 'favicon-stealer';
 | `preferSrc` | `boolean` | Whether to prefer the local image source over the website's own favicon(if both are provided). Default is true. |
 
 
-# npm package
+# NPM Package
 [favicon-stealer - npm](https://www.npmjs.com/package/favicon-stealer)
 
 
-# github repository
+# GitHub Repository
 [favicon-stealer - github](https://github.com/iAmCorey/favicon-stealer)
 
 
-# license
+# License
 MIT License
 
 
@@ -58,4 +58,5 @@ MIT License
 - v1.4.0: Improved favicon detection and optimized package size; Added preferGoogle option and improved favicon loading reliability (2025.2.27)
 - v1.5.0: Update default timeout to 3000(3 seconds) (2025.2.27)
 - v1.6.0: change prop preferGoogle to preferFallback (2025.2.27)
-- v1.8.0: Add props(src, alt, preferSrc), add new fallback(favicon.im)(2025.3.13)
+- v1.8.0: Add props(src, alt, preferSrc), add new fallback(favicon.im)(2025.3.13)
+- v1.9.0: Fix show bug when use 'src'(2025.3.26)

package/dist/{types/Favicon.d.ts → index.d.mts}

@@ -1,4 +1,5 @@
-import React from "react";
+import React from 'react';
+
 interface IProps {
     url: string;
     src?: string;
@@ -15,4 +16,5 @@ interface IProps {
     preferSrc?: boolean;
 }
 declare const Favicon: ({ url, src, alt, size, className, timeout, border, padding, background, borderRadius, lazy, preferFallback, preferSrc, }: IProps) => React.JSX.Element;
-export default Favicon;
+
+export { Favicon };

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,8 +1,181 @@
+"use client";
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-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; } });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Favicon: () => Favicon_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/utils/index.ts
+var getDomain = (url) => {
+  try {
+    const urlWithProtocol = url.startsWith("http") ? url : `https://${url}`;
+    const domain = new URL(urlWithProtocol).hostname;
+    return domain.replace(/^www\./, "");
+  } catch (error) {
+    return url;
+  }
+};
+
+// src/Favicon.tsx
+var import_react = __toESM(require("react"));
+var Favicon = ({
+  url,
+  src,
+  alt,
+  size = 32,
+  className = "",
+  timeout = 3e3,
+  // 增加到3秒，给网站自己的favicon更多加载时间
+  border = false,
+  padding = 0,
+  background = "transparent",
+  borderRadius = 0,
+  lazy = false,
+  preferFallback = false,
+  preferSrc = true
+}) => {
+  const domain = getDomain(url);
+  const [imgSrc, setImgSrc] = (0, import_react.useState)("");
+  const [fallbackIndex, setFallbackIndex] = (0, import_react.useState)(0);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [hasError, setHasError] = (0, import_react.useState)(false);
+  const [isInitialized, setIsInitialized] = (0, import_react.useState)(false);
+  const standardSources = [
+    `https://${domain}/favicon.ico`,
+    `https://${domain}/logo.svg`,
+    `https://${domain}/logo.png`,
+    `https://${domain}/apple-touch-icon.png`,
+    `https://${domain}/apple-touch-icon-precomposed.png`,
+    `https://${domain}/static/img/favicon.ico`,
+    `https://${domain}/static/img/favicon.png`,
+    `https://${domain}/img/favicon.png`,
+    `https://${domain}/img/favicon.ico`,
+    `https://${domain}/static/img/logo.svg`,
+    `https://${domain}/apple-touch-icon-precomposed.png`
+  ];
+  const fallbackServices = [
+    `https://favicon.im/${domain}?larger=true`,
+    `https://favicon.im/${domain}`,
+    `https://www.google.com/s2/favicons?domain=https://${domain}&sz=64`,
+    `https://www.google.com/s2/favicons?domain=http://${domain}&sz=64`
+  ];
+  const fallbackSources = preferFallback ? [...fallbackServices, ...standardSources] : [...standardSources, ...fallbackServices];
+  (0, import_react.useEffect)(() => {
+    if (!isInitialized) {
+      if (src) {
+        setIsLoading(false);
+      } else {
+        setImgSrc(fallbackSources[0]);
+      }
+      setIsInitialized(true);
+    }
+  }, [isInitialized, fallbackSources, src]);
+  (0, import_react.useEffect)(() => {
+    let timeoutId;
+    if (isLoading && imgSrc && !src) {
+      timeoutId = setTimeout(() => {
+        handleError();
+      }, timeout);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [imgSrc, isLoading, timeout, src]);
+  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 /* @__PURE__ */ import_react.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,
+        padding: padding ? `${padding}px` : 0,
+        borderRadius: borderRadius ? `${borderRadius}px` : 0
+      }
+    },
+    isLoading && /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute inset-0 animate-pulse" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full h-full rounded-md bg-gray-200/60" })),
+    (src || imgSrc) && /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: src || imgSrc,
+        alt: 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 && /* @__PURE__ */ import_react.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()
+    )
+  );
+};
+var Favicon_default = Favicon;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Favicon
+});

package/dist/index.mjs

@@ -0,0 +1,145 @@
+"use client";
+
+// src/lib/utils/index.ts
+var getDomain = (url) => {
+  try {
+    const urlWithProtocol = url.startsWith("http") ? url : `https://${url}`;
+    const domain = new URL(urlWithProtocol).hostname;
+    return domain.replace(/^www\./, "");
+  } catch (error) {
+    return url;
+  }
+};
+
+// src/Favicon.tsx
+import React, { useEffect, useState } from "react";
+var Favicon = ({
+  url,
+  src,
+  alt,
+  size = 32,
+  className = "",
+  timeout = 3e3,
+  // 增加到3秒，给网站自己的favicon更多加载时间
+  border = false,
+  padding = 0,
+  background = "transparent",
+  borderRadius = 0,
+  lazy = false,
+  preferFallback = false,
+  preferSrc = true
+}) => {
+  const domain = getDomain(url);
+  const [imgSrc, setImgSrc] = useState("");
+  const [fallbackIndex, setFallbackIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const standardSources = [
+    `https://${domain}/favicon.ico`,
+    `https://${domain}/logo.svg`,
+    `https://${domain}/logo.png`,
+    `https://${domain}/apple-touch-icon.png`,
+    `https://${domain}/apple-touch-icon-precomposed.png`,
+    `https://${domain}/static/img/favicon.ico`,
+    `https://${domain}/static/img/favicon.png`,
+    `https://${domain}/img/favicon.png`,
+    `https://${domain}/img/favicon.ico`,
+    `https://${domain}/static/img/logo.svg`,
+    `https://${domain}/apple-touch-icon-precomposed.png`
+  ];
+  const fallbackServices = [
+    `https://favicon.im/${domain}?larger=true`,
+    `https://favicon.im/${domain}`,
+    `https://www.google.com/s2/favicons?domain=https://${domain}&sz=64`,
+    `https://www.google.com/s2/favicons?domain=http://${domain}&sz=64`
+  ];
+  const fallbackSources = preferFallback ? [...fallbackServices, ...standardSources] : [...standardSources, ...fallbackServices];
+  useEffect(() => {
+    if (!isInitialized) {
+      if (src) {
+        setIsLoading(false);
+      } else {
+        setImgSrc(fallbackSources[0]);
+      }
+      setIsInitialized(true);
+    }
+  }, [isInitialized, fallbackSources, src]);
+  useEffect(() => {
+    let timeoutId;
+    if (isLoading && imgSrc && !src) {
+      timeoutId = setTimeout(() => {
+        handleError();
+      }, timeout);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [imgSrc, isLoading, timeout, src]);
+  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 /* @__PURE__ */ React.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,
+        padding: padding ? `${padding}px` : 0,
+        borderRadius: borderRadius ? `${borderRadius}px` : 0
+      }
+    },
+    isLoading && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 animate-pulse" }, /* @__PURE__ */ React.createElement("div", { className: "w-full h-full rounded-md bg-gray-200/60" })),
+    (src || imgSrc) && /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: src || imgSrc,
+        alt: 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 && /* @__PURE__ */ React.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()
+    )
+  );
+};
+var Favicon_default = Favicon;
+export {
+  Favicon_default as Favicon
+};

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "favicon-stealer",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "main": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
   "files": [
     "dist",
     "LICENSE",
@@ -10,7 +19,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc",
+    "build": "tsup",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -31,6 +40,7 @@
   "devDependencies": {
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "tsup": "^8.3.5"
   }
 }

package/dist/Favicon.js

@@ -1,125 +0,0 @@
-"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, src, alt, size = 32, className = "", timeout = 3000, // 增加到3秒，给网站自己的favicon更多加载时间
-border = false, padding = 0, background = "transparent", borderRadius = 0, lazy = false, preferFallback = false, preferSrc = true, }) => {
-    const domain = (0, utils_1.getDomain)(url);
-    const [imgSrc, setImgSrc] = (0, react_1.useState)("");
-    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 [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
-    const standardSources = [
-        `https://${domain}/favicon.ico`,
-        `https://${domain}/logo.svg`,
-        `https://${domain}/logo.png`,
-        `https://${domain}/apple-touch-icon.png`,
-        `https://${domain}/apple-touch-icon-precomposed.png`,
-        `https://${domain}/static/img/favicon.ico`,
-        `https://${domain}/static/img/favicon.png`,
-        `https://${domain}/img/favicon.png`,
-        `https://${domain}/img/favicon.ico`,
-        `https://${domain}/static/img/logo.svg`,
-        `https://${domain}/apple-touch-icon-precomposed.png`,
-    ];
-    const fallbackServices = [
-        `https://favicon.im/${domain}?larger=true`,
-        `https://favicon.im/${domain}`,
-        `https://www.google.com/s2/favicons?domain=https://${domain}&sz=64`,
-        `https://www.google.com/s2/favicons?domain=http://${domain}&sz=64`,
-    ];
-    const fallbackSources = preferFallback
-        ? [...fallbackServices, ...standardSources]
-        : [...standardSources, ...fallbackServices];
-    (0, react_1.useEffect)(() => {
-        if (!isInitialized) {
-            setImgSrc(fallbackSources[0]);
-            setIsInitialized(true);
-        }
-    }, [isInitialized, fallbackSources]);
-    (0, react_1.useEffect)(() => {
-        let timeoutId;
-        if (isLoading && imgSrc) {
-            timeoutId = setTimeout(() => {
-                handleError();
-            }, timeout);
-        }
-        return () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [imgSrc, isLoading, timeout]);
-    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" }))),
-        (preferSrc ? (src || imgSrc) : (imgSrc || src)) && (react_1.default.createElement("img", { src: preferSrc ? (src || imgSrc) : (imgSrc || src), alt: 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/lib/utils/index.js

@@ -1,17 +0,0 @@
-"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/index.d.ts

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

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

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