Phosphor Tamagui Icons

Phosphor icons ready for Tamagui. Universal by default.

Installation

npm install tamagui-phosphor-icons

next.config.js

If you are using Next please add these fields to your config:

1  /** @type {import('next').NextConfig} */
2  let config = {
3    transpilePackages: [
4      'solito',
5      'react-native-web',
6      'expo-linking',
7      'expo-constants',
8      'expo-modules-core',
9      // this line!!
10      'tamagui-phosphor-icons',
11    ],
12    // ...
13    modularizeImports: {
14      'tamagui-phosphor-icons': {
15        transform: 'tamagui-phosphor-icons/dist/jsx/icons/icons/{{member}}',
16        skipDefaultConversion: true,
17      },
18    },
19  }

Usage

1import {House} from 'tamagui-phosphor-icons'
2
3const Foo = () => <YStack><House/></YStack>

Context

You can optionally wrap your app in an icon provider to default the weights and colors for all icons. The color property takes any token you have created. You can override this setting at each call-site.

1import { IconContextProvider } from 'tamagui-phosphor-icons'
2
3const App = () => {
4
5  return (
6    <TamaguiProvider
7      config={config}
8      disableInjectCSS
9      defaultTheme="light"
10    >
11      <IconContextProvider value={{ weight: 'regular', color: '$primary.500' }}>
12        {children}
13      </IconContextProvider>
14    </TamaguiProvider>
15  )
16}

Credits

All credits go to the amazing Phosphor Icons Team!