diff --git a/nest_frontend/components/base/Button.js b/nest_frontend/components/base/Button.js index 1692c46..0a94884 100644 --- a/nest_frontend/components/base/Button.js +++ b/nest_frontend/components/base/Button.js @@ -1,7 +1,7 @@ import React from "react" import Style from "./Button.module.css" import classNames from "classnames" -import make_icon from "../../utils/make_icon" +import makeIcon from "../../utils/makeIcon" /** @@ -26,7 +26,7 @@ export default function Button({ children, disabled, onClick, className, color, disabled={disabled} {...props} > - {children} {make_icon(icon, Style.Icon)} + {children} {makeIcon(icon, {className: Style.Icon})} ) } diff --git a/nest_frontend/components/base/ButtonSidebar.js b/nest_frontend/components/base/ButtonSidebar.js index c9b4840..7e3911b 100644 --- a/nest_frontend/components/base/ButtonSidebar.js +++ b/nest_frontend/components/base/ButtonSidebar.js @@ -1,7 +1,7 @@ import React from "react" import Style from "./ButtonSidebar.module.css" import classNames from "classnames" -import make_icon from "../../utils/make_icon" +import makeIcon from "../../utils/makeIcon" import { Link } from "react-router-dom" import { useRouteMatch } from "react-router" @@ -31,7 +31,7 @@ export default function ButtonSidebar({ icon, children, to, className, ...props return (
- {make_icon(icon, Style.ButtonIcon)} + {makeIcon(icon, {className: Style.ButtonIcon})}
{children}
diff --git a/nest_frontend/components/base/InputWithIcon.js b/nest_frontend/components/base/InputWithIcon.js index bc84e3b..87934f4 100644 --- a/nest_frontend/components/base/InputWithIcon.js +++ b/nest_frontend/components/base/InputWithIcon.js @@ -1,7 +1,7 @@ import React, { useState } from "react" import Style from "./InputWithIcon.module.css" import classNames from "classnames" -import make_icon from "../../utils/make_icon" +import makeIcon from "../../utils/makeIcon" /** @@ -22,7 +22,7 @@ export default function InputWithIcon({ icon, className, ...props }) { return (
- {make_icon(icon)} + {makeIcon(icon)}
{ diff --git a/nest_frontend/utils/makeIcon.js b/nest_frontend/utils/makeIcon.js new file mode 100644 index 0000000..4a364ed --- /dev/null +++ b/nest_frontend/utils/makeIcon.js @@ -0,0 +1,29 @@ +import React, { isValidElement } from "react" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import {IconDefinition} from "@fortawesome/fontawesome-svg-core" + + +/** + * Try to create an icon element based on what is passed to the function: + * - If a {@link JSX.Element} is passed, a `` element containing it will be created and returned. + * - If a {@link IconDefinition} is passed, a `` element containing a {@link FontAwesomeIcon} will be created + * and returned. + * - If a falsy value is passed, `null` will be returned. + * + * @param icon - The icon value. + * @param props - Props to pass to the span element when it is created. + * @returns {JSX.Element|null} + */ +export default function makeIcon(icon, props) { + if(isValidElement(icon)) { + return {icon} + } + else if(icon) { + return ( + + ) + } + else { + return null + } +} diff --git a/nest_frontend/utils/make_icon.js b/nest_frontend/utils/make_icon.js deleted file mode 100644 index 22f960d..0000000 --- a/nest_frontend/utils/make_icon.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { isValidElement } from "react" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" - - -export default function make_icon(icon, className) { - if(isValidElement(icon)) { - return icon - } - else if(icon) { - return ( - - ) - } - else { - return null - } -} \ No newline at end of file