@plusscommunities/pluss-core-app 8.0.0 → 8.0.1-auth.0

package/src/components/Icon.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useMemo } from "react";
+import { createIconSet } from "@expo/vector-icons";
+
+import glyphMap from "../assets/icons/fontawesome/fa7-glyphmap.json";
+
+const v4ToV6Map = {
+	dashboard: "gauge",
+	navicon: "bars",
+	remove: "xmark",
+	close: "xmark",
+	pencil: "pen",
+	times: "xmark",
+	"trash-o": "trash-can",
+	"file-o": "file",
+	"picture-o": "image",
+	"photo-o": "image",
+	"camera-o": "camera",
+	"video-camera": "video",
+	"clock-o": "clock",
+	"calendar-o": "calendar",
+	"drivers-license": "id-card",
+	"drivers-license-o": "id-card",
+	"user-o": "user",
+	"user-circle-o": "circle-user",
+	"user-plus-o": "user-plus",
+	"user-times-o": "user-xmark",
+	"angle-left": "chevron-left",
+	"angle-right": "chevron-right",
+	"angle-up": "chevron-up",
+	"angle-down": "chevron-down",
+	"chevron-left": "chevron-left",
+	"chevron-right": "chevron-right",
+	"chevron-up": "chevron-up",
+	"chevron-down": "chevron-down",
+	"envelope-o": "envelope",
+	"comment-o": "comment",
+	"commenting-o": "comment-dots",
+	"comments-o": "comments",
+	"share-square-o": "share-from-square",
+	"bookmark-o": "bookmark",
+	"thumbs-o-up": "thumbs-up",
+	"thumbs-o-down": "thumbs-down",
+	"heart-o": "heart",
+	"star-o": "star",
+	"check-square-o": "square-check",
+	"circle-o": "circle",
+	"check-circle-o": "circle-check",
+	"circle-check": "circle-check",
+	warning: "triangle-exclamation",
+	"exclamation-circle": "circle-exclamation",
+	"exclamation-triangle": "triangle-exclamation",
+	"info-circle": "circle-info",
+	"question-circle": "circle-question",
+	"sign-out": "right-from-bracket",
+	"sign-in": "right-to-bracket",
+	"unlock-alt": "unlock",
+	"lock-alt": "lock",
+	"play-circle-o": "circle-play",
+	"pause-circle-o": "circle-pause",
+	"stop-circle-o": "circle-stop",
+	"shopping-cart": "cart-shopping",
+	"shopping-basket": "basket-shopping",
+	briefcase: "briefcase",
+	"building-o": "building",
+	"bell-o": "bell",
+	cog: "gear",
+	cogs: "gears",
+	check: "check",
+	"close-o": "xmark",
+};
+
+const IconSolid = createIconSet(glyphMap, "FontAwesomePro-Solid");
+const IconRegular = createIconSet(glyphMap, "FontAwesomePro-Regular");
+const IconLight = createIconSet(glyphMap, "FontAwesomePro-Light");
+const IconBrand = createIconSet(glyphMap, "FontAwesomePro-Brands");
+
+export const FontAwesome = ({
+	name,
+	size,
+	color,
+	style,
+	solid = false,
+	regular = false,
+	light = false,
+	brand = false,
+	...props
+}) => {
+	useEffect(() => {
+		if (__DEV__) {
+			// Use __DEV__ for React Native
+			if (v4ToV6Map[name]) {
+				console.warn(
+					`[FA7 Upgrade] "${name}" is a legacy name. Please use "${v4ToV6Map[name]}" instead.`,
+				);
+			}
+		}
+	}, [name]);
+
+	let iconName = name || "question";
+	iconName = iconName.replace(/^fa-/, "");
+	if (v4ToV6Map[iconName]) {
+		iconName = v4ToV6Map[iconName];
+	}
+
+	let SelectedIconComponent = IconSolid; // Default to Solid
+	if (regular) SelectedIconComponent = IconRegular;
+	if (light) SelectedIconComponent = IconLight;
+	if (brand) SelectedIconComponent = IconBrand;
+
+	return (
+		<SelectedIconComponent
+			name={iconName}
+			size={size}
+			color={color}
+			style={style}
+			{...props}
+		/>
+	);
+};