favicon-stealer 1.9.0 → 3.0.0

package/README.md

@@ -27,14 +27,14 @@ import { Favicon } from 'favicon-stealer';
 | `alt` | `string` | The alt text for the favicon image. |
 | `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 3000 (3 seconds). |
+| `timeout` | `number` | The timeout in milliseconds before giving up on a slow/unresponsive **auto-detected** source and trying the next one. A provided `src` is exempt — it is only abandoned on a real load failure, never on a timeout. Default is 2000 (2 seconds). |
 | `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. |
 | `preferFallback` | `boolean` | Whether to prefer fallback service (e.g.Google's favicon service) over the website's own favicon. Default is false. |
-| `preferSrc` | `boolean` | Whether to prefer the local image source over the website's own favicon(if both are provided). Default is true. |
+| `preferSrc` | `boolean` | Whether to try the provided `src` before auto-detecting the website's own favicon (if both are provided). If `src` fails to load it falls back to auto-detection either way. Default is true. |
 
 
 # NPM Package
@@ -59,4 +59,10 @@ MIT License
 - 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.9.0: Fix show bug when use 'src'(2025.3.26)
+- v1.9.0: Fix show bug when use 'src'(2025.3.26)
+- v2.0.0: Dual ESM/CJS build with an `exports` map — fixes Vite 8 / modern bundler SSR "exports is not defined". Breaking: output is now a single bundle, deep sub-path imports (e.g. `favicon-stealer/dist/Favicon`) are gone (2026.6.20)
+- v3.0.0: Rewrite of favicon resolution + rendering.
+  - **BREAKING**: `react` is now a `peerDependency` (consumer must provide React); the unused `react-dom` peer was dropped.
+  - **BREAKING**: styling is fully self-contained inline `style` — no Tailwind classes are emitted, and default `padding`/`borderRadius`/`background` no longer override your `className`.
+  - **BREAKING**: `src` behavior — `preferSrc` is now honored, a provided `src` no longer times out (it falls back only on a real load failure), the default `timeout` is now 2000ms (was 3000), and the candidate source list was trimmed, so some sites/inputs resolve differently.
+  - Fixes: `src` load-failure no longer hangs on the skeleton; reload on `url`/`src` change without a stale frame or wasted request; cache/SSR hits use `img.decode()` (feature-detected — falls back to `naturalWidth` on engines without it, e.g. old WebViews / jsdom; no false-negative on dimension-less SVGs); offscreen `lazy` images wait for the viewport instead of being timed out through every source to the letter fallback; de-duped sources (no `key` collision); `border` works; `alt=""` is honored for decorative icons (and the loading image is silent to screen readers until shown); empty/invalid `url` no longer renders a blank box; pulse keyframes inject once per document (DOM-id de-duped across HMR / duplicate copies); `FaviconProps` is exported. (2026.6.21)

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

@@ -1,5 +1,6 @@
-import React from "react";
-interface IProps {
+import React from 'react';
+
+interface FaviconProps {
     url: string;
     src?: string;
     alt?: string;
@@ -14,5 +15,6 @@ interface IProps {
     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 default Favicon;
+declare const Favicon: ({ url, src, alt, size, className, timeout, border, padding, background, borderRadius, lazy, preferFallback, preferSrc, }: FaviconProps) => React.ReactElement;
+
+export { Favicon, type FaviconProps };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface FaviconProps {
+    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, }: FaviconProps) => React.ReactElement;
+
+export { Favicon, type FaviconProps };

package/dist/index.js

@@ -1,8 +1,248 @@
+"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 __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
 };
-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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 hasProtocol = /^https?:\/\//i.test(url);
+    const urlWithProtocol = hasProtocol ? 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 reducer = (state, action) => {
+  switch (action.type) {
+    case "reset":
+      return { index: 0, status: "loading" };
+    case "load":
+      return state.status === "loaded" ? state : __spreadProps(__spreadValues({}, state), { status: "loaded" });
+    case "error": {
+      const next = state.index + 1;
+      return next < action.total ? { index: next, status: "loading" } : { index: state.index, status: "error" };
+    }
+    default:
+      return state;
+  }
+};
+var KEYFRAMES_ID = "favicon-stealer-keyframes";
+var PULSE_KEYFRAMES = "@keyframes favicon-stealer-pulse{0%,100%{opacity:1}50%{opacity:.4}}";
+var NEUTRAL_BG = "color-mix(in srgb, currentColor 10%, transparent)";
+var keyframesInjected = false;
+var injectKeyframes = () => {
+  if (keyframesInjected || typeof document === "undefined") return;
+  keyframesInjected = true;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  const el = document.createElement("style");
+  el.id = KEYFRAMES_ID;
+  el.textContent = PULSE_KEYFRAMES;
+  document.head.appendChild(el);
+};
+var Favicon = ({
+  url,
+  src,
+  alt,
+  size = 32,
+  className = "",
+  timeout = 2e3,
+  border = false,
+  padding = 0,
+  background = "transparent",
+  borderRadius = 0,
+  lazy = false,
+  preferFallback = false,
+  preferSrc = true
+}) => {
+  const domain = (0, import_react.useMemo)(() => getDomain(url), [url]);
+  const sources = (0, import_react.useMemo)(() => {
+    const standard = [
+      `https://${domain}/favicon.ico`,
+      `https://${domain}/apple-touch-icon.png`,
+      `https://${domain}/logo.svg`,
+      `https://${domain}/logo.png`
+    ];
+    const services = [
+      `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 base = preferFallback ? [...services, ...standard] : [...standard, ...services];
+    const withSrc = !src ? base : preferSrc ? [src, ...base] : [...base, src];
+    return [...new Set(withSrc)];
+  }, [domain, src, preferFallback, preferSrc]);
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, {
+    index: 0,
+    status: "loading"
+  });
+  const [prevSources, setPrevSources] = (0, import_react.useState)(sources);
+  if (sources !== prevSources) {
+    setPrevSources(sources);
+    dispatch({ type: "reset" });
+  }
+  const currentSrc = sources[state.index];
+  const isLoading = state.status === "loading";
+  const hasError = state.status === "error";
+  const isUserSrc = currentSrc === src;
+  (0, import_react.useEffect)(() => {
+    injectKeyframes();
+  }, []);
+  const imgRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const img = imgRef.current;
+    if (!img || state.status !== "loading" || !img.complete) return;
+    let cancelled = false;
+    const onOk = () => !cancelled && dispatch({ type: "load" });
+    const onFail = () => !cancelled && dispatch({ type: "error", total: sources.length });
+    if (typeof img.decode === "function") {
+      img.decode().then(onOk, onFail);
+    } else {
+      img.naturalWidth > 0 ? onOk() : onFail();
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [state.status, currentSrc, sources]);
+  (0, import_react.useEffect)(() => {
+    if (state.status !== "loading" || isUserSrc || lazy) return;
+    const id = setTimeout(() => {
+      dispatch({ type: "error", total: sources.length });
+    }, timeout);
+    return () => clearTimeout(id);
+  }, [state.status, currentSrc, isUserSrc, lazy, timeout, sources]);
+  const label = alt != null ? alt : domain ? `${domain} logo` : "favicon";
+  const letter = domain.charAt(0).toUpperCase() || "?";
+  const neutralSurface = {
+    borderRadius: borderRadius || void 0,
+    background: NEUTRAL_BG
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        display: "inline-block",
+        width: size,
+        height: size,
+        boxSizing: "border-box",
+        // 默认 / 零值不写内联,留给消费方的 className 决定。
+        padding: padding || void 0,
+        borderRadius: borderRadius || void 0,
+        background: background === "transparent" ? void 0 : background,
+        border: border ? "1px solid color-mix(in srgb, currentColor 15%, transparent)" : void 0
+      }
+    },
+    isLoading && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: __spreadProps(__spreadValues({
+          position: "absolute",
+          inset: padding || 0
+        }, neutralSurface), {
+          animation: "favicon-stealer-pulse 1.5s ease-in-out infinite"
+        })
+      }
+    ),
+    currentSrc && !hasError && /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        key: currentSrc,
+        ref: imgRef,
+        src: currentSrc,
+        alt: isLoading ? "" : label,
+        width: size,
+        height: size,
+        loading: lazy ? "lazy" : "eager",
+        decoding: "async",
+        onError: () => dispatch({ type: "error", total: sources.length }),
+        onLoad: () => dispatch({ type: "load" }),
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          opacity: isLoading ? 0 : 1,
+          transition: "opacity 0.3s"
+        }
+      }
+    ),
+    hasError && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        style: __spreadProps(__spreadValues({
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }, neutralSurface), {
+          fontSize: size * 0.5,
+          lineHeight: 1
+        })
+      },
+      letter
+    )
+  );
+};
+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,214 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/lib/utils/index.ts
+var getDomain = (url) => {
+  try {
+    const hasProtocol = /^https?:\/\//i.test(url);
+    const urlWithProtocol = hasProtocol ? url : `https://${url}`;
+    const domain = new URL(urlWithProtocol).hostname;
+    return domain.replace(/^www\./, "");
+  } catch (error) {
+    return url;
+  }
+};
+
+// src/Favicon.tsx
+import React, { useEffect, useMemo, useReducer, useRef, useState } from "react";
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "reset":
+      return { index: 0, status: "loading" };
+    case "load":
+      return state.status === "loaded" ? state : __spreadProps(__spreadValues({}, state), { status: "loaded" });
+    case "error": {
+      const next = state.index + 1;
+      return next < action.total ? { index: next, status: "loading" } : { index: state.index, status: "error" };
+    }
+    default:
+      return state;
+  }
+};
+var KEYFRAMES_ID = "favicon-stealer-keyframes";
+var PULSE_KEYFRAMES = "@keyframes favicon-stealer-pulse{0%,100%{opacity:1}50%{opacity:.4}}";
+var NEUTRAL_BG = "color-mix(in srgb, currentColor 10%, transparent)";
+var keyframesInjected = false;
+var injectKeyframes = () => {
+  if (keyframesInjected || typeof document === "undefined") return;
+  keyframesInjected = true;
+  if (document.getElementById(KEYFRAMES_ID)) return;
+  const el = document.createElement("style");
+  el.id = KEYFRAMES_ID;
+  el.textContent = PULSE_KEYFRAMES;
+  document.head.appendChild(el);
+};
+var Favicon = ({
+  url,
+  src,
+  alt,
+  size = 32,
+  className = "",
+  timeout = 2e3,
+  border = false,
+  padding = 0,
+  background = "transparent",
+  borderRadius = 0,
+  lazy = false,
+  preferFallback = false,
+  preferSrc = true
+}) => {
+  const domain = useMemo(() => getDomain(url), [url]);
+  const sources = useMemo(() => {
+    const standard = [
+      `https://${domain}/favicon.ico`,
+      `https://${domain}/apple-touch-icon.png`,
+      `https://${domain}/logo.svg`,
+      `https://${domain}/logo.png`
+    ];
+    const services = [
+      `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 base = preferFallback ? [...services, ...standard] : [...standard, ...services];
+    const withSrc = !src ? base : preferSrc ? [src, ...base] : [...base, src];
+    return [...new Set(withSrc)];
+  }, [domain, src, preferFallback, preferSrc]);
+  const [state, dispatch] = useReducer(reducer, {
+    index: 0,
+    status: "loading"
+  });
+  const [prevSources, setPrevSources] = useState(sources);
+  if (sources !== prevSources) {
+    setPrevSources(sources);
+    dispatch({ type: "reset" });
+  }
+  const currentSrc = sources[state.index];
+  const isLoading = state.status === "loading";
+  const hasError = state.status === "error";
+  const isUserSrc = currentSrc === src;
+  useEffect(() => {
+    injectKeyframes();
+  }, []);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    const img = imgRef.current;
+    if (!img || state.status !== "loading" || !img.complete) return;
+    let cancelled = false;
+    const onOk = () => !cancelled && dispatch({ type: "load" });
+    const onFail = () => !cancelled && dispatch({ type: "error", total: sources.length });
+    if (typeof img.decode === "function") {
+      img.decode().then(onOk, onFail);
+    } else {
+      img.naturalWidth > 0 ? onOk() : onFail();
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [state.status, currentSrc, sources]);
+  useEffect(() => {
+    if (state.status !== "loading" || isUserSrc || lazy) return;
+    const id = setTimeout(() => {
+      dispatch({ type: "error", total: sources.length });
+    }, timeout);
+    return () => clearTimeout(id);
+  }, [state.status, currentSrc, isUserSrc, lazy, timeout, sources]);
+  const label = alt != null ? alt : domain ? `${domain} logo` : "favicon";
+  const letter = domain.charAt(0).toUpperCase() || "?";
+  const neutralSurface = {
+    borderRadius: borderRadius || void 0,
+    background: NEUTRAL_BG
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        display: "inline-block",
+        width: size,
+        height: size,
+        boxSizing: "border-box",
+        // 默认 / 零值不写内联,留给消费方的 className 决定。
+        padding: padding || void 0,
+        borderRadius: borderRadius || void 0,
+        background: background === "transparent" ? void 0 : background,
+        border: border ? "1px solid color-mix(in srgb, currentColor 15%, transparent)" : void 0
+      }
+    },
+    isLoading && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: __spreadProps(__spreadValues({
+          position: "absolute",
+          inset: padding || 0
+        }, neutralSurface), {
+          animation: "favicon-stealer-pulse 1.5s ease-in-out infinite"
+        })
+      }
+    ),
+    currentSrc && !hasError && /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        key: currentSrc,
+        ref: imgRef,
+        src: currentSrc,
+        alt: isLoading ? "" : label,
+        width: size,
+        height: size,
+        loading: lazy ? "lazy" : "eager",
+        decoding: "async",
+        onError: () => dispatch({ type: "error", total: sources.length }),
+        onLoad: () => dispatch({ type: "load" }),
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
+          opacity: isLoading ? 0 : 1,
+          transition: "opacity 0.3s"
+        }
+      }
+    ),
+    hasError && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        style: __spreadProps(__spreadValues({
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }, neutralSurface), {
+          fontSize: size * 0.5,
+          lineHeight: 1
+        })
+      },
+      letter
+    )
+  );
+};
+var Favicon_default = Favicon;
+export {
+  Favicon_default as Favicon
+};

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "favicon-stealer",
-  "version": "1.9.0",
+  "version": "3.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": [
@@ -24,13 +33,15 @@
   "author": "Corey Chiu",
   "license": "MIT",
   "description": "Get clear and consistent favicon of a website easily",
-  "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+  "peerDependencies": {
+    "react": ">=18"
   },
   "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "@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,130 +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) {
-            if (src) {
-                setIsLoading(false);
-            }
-            else {
-                setImgSrc(fallbackSources[0]);
-            }
-            setIsInitialized(true);
-        }
-    }, [isInitialized, fallbackSources, src]);
-    (0, react_1.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 (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" }))),
-        (src || imgSrc) && (react_1.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 && (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;