Show bold icons in footer based on state
This commit is contained in:
parent
361789975f
commit
362478f793
3 changed files with 136 additions and 9 deletions
|
@ -2,7 +2,13 @@ import React from 'react'
|
|||
import {StyleProp, ViewStyle} from 'react-native'
|
||||
import Svg, {Path} from 'react-native-svg'
|
||||
|
||||
export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
|
||||
export function GridIcon({
|
||||
style,
|
||||
solid,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
solid?: boolean
|
||||
}) {
|
||||
const DIM = 4
|
||||
const ARC = 2
|
||||
return (
|
||||
|
@ -11,25 +17,32 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
|
|||
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"
|
||||
fill={solid ? '#000' : undefined}
|
||||
/>
|
||||
<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"
|
||||
fill={solid ? '#000' : undefined}
|
||||
/>
|
||||
<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"
|
||||
fill={solid ? '#000' : undefined}
|
||||
/>
|
||||
<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"
|
||||
fill={solid ? '#000' : undefined}
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
export function GridIconSolid({style}: {style?: StyleProp<ViewStyle>}) {
|
||||
return <GridIcon style={style} solid />
|
||||
}
|
||||
|
||||
export function HomeIcon({
|
||||
style,
|
||||
|
@ -53,6 +66,29 @@ export function HomeIcon({
|
|||
)
|
||||
}
|
||||
|
||||
export function HomeIconSolid({
|
||||
style,
|
||||
size,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
size?: string | number
|
||||
}) {
|
||||
return (
|
||||
<Svg
|
||||
viewBox="0 0 48 48"
|
||||
width={size || 24}
|
||||
height={size || 24}
|
||||
stroke="currentColor"
|
||||
style={style}>
|
||||
<Path
|
||||
strokeWidth={2}
|
||||
fill="currentColor"
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
// Copyright (c) 2020 Refactoring UI Inc.
|
||||
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
|
||||
export function MangifyingGlassIcon({
|
||||
|
@ -80,6 +116,33 @@ export function MangifyingGlassIcon({
|
|||
)
|
||||
}
|
||||
|
||||
// Copyright (c) 2020 Refactoring UI Inc.
|
||||
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
|
||||
export function MangifyingGlassIconSolid({
|
||||
style,
|
||||
size,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
size?: string | number
|
||||
}) {
|
||||
return (
|
||||
<Svg
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={3}
|
||||
stroke="currentColor"
|
||||
width={size || 24}
|
||||
height={size || 24}
|
||||
style={style}>
|
||||
<Path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
// https://github.com/Remix-Design/RemixIcon/blob/master/License
|
||||
export function BellIcon({
|
||||
style,
|
||||
|
@ -104,6 +167,30 @@ export function BellIcon({
|
|||
)
|
||||
}
|
||||
|
||||
// https://github.com/Remix-Design/RemixIcon/blob/master/License
|
||||
export function BellIconSolid({
|
||||
style,
|
||||
size,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
size?: string | number
|
||||
}) {
|
||||
return (
|
||||
<Svg
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || 24}
|
||||
height={size || 24}
|
||||
style={style}>
|
||||
<Path fill="none" d="M0 0h24v24H0z" />
|
||||
<Path
|
||||
fill="currentColor"
|
||||
d="M 20 17 L 22 17 L 22 19 L 2 19 L 2 17 L 4 17 L 4 10 C 4 3.842 10.667 -0.007 16 3.072 C 18.475 4.501 20 7.142 20 10 L 20 17 Z M 9 21 L 15 21 L 15 23 L 9 23 L 9 21 Z"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Copyright (c) 2020 Refactoring UI Inc.
|
||||
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
|
||||
export function UserGroupIcon({
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue