zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Light icons

zio/stable
Paul Frazee 2022-09-29 10:40:05 -05:00
parent fc776c2652
commit 8ff5f81f24
2 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/view/lib/icons.tsx 100644
View File

@ -0,0 +1,44 @@
import React from 'react'
import {StyleProp, ViewStyle} from 'react-native'
import Svg, {Circle, Line, G, Path} from 'react-native-svg'
export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
const DIM = 4
const ARC = 2
return (
<Svg width="24" height="24" style={style}>
<Path
d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
/>
<Path
d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
/>
<Path
d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
/>
<Path
d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
strokeWidth={2}
stroke="#000"
/>
</Svg>
)
}
export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) {
return (
<Svg viewBox="0 0 48 48" width="24" height="24" style={style}>
<Path
strokeWidth={4}
stroke="#000"
d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
/>
</Svg>
)
}

14
src/view/shell/mobile/index.tsx
View File

@ -33,6 +33,7 @@ import {createBackMenu, createForwardMenu} from './history-menu'
import {createAccountsMenu} from './accounts-menu'
import {createLocationMenu} from './location-menu'
import {s, colors} from '../../lib/styles'
import {GridIcon, HomeIcon} from '../../lib/icons'
import {DEF_AVATER} from '../../lib/assets'
const locationIconNeedsNudgeUp = (icon: IconProp) => icon === 'house'
@ -85,10 +86,19 @@ const Btn = ({
onPress?: (event: GestureResponderEvent) => void
onLongPress?: (event: GestureResponderEvent) => void
}) => {
let IconEl
if (icon === 'bars') {
IconEl = GridIcon
} else if (icon === 'house') {
IconEl = HomeIcon
} else {
IconEl = FontAwesomeIcon
}
if (inactive) {
return (
<View style={styles.ctrl}>
<FontAwesomeIcon
<IconEl
size={21}
style={[styles.ctrlIcon, styles.inactive]}
icon={icon}
@ -101,7 +111,7 @@ const Btn = ({
style={styles.ctrl}
onPress={onPress}
onLongPress={onLongPress}>
<FontAwesomeIcon size={21} style={styles.ctrlIcon} icon={icon} />
<IconEl size={21} style={styles.ctrlIcon} icon={icon} />
</TouchableOpacity>
)
}