fix: fix link favicon issue.

jaywcjlove · jaywcjlove · commit 0fcc440b76f9 · 2023-11-09T12:38:57.000+08:00
diff --git a/core/README.md b/core/README.md
@@ -108,6 +108,37 @@ outputs:
 <Head.Link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 ```
 
+```jsx mdx:preview
+import React, { useState } from "react";
+import Head from '@uiw/react-head';
+
+const favicon = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦖</text></svg>`
+const favicon2 = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤡</text></svg>`
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  return (
+    <div>
+      <Head.Link rel="icon" type="image/svg+xml" href={show ? favicon : favicon2} />
+      <button onClick={() => setShow(!show)}>
+        Change Favicon {show ? "🦖" : "🤡"} {String(show)}
+      </button>
+    </div>
+  );
+}
+```
+
+outputs:
+
+```html
+<head>
+  <style>.box-test { color: red; }</style>
+  <style>.box-test { color: red; }</style>
+</head>
+<!-- .... -->
+```
+
+
 ## All Sub Components
 
 Elements that can be used inside the `<head>`:
diff --git a/core/src/elements/HeadElement.tsx b/core/src/elements/HeadElement.tsx
@@ -18,6 +18,9 @@ export const HeadElement = <T extends ElementType<any> = 'link'>(props: { as?: T
     if (props.as === 'meta' && props.charSet) {
       selector = `meta[charset]:not([data-head])`;
     }
+    if (props.as === 'link' && props.rel == 'icon') {
+      selector = `link[rel="icon"]:not([data-head])`;
+    }
     if (selector) {
       const dom = document.querySelector(selector);
       dom?.remove();
