feat: use svg in brandpill (might need some adjusting, but looks fine)

apps/expo/modules/check-ios-certificate/index.ts

@@ -1,5 +1,3 @@
-// Import the native module. On web, it will be resolved to CheckIosCertificate.web.ts
-// and on native platforms to CheckIosCertificate.ts
 import CheckIosCertificateModule from "./src/CheckIosCertificateModule";
 
 interface CheckIosCertificateModule {

apps/expo/src/components/BrandPill.tsx

@@ -1,8 +1,9 @@
-import { Image, Text, View } from "tamagui";
+import { Text, useTheme, View } from "tamagui";
 
-import Icon from "../../assets/images/icon-transparent.png";
+import { MovieWebSvg } from "./Icon";
 
 export function BrandPill() {
+  const theme = useTheme();
   return (
     <View
       flexDirection="row"
@@ -19,8 +20,12 @@ export function BrandPill() {
         scale: 1.05,
       }}
     >
-      <Image source={Icon} height={20} width={20} />
-      <Text fontSize="$4" fontWeight="$bold" paddingRight={5}>
+      <MovieWebSvg
+        fillColor={theme.tabBarIconFocused.val}
+        width={12}
+        height={12}
+      />
+      <Text fontSize="$4" fontWeight="$bold" paddingRight={5} paddingLeft={3}>
         movie-web
       </Text>
     </View>

apps/expo/src/components/Icon.tsx

@@ -1,12 +1,25 @@
 import React from "react";
 import Svg, { G, Path } from "react-native-svg";
 
-export const MovieWebSvg = ({ fillColor }: { fillColor?: string }) => {
+export const MovieWebSvg = ({
+  fillColor,
+  height = 24,
+  width = 24,
+}: {
+  fillColor?: string;
+  height?: number;
+  width?: number;
+}) => {
   const svgPath =
     "M18.186,4.5V6.241H16.445V4.5H9.482V6.241H7.741V4.5H6V20.168H7.741V18.427H9.482v1.741h6.964V18.427h1.741v1.741h1.741V4.5Zm-8.7,12.186H7.741V14.945H9.482Zm0-3.482H7.741V11.464H9.482Zm0-3.482H7.741V7.982H9.482Zm8.7,6.964H16.445V14.945h1.741Zm0-3.482H16.445V11.464h1.741Zm0-3.482H16.445V7.982h1.741Z";
 
   return (
-    <Svg width="24" height="24" viewBox="0 0 20.927 20.927" fill={fillColor}>
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 20.927 20.927"
+      fill={fillColor}
+    >
       <G transform="translate(10.018 -7.425) rotate(45)">
         <Path d={svgPath} />
       </G>