@ecohouse/ui 0.1.0 → 0.1.2

package/src/icons/Building/buildingPath.ts

@@ -0,0 +1,2 @@
+export const BUILDING_PATH =
+  "M7.5 9.16659V16.6666M7.5 9.16659H3.83301C3.3663 9.16659 3.13318 9.16659 2.95492 9.25741C2.79811 9.33731 2.67072 9.4647 2.59083 9.6215C2.5 9.79976 2.5 10.0333 2.5 10.5V16.6666H7.5M7.5 9.16659V4.66667C7.5 4.19996 7.5 3.96643 7.59083 3.78817C7.67072 3.63137 7.79811 3.50397 7.95492 3.42408C8.13317 3.33325 8.3663 3.33325 8.83301 3.33325H11.1663C11.6331 3.33325 11.8669 3.33325 12.0452 3.42408C12.202 3.50397 12.329 3.63137 12.4089 3.78817C12.4997 3.96643 12.5 4.19996 12.5 4.66667V6.66659M7.5 16.6666H12.5M12.5 16.6666L17.5 16.6667V8C17.5 7.53329 17.4997 7.29976 17.4089 7.1215C17.329 6.9647 17.2024 6.83731 17.0456 6.75741C16.8674 6.66659 16.6334 6.66659 16.1667 6.66659H12.5M12.5 16.6666V6.66659";

package/src/icons/Building/index.ts

@@ -0,0 +1 @@
+export { BuildingIcon, BUILDING_PATH } from "./BuildingIcon";

package/src/icons/Camera/CameraIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { CAMERA_PATH } from "./cameraPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CAMERA_PATH } from "./cameraPath";
+
+export function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={CAMERA_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Camera/CameraIcon.web.tsx

@@ -0,0 +1,26 @@
+import { CAMERA_PATH } from "./cameraPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CAMERA_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CAMERA_PATH } from "./cameraPath";

package/src/icons/Camera/cameraPath.ts

@@ -0,0 +1,2 @@
+export const CAMERA_PATH =
+  "M9.48898 7H6.2002C5.08009 7 4.51962 7 4.0918 7.21799C3.71547 7.40973 3.40973 7.71547 3.21799 8.0918C3 8.51962 3 9.08009 3 10.2002V15.8002C3 16.9203 3 17.4796 3.21799 17.9074C3.40973 18.2837 3.71547 18.5905 4.0918 18.7822C4.5192 19 5.07899 19 6.19691 19H17.8031C18.921 19 19.48 19 19.9074 18.7822C20.2837 18.5905 20.5905 18.2837 20.7822 17.9074C21 17.48 21 16.921 21 15.8031V10.1969C21 9.07899 21 8.5192 20.7822 8.0918C20.5905 7.71547 20.2837 7.40973 19.9074 7.21799C19.4796 7 18.9203 7 17.8002 7H14.5108M9.48898 7H9.55078M9.48898 7C9.50151 7.00001 9.51468 7 9.52857 7L9.55078 7M9.48898 7C9.38286 6.99995 9.32339 6.99941 9.27637 6.99414C8.68878 6.92835 8.28578 6.36908 8.40918 5.79084C8.42066 5.73703 8.44336 5.66894 8.4883 5.53412L8.49023 5.52841C8.54156 5.37443 8.56723 5.29743 8.59558 5.22949C8.88586 4.53389 9.54322 4.06083 10.2949 4.00541C10.3683 4 10.449 4 10.6113 4H13.3886C13.5509 4 13.6322 4 13.7057 4.00541C14.4574 4.06083 15.114 4.53389 15.4043 5.22949C15.4326 5.29743 15.4584 5.37434 15.5098 5.52832C15.556 5.66699 15.5791 5.73636 15.5908 5.79093C15.7142 6.36917 15.3118 6.92835 14.7242 6.99414C14.6772 6.99941 14.6171 6.99995 14.5108 7M9.55078 7H14.449M14.449 7H14.5108M14.449 7L14.4712 7C14.4851 7 14.4983 7.00001 14.5108 7M12 16C10.3431 16 9 14.6569 9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16Z";

package/src/icons/Camera/index.ts

@@ -0,0 +1 @@
+export { CameraIcon, CAMERA_PATH } from "./CameraIcon";

package/src/icons/CheckBadge/CheckBadgeIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { CHECK_BADGE_PATH } from "./checkBadgePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CHECK_BADGE_PATH } from "./checkBadgePath";
+
+export function CheckBadgeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CHECK_BADGE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/CheckBadge/CheckBadgeIcon.web.tsx

@@ -0,0 +1,26 @@
+import { CHECK_BADGE_PATH } from "./checkBadgePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function CheckBadgeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHECK_BADGE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CHECK_BADGE_PATH } from "./checkBadgePath";

package/src/icons/CheckBadge/checkBadgePath.ts

@@ -0,0 +1,2 @@
+export const CHECK_BADGE_PATH =
+  "M12.5 8.33317L9.16663 11.6665L7.49996 9.99984M11.0384 2.88233L12.0558 3.74941C12.3122 3.96786 12.6305 4.09992 12.9662 4.12671L14.2987 4.23291C15.0822 4.29543 15.7045 4.91733 15.767 5.70077L15.8729 7.03353C15.8997 7.36925 16.0322 7.68799 16.2507 7.94433L17.1174 8.96152C17.6272 9.5597 17.6272 10.4396 17.1175 11.0378L16.2508 12.0551C16.0323 12.3115 15.9 12.6303 15.8732 12.9661L15.7666 14.2986C15.704 15.082 15.0827 15.7043 14.2993 15.7668L12.9663 15.8732C12.6305 15.9 12.312 16.0317 12.0556 16.2502L11.0384 17.1173C10.4402 17.627 9.55973 17.6271 8.96155 17.1174L7.9443 16.2502C7.68796 16.0318 7.36938 15.8998 7.03365 15.8731L5.70064 15.7668C4.9172 15.7043 4.29588 15.0822 4.23336 14.2987L4.12675 12.9661C4.09996 12.6304 3.96759 12.3118 3.74915 12.0555L2.88245 11.0378C2.37268 10.4397 2.37244 9.56002 2.88221 8.96184L3.74969 7.94418C3.96814 7.68784 4.09923 7.36926 4.12602 7.03353L4.23263 5.70093C4.29515 4.91749 4.91826 4.29535 5.70171 4.23283L7.03324 4.12663C7.36897 4.09984 7.68771 3.96788 7.94404 3.74943L8.96164 2.88233C9.55982 2.37256 10.4402 2.37256 11.0384 2.88233Z";

package/src/icons/CheckBadge/index.ts

@@ -0,0 +1 @@
+export { CheckBadgeIcon, CHECK_BADGE_PATH } from "./CheckBadgeIcon";

package/src/icons/Clock/ClockIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { CLOCK_PATH } from "./clockPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CLOCK_PATH } from "./clockPath";
+
+export function ClockIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={CLOCK_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Clock/ClockIcon.web.tsx

@@ -0,0 +1,26 @@
+import { CLOCK_PATH } from "./clockPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function ClockIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CLOCK_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CLOCK_PATH } from "./clockPath";

package/src/icons/Clock/clockPath.ts

@@ -0,0 +1,2 @@
+export const CLOCK_PATH =
+  "M12 7V12H17M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z";

package/src/icons/Clock/index.ts

@@ -0,0 +1 @@
+export { ClockIcon, CLOCK_PATH } from "./ClockIcon";

package/src/icons/Facebook/FacebookIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { FACEBOOK_PATH } from "./facebookPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { FACEBOOK_PATH } from "./facebookPath";
+
+export function FacebookIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path d={FACEBOOK_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/Facebook/FacebookIcon.web.tsx

@@ -0,0 +1,20 @@
+import { FACEBOOK_PATH } from "./facebookPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function FacebookIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path d={FACEBOOK_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { FACEBOOK_PATH } from "./facebookPath";

package/src/icons/Facebook/facebookPath.ts

@@ -0,0 +1,2 @@
+export const FACEBOOK_PATH =
+  "M10.0003 1.69922C5.41699 1.69922 1.66699 5.44089 1.66699 10.0492C1.66699 14.2159 4.71699 17.6742 8.70033 18.2992V12.4659H6.58366V10.0492H8.70033V8.20755C8.70033 6.11589 9.94199 4.96589 11.8503 4.96589C12.7587 4.96589 13.7087 5.12422 13.7087 5.12422V7.18255H12.6587C11.6253 7.18255 11.3003 7.82422 11.3003 8.48255V10.0492H13.617L13.242 12.4659H11.3003V18.2992C13.264 17.9891 15.0522 16.9871 16.3419 15.4743C17.6317 13.9614 18.3381 12.0373 18.3337 10.0492C18.3337 5.44089 14.5837 1.69922 10.0003 1.69922Z";

package/src/icons/Facebook/index.ts

@@ -0,0 +1 @@
+export { FacebookIcon, FACEBOOK_PATH } from "./FacebookIcon";

package/src/icons/Home/HomeIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { HOME_PATH } from "./homePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { HOME_PATH } from "./homePath";
+
+export function HomeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={HOME_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Home/HomeIcon.web.tsx

@@ -0,0 +1,26 @@
+import { HOME_PATH } from "./homePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function HomeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={HOME_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { HOME_PATH } from "./homePath";

package/src/icons/Home/homePath.ts

@@ -0,0 +1,2 @@
+export const HOME_PATH =
+  "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";

package/src/icons/Home/index.ts

@@ -0,0 +1 @@
+export { HomeIcon, HOME_PATH } from "./HomeIcon";

package/src/icons/Icon.tsx

@@ -0,0 +1,11 @@
+import { icons, type IconName } from "./registry";
+import type { IconProps } from "./types";
+
+export interface IconByNameProps extends IconProps {
+  name: IconName;
+}
+
+export function Icon({ name, ...props }: IconByNameProps) {
+  const Component = icons[name];
+  return <Component {...props} />;
+}

package/src/icons/Icons.stories.tsx

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { View, Text, StyleSheet } from "react-native";
+import { colors } from "../theme";
+import { Icon } from "./Icon";
+import {
+  getIconsByGroup,
+  iconGroupNames,
+  iconGroups,
+  iconNames,
+  icons,
+  type IconName,
+} from "./registry";
+
+const meta = {
+  title: "Icons",
+  component: Icon,
+  args: {
+    name: "user",
+    size: 24,
+    color: colors.white,
+    strokeWidth: 2,
+  },
+  argTypes: {
+    name: {
+      control: "select",
+      options: iconNames,
+    },
+    size: { control: { type: "number", min: 12, max: 48, step: 2 } },
+    color: { control: "color" },
+    strokeWidth: { control: { type: "number", min: 1, max: 3, step: 0.5 } },
+  },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function IconGrid({
+  names,
+  size,
+  color,
+  strokeWidth,
+}: {
+  names: readonly IconName[];
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}) {
+  return (
+    <View style={styles.grid}>
+      {names.map((name) => {
+        const Cmp = icons[name];
+        return (
+          <View key={name} style={styles.cell}>
+            <Cmp size={size} color={color} strokeWidth={strokeWidth} />
+            <Text style={styles.label}>{name}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+export const Playground: Story = {};
+
+export const All: Story = {
+  render: (args) => (
+    <View style={styles.sections}>
+      {iconGroupNames.map((group) => (
+        <View key={group} style={styles.section}>
+          <Text style={styles.heading}>{group}</Text>
+          <IconGrid
+            names={iconGroups[group]}
+            size={args.size}
+            color={args.color}
+            strokeWidth={args.strokeWidth}
+          />
+        </View>
+      ))}
+    </View>
+  ),
+};
+
+export const Navigation: Story = {
+  name: "Group / Navigation",
+  render: (args) => (
+    <IconGrid
+      names={getIconsByGroup("navigation")}
+      size={args.size}
+      color={args.color}
+      strokeWidth={args.strokeWidth}
+    />
+  ),
+};
+
+export const Actions: Story = {
+  name: "Group / Actions",
+  render: (args) => (
+    <IconGrid
+      names={getIconsByGroup("actions")}
+      size={args.size}
+      color={args.color}
+      strokeWidth={args.strokeWidth}
+    />
+  ),
+};
+
+export const Objects: Story = {
+  name: "Group / Objects",
+  render: (args) => (
+    <IconGrid
+      names={getIconsByGroup("objects")}
+      size={args.size}
+      color={args.color}
+      strokeWidth={args.strokeWidth}
+    />
+  ),
+};
+
+export const Communication: Story = {
+  name: "Group / Communication",
+  render: (args) => (
+    <IconGrid
+      names={getIconsByGroup("communication")}
+      size={args.size}
+      color={args.color}
+      strokeWidth={args.strokeWidth}
+    />
+  ),
+};
+
+export const Social: Story = {
+  name: "Group / Social",
+  render: (args) => (
+    <IconGrid
+      names={getIconsByGroup("social")}
+      size={args.size}
+      color={args.color}
+      strokeWidth={args.strokeWidth}
+    />
+  ),
+};
+
+const styles = StyleSheet.create({
+  sections: {
+    gap: 32,
+    maxWidth: 520,
+  },
+  section: {
+    gap: 16,
+  },
+  heading: {
+    color: colors.white,
+    fontSize: 14,
+    fontWeight: "600",
+    fontFamily: "Noto Sans Armenian",
+    textTransform: "capitalize",
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 24,
+    maxWidth: 520,
+  },
+  cell: {
+    width: 88,
+    alignItems: "center",
+    gap: 8,
+  },
+  label: {
+    color: colors.white,
+    fontSize: 12,
+    fontFamily: "Noto Sans Armenian",
+  },
+});

package/src/icons/Instagram/InstagramIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { INSTAGRAM_PATH } from "./instagramPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { INSTAGRAM_PATH } from "./instagramPath";
+
+export function InstagramIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path d={INSTAGRAM_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/Instagram/InstagramIcon.web.tsx

@@ -0,0 +1,20 @@
+import { INSTAGRAM_PATH } from "./instagramPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function InstagramIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path d={INSTAGRAM_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { INSTAGRAM_PATH } from "./instagramPath";

package/src/icons/Instagram/index.ts

@@ -0,0 +1 @@
+export { InstagramIcon, INSTAGRAM_PATH } from "./InstagramIcon";

package/src/icons/Instagram/instagramPath.ts

@@ -0,0 +1,2 @@
+export const INSTAGRAM_PATH =
+  "M6.49984 1.66748H13.4998C16.1665 1.66748 18.3332 3.83415 18.3332 6.50081V13.5008C18.3332 14.7827 17.8239 16.0121 16.9175 16.9185C16.0111 17.8249 14.7817 18.3341 13.4998 18.3341H6.49984C3.83317 18.3341 1.6665 16.1675 1.6665 13.5008V6.50081C1.6665 5.21893 2.17573 3.98956 3.08215 3.08313C3.98858 2.17671 5.21796 1.66748 6.49984 1.66748ZM6.33317 3.33415C5.53752 3.33415 4.77446 3.65022 4.21185 4.21283C3.64924 4.77544 3.33317 5.5385 3.33317 6.33415V13.6675C3.33317 15.3258 4.67484 16.6675 6.33317 16.6675H13.6665C14.4622 16.6675 15.2252 16.3514 15.7878 15.7888C16.3504 15.2262 16.6665 14.4631 16.6665 13.6675V6.33415C16.6665 4.67581 15.3248 3.33415 13.6665 3.33415H6.33317ZM14.3748 4.58415C14.6511 4.58415 14.9161 4.69389 15.1114 4.88924C15.3068 5.08459 15.4165 5.34955 15.4165 5.62581C15.4165 5.90208 15.3068 6.16703 15.1114 6.36238C14.9161 6.55773 14.6511 6.66748 14.3748 6.66748C14.0986 6.66748 13.8336 6.55773 13.6383 6.36238C13.4429 6.16703 13.3332 5.90208 13.3332 5.62581C13.3332 5.34955 13.4429 5.08459 13.6383 4.88924C13.8336 4.69389 14.0986 4.58415 14.3748 4.58415ZM9.99984 5.83415C11.1049 5.83415 12.1647 6.27313 12.9461 7.05454C13.7275 7.83594 14.1665 8.89574 14.1665 10.0008C14.1665 11.1059 13.7275 12.1657 12.9461 12.9471C12.1647 13.7285 11.1049 14.1675 9.99984 14.1675C8.89477 14.1675 7.83496 13.7285 7.05356 12.9471C6.27216 12.1657 5.83317 11.1059 5.83317 10.0008C5.83317 8.89574 6.27216 7.83594 7.05356 7.05454C7.83496 6.27313 8.89477 5.83415 9.99984 5.83415ZM9.99984 7.50081C9.3368 7.50081 8.70091 7.76421 8.23207 8.23305C7.76323 8.70189 7.49984 9.33777 7.49984 10.0008C7.49984 10.6639 7.76323 11.2997 8.23207 11.7686C8.70091 12.2374 9.3368 12.5008 9.99984 12.5008C10.6629 12.5008 11.2988 12.2374 11.7676 11.7686C12.2364 11.2997 12.4998 10.6639 12.4998 10.0008C12.4998 9.33777 12.2364 8.70189 11.7676 8.23305C11.2988 7.76421 10.6629 7.50081 9.99984 7.50081Z";

package/src/icons/Key/KeyIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { KEY_PATH } from "./keyPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { KEY_PATH } from "./keyPath";
+
+export function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={KEY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Key/KeyIcon.web.tsx

@@ -0,0 +1,26 @@
+import { KEY_PATH } from "./keyPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={KEY_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { KEY_PATH } from "./keyPath";

package/src/icons/Key/index.ts

@@ -0,0 +1 @@
+export { KeyIcon, KEY_PATH } from "./KeyIcon";

package/src/icons/Key/keyPath.ts

@@ -0,0 +1,2 @@
+export const KEY_PATH =
+  "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";

package/src/icons/LinkedIn/LinkedInIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { LINKEDIN_PATH } from "./linkedinPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { LINKEDIN_PATH } from "./linkedinPath";
+
+export function LinkedInIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path d={LINKEDIN_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/LinkedIn/LinkedInIcon.web.tsx

@@ -0,0 +1,20 @@
+import { LINKEDIN_PATH } from "./linkedinPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export function LinkedInIcon({ size = 20, color = colors.white }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path d={LINKEDIN_PATH} fill={color} />
+    </svg>
+  );
+}
+
+export { LINKEDIN_PATH } from "./linkedinPath";

package/src/icons/LinkedIn/index.ts

@@ -0,0 +1 @@
+export { LinkedInIcon, LINKEDIN_PATH } from "./LinkedInIcon";

package/src/icons/LinkedIn/linkedinPath.ts

@@ -0,0 +1,2 @@
+export const LINKEDIN_PATH =
+  "M15.8333 2.50098C16.2754 2.50098 16.6993 2.67657 17.0118 2.98913C17.3244 3.30169 17.5 3.72562 17.5 4.16764V15.8343C17.5 16.2763 17.3244 16.7003 17.0118 17.0128C16.6993 17.3254 16.2754 17.501 15.8333 17.501H4.16667C3.72464 17.501 3.30072 17.3254 2.98816 17.0128C2.67559 16.7003 2.5 16.2763 2.5 15.8343V4.16764C2.5 3.72562 2.67559 3.30169 2.98816 2.98913C3.30072 2.67657 3.72464 2.50098 4.16667 2.50098H15.8333ZM15.4167 15.4176V11.001C15.4167 10.2805 15.1304 9.58948 14.621 9.08C14.1115 8.57053 13.4205 8.28431 12.7 8.28431C11.9917 8.28431 11.1667 8.71764 10.7667 9.36764V8.44264H8.44167V15.4176H10.7667V11.3093C10.7667 10.6676 11.2833 10.1426 11.925 10.1426C12.2344 10.1426 12.5312 10.2656 12.75 10.4844C12.9687 10.7031 13.0917 10.9999 13.0917 11.3093V15.4176H15.4167ZM5.73333 7.13431C6.10464 7.13431 6.46073 6.98681 6.72328 6.72426C6.98583 6.46171 7.13333 6.10561 7.13333 5.73431C7.13333 4.95931 6.50833 4.32598 5.73333 4.32598C5.35982 4.32598 5.0016 4.47435 4.73749 4.73847C4.47338 5.00258 4.325 5.3608 4.325 5.73431C4.325 6.50931 4.95833 7.13431 5.73333 7.13431ZM6.89167 15.4176V8.44264H4.58333V15.4176H6.89167Z";

package/src/icons/Mail/MailIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { MAIL_PATH } from "./mailPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { MAIL_PATH } from "./mailPath";
+
+export function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={MAIL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}