xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Stephen Zhou 2025-02-24 22:58:50 +08:00 committed by GitHub
parent ea1c666bcd
commit c7256cb331
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/mobile/src/icons/loading_3_cute_li.tsx
View File

@ -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"

3
apps/mobile/src/icons/loading_3_cute_re.tsx
View File

@ -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"

14
apps/mobile/src/icons/round_cute_fi.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react"
import Svg from "react-native-svg"
import Svg, { Circle } from "react-native-svg"
interface RoundCuteFiIconProps {
width?: number
@ -7,6 +7,14 @@ interface RoundCuteFiIconProps {
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>
)
}

14
apps/mobile/src/icons/round_cute_re.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react"
import Svg from "react-native-svg"
import Svg, { Circle } from "react-native-svg"
interface RoundCuteReIconProps {
width?: number
@ -7,6 +7,14 @@ interface RoundCuteReIconProps {
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>
)
}

1
apps/mobile/src/icons/user_setting_cute_fi.tsx
View File

@ -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"

2
package.json
View File

@ -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"

14
scripts/svg-to-rn.ts
View File

@ -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,6 +47,8 @@ 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
@ -52,13 +56,13 @@ const convertSvgToRN = (svgContent: string, componentName: string) => {
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