src/view/screens/Storybook/Icons.tsx


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

import React from 'react'
import {View} from 'react-native'

import {atoms as a, useTheme} from '#/alf'
import {H1} from '#/components/Typography'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight'
import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'

export function Icons() {
  const t = useTheme()
  return (
    <View style={[a.gap_md]}>
      <H1>Icons</H1>

      <View style={[a.flex_row, a.gap_xl]}>
        <Globe size="xs" fill={t.atoms.text.color} />
        <Globe size="sm" fill={t.atoms.text.color} />
        <Globe size="md" fill={t.atoms.text.color} />
        <Globe size="lg" fill={t.atoms.text.color} />
        <Globe size="xl" fill={t.atoms.text.color} />
      </View>

      <View style={[a.flex_row, a.gap_xl]}>
        <ArrowTopRight size="xs" fill={t.atoms.text.color} />
        <ArrowTopRight size="sm" fill={t.atoms.text.color} />
        <ArrowTopRight size="md" fill={t.atoms.text.color} />
        <ArrowTopRight size="lg" fill={t.atoms.text.color} />
        <ArrowTopRight size="xl" fill={t.atoms.text.color} />
      </View>

      <View style={[a.flex_row, a.gap_xl]}>
        <CalendarDays size="xs" fill={t.atoms.text.color} />
        <CalendarDays size="sm" fill={t.atoms.text.color} />
        <CalendarDays size="md" fill={t.atoms.text.color} />
        <CalendarDays size="lg" fill={t.atoms.text.color} />
        <CalendarDays size="xl" fill={t.atoms.text.color} />
      </View>
    </View>
  )
}