Mirrors/coco-app
1
0
Fork 0
mirror of https://github.com/infinilabs/coco-app.git synced 2025-12-16 19:47:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimized loading of font icons on the web side (#596)

Browse Source 
* refactor: optimized loading of font icons on the web side

* refactor: update
This commit is contained in:
ayangweb
2025-06-03 11:22:22 +08:00
committed by GitHub
parent f557f7e780
commit 5046754534
4 changed files with 13 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/fonts/icons/extension.js
View File

File diff suppressed because one or more lines are too long

1
public/assets/fonts/icons/iconfont.js
View File

File diff suppressed because one or more lines are too long

9
src/components/Common/Icons/FontIcon.tsx
View File

@@ -1,6 +1,3 @@
import { useAppStore } from "@/stores/appStore";
import logoImg from "@/assets/icon.svg";
interface FontIconProps { interface FontIconProps {
name: string; name: string;
className?: string; className?: string;
@@ -8,17 +5,11 @@ interface FontIconProps {
} }
const FontIcon = ({ name, className, style, ...rest }: FontIconProps) => { const FontIcon = ({ name, className, style, ...rest }: FontIconProps) => {
const isTauri = useAppStore((state) => state.isTauri);
if (isTauri) {
return ( return (
<svg className={`icon ${className || ""}`} style={style} {...rest}> <svg className={`icon ${className || ""}`} style={style} {...rest}>
<use xlinkHref={`#${name}`} /> <use xlinkHref={`#${name}`} />
</svg> </svg>
); );
} else {
return <img src={logoImg} className={className} alt={"coco"} />;
}
}; };
export default FontIcon; export default FontIcon;

30
src/hooks/useScript.ts
View File

@@ -1,9 +1,9 @@
import { useEffect, useState } from "react"; import { useEffect } from "react";
const useScript = (src: string, onError?: () => void) => { const useScript = (src: string, onError?: () => void) => {
useEffect(() => { useEffect(() => {
if (document.querySelector(`script[src="${src}"]`)) { if (document.querySelector(`script[src="${src}"]`)) {
return; // Prevent duplicate script loading return;
} }
const script = document.createElement("script"); const script = document.createElement("script");
@@ -12,7 +12,8 @@ const useScript = (src: string, onError?: () => void) => {
script.onerror = () => { script.onerror = () => {
console.error(`Failed to load script: ${src}`); console.error(`Failed to load script: ${src}`);
if (onError) onError();
onError?.();
}; };
document.body.appendChild(script); document.body.appendChild(script);
@@ -26,23 +27,8 @@ const useScript = (src: string, onError?: () => void) => {
export default useScript; export default useScript;
export const useIconfontScript = () => { export const useIconfontScript = () => {
const appStore = JSON.parse(localStorage.getItem("app-store") || "{}"); // Coco Server Icons
useScript("https://at.alicdn.com/t/c/font_4878526_cykw3et0ezd.js");
const [_useLocalFallback, setUseLocalFallback] = useState(false); // Coco App Icons
useScript("https://at.alicdn.com/t/c/font_4934333_j1t3b1xyxkk.js");
let baseURL = appStore.state?.endpoint_http;
if (!baseURL || baseURL === "undefined") {
baseURL = "";
}
useScript("/assets/fonts/icons/iconfont.js");
useScript(`${baseURL}/assets/fonts/icons/iconfont.js`, () => {
console.log(
"Remote iconfont loading failed, falling back to local resource"
);
setUseLocalFallback(true);
});
useScript("/assets/fonts/icons/extension.js");
}; };