1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import {StyleSheet, type TextProps} from 'react-native'
import {type PathProps, type SvgProps} from 'react-native-svg'
import {Defs, LinearGradient, Stop} from 'react-native-svg'
import {nanoid} from 'nanoid/non-secure'
import {tokens, useTheme} from '#/alf'
export type Props = {
fill?: PathProps['fill']
style?: TextProps['style']
size?: keyof typeof sizes
gradient?: keyof typeof tokens.gradients
} & Omit<SvgProps, 'style' | 'size'>
export const sizes = {
xs: 12,
sm: 16,
md: 20,
lg: 24,
xl: 28,
'2xl': 32,
} as const
export function useCommonSVGProps(props: Props) {
const t = useTheme()
const {fill, size, gradient, ...rest} = props
const style = StyleSheet.flatten(rest.style)
const _size = Number(size ? sizes[size] : rest.width || sizes.md)
let _fill = fill || style?.color || t.palette.primary_500
let gradientDef = null
if (gradient && tokens.gradients[gradient]) {
const id = gradient + '_' + nanoid()
const config = tokens.gradients[gradient]
_fill = `url(#${id})`
gradientDef = (
<Defs>
<LinearGradient
id={id}
x1="0"
y1="0"
x2="100%"
y2="0"
gradientTransform="rotate(45)">
{config.values.map(([stop, fill]) => (
<Stop key={stop} offset={stop} stopColor={fill} />
))}
</LinearGradient>
</Defs>
)
}
return {
fill: _fill,
size: _size,
style,
gradient: gradientDef,
...rest,
}
}
|
