ferns-ui 0.21.3 → 0.22.1

package/src/Form.tsx

@@ -153,7 +153,7 @@ export class FormLine extends React.Component<FormLineProps, FormLineState> {
       <Box direction="row" display="flex">
         <IconButton
           accessibilityLabel="edit"
-          icon="cancel"
+          icon="times"
           iconColor="darkGray"
           prefix="far"
           size="xs"

package/src/Icon.tsx

@@ -1,4 +1,4 @@
-import {FontAwesome} from "@expo/vector-icons";
+import {FontAwesome5} from "@expo/vector-icons";
 import React from "react";
 
 import {IconProps, iconSizeToNumber} from "./Common";
@@ -9,10 +9,16 @@ export function initIcons() {
 }
 
 // TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used, etc.
-export class Icon extends React.Component<IconProps, {}> {
-  render() {
-    const color = Unifier.theme[this.props.color || "primary"];
-    const size = iconSizeToNumber(this.props.size);
-    return <FontAwesome color={color} name={this.props.name as any} size={size} />;
-  }
+export function Icon({color, size, name, prefix}: IconProps): React.ReactElement {
+  const iconColor = Unifier.theme[color || "primary"];
+  const iconSize = iconSizeToNumber(size);
+  return (
+    <FontAwesome5
+      color={iconColor}
+      name={name}
+      regular={prefix === "far"}
+      size={iconSize}
+      solid={!prefix || prefix === "fas"}
+    />
+  );
 }

package/src/Pog.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 
 import {Box} from "./Box";
-import {AllColors, IconPrefix, IconSize} from "./Common";
+import {AllColors, IconName, IconPrefix, IconSize} from "./Common";
 import {Icon} from "./Icon";
 
 const SIZE_NAME_TO_PIXEL = {
@@ -20,7 +20,7 @@ interface Props {
   hovered?: boolean;
   selected?: boolean;
   iconColor?: AllColors;
-  icon: string;
+  icon: IconName;
   iconPrefix?: IconPrefix;
   size?: IconSize;
 }

package/src/TapToEdit.tsx

@@ -130,7 +130,7 @@ export const TapToEdit = ({
           </Box>
           {editable && (
             <Box marginLeft={2} onClick={(): void => setEditing(true)}>
-              <Icon color="darkGray" name="edit" size="lg" />
+              <Icon color="darkGray" name="edit" prefix="far" size="md" />
             </Box>
           )}
         </Box>