@yourdash/uikit 1.0.9 → 1.0.11

package/components/buttonWithIcon/buttonWithIcon.module.scss

@@ -50,5 +50,5 @@
 
 .icon {
   margin-left: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 2);
-  margin-right: calc(var(#{$theme}#{$button}#{$padding}#{$horizontal}) / 4);
+  margin-right: var(#{$theme}#{$button}#{$padding}#{$horizontal});
 }

package/components/buttonWithIcon/buttonWithIcon.tsx

@@ -5,12 +5,12 @@
 
 import clippy from "@yourdash/shared/web/helpers/clippy.ts";
 import Icon from "../icon/icon.tsx";
-import { UKIcon } from "../icon/iconDictionary.ts";
+import { UKIcon, UKIconType } from "../icon/iconDictionary.ts";
 import styles from "./buttonWithIcon.module.scss";
 import { FC } from "react";
 
 const ButtonWithIcon: FC<{
-  icon: UKIcon;
+  icon: UKIconType;
   onClick: () => void;
   text: string;
   className?: string;

package/components/icon/icon.tsx

@@ -3,22 +3,34 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import { UKIcon } from "./iconDictionary.ts";
+import { UKIcon, UKIconType } from "./iconDictionary.ts";
 import styles from "./icon.module.scss";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
+import ServerErrorIcon from "./icons/server-error.svg";
 
 const Icon: FC<{
-  icon: UKIcon;
+  // noinspection TypeScriptDuplicateUnionOrIntersectionType
+  icon: UKIconType;
   size?: string;
   color?: string;
   preserveColor?: boolean;
   className?: string;
 }> = (props) => {
+  const [icon, setIcon] = useState(ServerErrorIcon);
+
+  useEffect(() => {
+    if (typeof props.icon === "function") {
+      props.icon().then((val) => {
+        setIcon(val.default);
+      });
+    }
+  }, [props.icon]);
+
   return (
     <div
       className={`${styles.component} ${props.className} ${props.preserveColor ? styles.preserveColor : ""}`}
       style={{
-        "--icon": `url(${props.icon})`,
+        "--icon": `url(${icon})`,
         ...(!props.preserveColor ? { "--color": props.color } : {}),
         // @ts-ignore
         "--size": props.size,