fix(mobile): svg circle support (#2874)

Author: hyoban

apps/mobile/src/icons/loading_3_cute_li.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import Svg, { Path } from "react-native-svg"
+import Svg, { Circle, Path } from "react-native-svg"
 
 interface Loading3CuteLiIconProps {
   width?: number
@@ -14,6 +14,7 @@ export const Loading3CuteLiIcon = ({
 }: Loading3CuteLiIconProps) => {
   return (
     <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Circle cx={12} cy={12} r={9} stroke={color} strokeWidth={1.5} opacity={0.1} />
       <Path
         stroke={color}
         strokeLinecap="round"

apps/mobile/src/icons/loading_3_cute_re.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import Svg, { Path } from "react-native-svg"
+import Svg, { Circle, Path } from "react-native-svg"
 
 interface Loading3CuteReIconProps {
   width?: number
@@ -14,6 +14,7 @@ export const Loading3CuteReIcon = ({
 }: Loading3CuteReIconProps) => {
   return (
     <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Circle cx={12} cy={12} r={9} stroke={color} strokeWidth={2} opacity={0.1} />
       <Path
         stroke={color}
         strokeLinecap="round"

apps/mobile/src/icons/round_cute_fi.tsx

@@ -1,12 +1,20 @@
 import * as React from "react"
-import Svg from "react-native-svg"
+import Svg, { Circle } from "react-native-svg"
 
 interface RoundCuteFiIconProps {
   width?: number
   height?: number
   color?: string
 }
 
-export const RoundCuteFiIcon = ({ width = 24, height = 24 }: RoundCuteFiIconProps) => {
-  return <Svg width={width} height={height} fill="none" viewBox="0 0 24 24" />
+export const RoundCuteFiIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: RoundCuteFiIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Circle cx={12} cy={12} r={10} fill={color} />
+    </Svg>
+  )
 }

apps/mobile/src/icons/round_cute_re.tsx

@@ -1,12 +1,20 @@
 import * as React from "react"
-import Svg from "react-native-svg"
+import Svg, { Circle } from "react-native-svg"
 
 interface RoundCuteReIconProps {
   width?: number
   height?: number
   color?: string
 }
 
-export const RoundCuteReIcon = ({ width = 24, height = 24 }: RoundCuteReIconProps) => {
-  return <Svg width={width} height={height} fill="none" viewBox="0 0 24 24" />
+export const RoundCuteReIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: RoundCuteReIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Circle cx={12} cy={12} r={9} stroke={color} strokeWidth={2} />
+    </Svg>
+  )
 }

apps/mobile/src/icons/user_setting_cute_fi.tsx

@@ -14,7 +14,6 @@ export const UserSettingCuteFiIcon = ({
 }: UserSettingCuteFiIconProps) => {
   return (
     <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
-      <Path fill="#fff" fillOpacity={0.01} d="M24 0v24H0V0z" />
       <Path
         fill={color}
         d="M11 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10M11 13c-2.395 0-4.575.694-6.178 1.672-.8.488-1.484 1.064-1.978 1.69C2.358 16.976 2 17.713 2 18.5c0 .845.411 1.511 1.003 1.986.56.45 1.299.748 2.084.956C6.665 21.859 8.771 22 11 22c.23 0 .46-.002.685-.005a1 1 0 0 0 .89-1.428A5.973 5.973 0 0 1 12 18c0-1.252.383-2.412 1.037-3.373a1 1 0 0 0-.72-1.557c-.43-.046-.87-.07-1.317-.07M20.616 15.469a1 1 0 1 0-1.732-1l-.336.582a2.995 2.995 0 0 0-1.097-.001l-.335-.581a1 1 0 1 0-1.732 1l.335.58a2.997 2.997 0 0 0-.547.951H14.5a1 1 0 0 0 0 2h.671a3.021 3.021 0 0 0 .549.95l-.336.581a1 1 0 1 0 1.732 1l.336-.581c.359.066.73.068 1.097 0l.335.581a1 1 0 1 0 1.732-1l-.335-.58c.242-.284.426-.607.547-.951h.672a1 1 0 1 0 0-2h-.671a3.029 3.029 0 0 0-.549-.95z"

package.json

@@ -44,7 +44,7 @@
     "reinstall": "rm -rf node_modules && rm -rf apps/**/node_modules && rm -rf packages/**/node_modules && pnpm install",
     "start": "electron-vite preview",
     "sync:ab": "tsx scripts/pull-ab-flags.ts",
-    "sync:icons": "tsx scripts/svg-to-rn.ts && prettier --write apps/mobile/src/icons/**/*.tsx",
+    "sync:icons": "tsx scripts/svg-to-rn.ts && prettier --write apps/mobile/src/icons/**/*.tsx && eslint --fix apps/mobile/src/icons/**/*.tsx",
     "test": "cross-env CI=1 pnpm --recursive run test",
     "typecheck": "turbo typecheck",
     "update:main-hash": "tsx plugins/vite/generate-main-hash.ts"

scripts/svg-to-rn.ts

@@ -13,7 +13,7 @@ interface SvgNode {
   children?: SvgNode[]
 }
 
-const generatePathElement = (node: SvgNode): string => {
+const generateElement = (node: SvgNode): string => {
   const props = Object.entries(node.properties)
     .map(([key, value]) => {
       const camelKey = key.replaceAll(/-([a-z])/g, (_match, p1: string) => p1.toUpperCase())
@@ -33,7 +33,9 @@ const generatePathElement = (node: SvgNode): string => {
     })
     .join(" ")
 
-  return `      <Path ${props} />`
+  const tagName = `${node.tagName.charAt(0).toUpperCase()}${node.tagName.slice(1)}`
+
+  return `      <${tagName} ${props} />`
 }
 
 const isPureBackgroundPath = (node: any) => {
@@ -45,20 +47,22 @@ const isPureBackgroundPath = (node: any) => {
   )
 }
 
+const supportedTags = new Set(["path", "circle"])
+
 const convertSvgToRN = (svgContent: string, componentName: string) => {
   const ast = parse(svgContent)
   const svgNode = ast.children[0] as SvgNode
   const { width, height } = svgNode.properties
 
   const pathElements =
     svgNode.children
-      ?.filter((child) => child.tagName === "path")
+      ?.filter((child) => supportedTags.has(child.tagName))
       .filter((child) => !isPureBackgroundPath(child))
-      .map((node) => generatePathElement(node))
+      .map((node) => generateElement(node))
       .join("\n") ?? ""
 
   return `import * as React from "react"
-import Svg, { Path } from "react-native-svg"
+import Svg, { Circle, Path } from "react-native-svg"
 
 interface ${componentName}Props {
   width?: number