@blocklet/ui-react 2.10.12 → 2.10.13

package/lib/Icon/index.js

@@ -1,8 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import "iconify-icon";
+import { useState } from "react";
+import { useAsyncEffect } from "ahooks";
 import { Avatar } from "@mui/material";
-import { Icon as IconifyIcon } from "@iconify/react";
-import { isUrl, isIconifyString } from "../utils.js";
+import { Icon as IconifyIcon, loadIcon } from "@iconify/react";
+import { isUrl } from "../utils.js";
 export default function Icon({
   icon,
   size,
@@ -13,6 +15,18 @@ export default function Icon({
   if (size) {
     _sx.push({ width: size, height: size });
   }
+  const [isIconify, setIsIconify] = useState(false);
+  const [loading, setLoading] = useState(true);
+  useAsyncEffect(async () => {
+    setLoading(true);
+    try {
+      await loadIcon(icon);
+      setIsIconify(true);
+    } catch {
+      setIsIconify(false);
+    }
+    setLoading(false);
+  }, [icon]);
   if (!rest.variant) {
     _sx.push({
       "&.MuiAvatar-root": {
@@ -31,8 +45,11 @@ export default function Icon({
   if (isUrl(icon)) {
     return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, src: icon, sx: _sx });
   }
-  if (isIconifyString(icon)) {
-    const height = size ? 0.6 * size + 4 : 0;
+  const height = size ? 0.6 * size + 4 : 0;
+  if (loading) {
+    return /* @__PURE__ */ jsx(IconifyIcon, { icon: "codicon:blank", height: height || void 0 });
+  }
+  if (isIconify) {
     return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx(IconifyIcon, { icon, height: height || void 0 }) });
   }
   if (icon && typeof icon === "string") {

package/lib/utils.js

@@ -45,6 +45,10 @@ export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
 
+/**
+ * @description 检测是否是 Iconify 格式的字符串
+ * @deprecated
+ */
 export const isIconifyString = (str) => {
   return /^[\w-]+:[\w-]+$/.test(str);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.12",
+  "version": "2.10.13",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.12",
-    "@arcblock/react-hooks": "^2.10.12",
+    "@arcblock/bridge": "^2.10.13",
+    "@arcblock/react-hooks": "^2.10.13",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -79,5 +79,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "c32ebbc1536d9374a99865ff463f0a300b6e5372"
+  "gitHead": "572b07b7e8fff82c6c16a9f7814867a5f6d17c03"
 }

package/src/Icon/index.tsx

@@ -1,9 +1,10 @@
 import 'iconify-icon';
-
+import { useState } from 'react';
+import { useAsyncEffect } from 'ahooks';
 import { Avatar } from '@mui/material';
 import type { AvatarProps, BoxProps } from '@mui/material';
-import { Icon as IconifyIcon } from '@iconify/react';
-import { isUrl, isIconifyString } from '../utils';
+import { Icon as IconifyIcon, loadIcon } from '@iconify/react';
+import { isUrl } from '../utils';
 
 /**
  * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
@@ -23,6 +24,19 @@ export default function Icon({
   if (size) {
     _sx.push({ width: size, height: size });
   }
+  const [isIconify, setIsIconify] = useState(false);
+  // NOTICE: 需要设置默认为 true，代表在判断 icon 是否为 iconify 时，需要等待 icon 加载完成
+  const [loading, setLoading] = useState(true);
+  useAsyncEffect(async () => {
+    setLoading(true);
+    try {
+      await loadIcon(icon);
+      setIsIconify(true);
+    } catch {
+      setIsIconify(false);
+    }
+    setLoading(false);
+  }, [icon]);
   // 禁用默认的 circular variant 样式
   if (!rest.variant) {
     _sx.push({
@@ -42,9 +56,13 @@ export default function Icon({
   if (isUrl(icon)) {
     return <Avatar component="span" {...rest} src={icon} sx={_sx} />;
   }
-  if (isIconifyString(icon)) {
-    // y = 0.6 * x + 4
-    const height = size ? 0.6 * size + 4 : 0;
+  // y = 0.6 * x + 4
+  const height = size ? 0.6 * size + 4 : 0;
+
+  if (loading) {
+    return <IconifyIcon icon="codicon:blank" height={height || undefined} />;
+  }
+  if (isIconify) {
     return (
       <Avatar component="span" {...rest} sx={_sx}>
         <IconifyIcon icon={icon} height={height || undefined} />

package/src/utils.js

@@ -45,6 +45,10 @@ export const isUrl = (str) => {
   return /^https?:\/\//.test(str);
 };
 
+/**
+ * @description 检测是否是 Iconify 格式的字符串
+ * @deprecated
+ */
 export const isIconifyString = (str) => {
   return /^[\w-]+:[\w-]+$/.test(str);
 };