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:

  /** @type {import('next').NextConfig} */
  let config = {
    transpilePackages: [
      'solito',
      'react-native-web',
      'expo-linking',
      'expo-constants',
      'expo-modules-core',
      // this line!!
      'tamagui-phosphor-icons',
    ],
    // ...
    modularizeImports: {
      'tamagui-phosphor-icons': {
        transform: 'tamagui-phosphor-icons/dist/jsx/icons/icons/{{member}}',
        skipDefaultConversion: true,
      },
    },
  }

Usage

import {House} from 'tamagui-phosphor-icons'

const 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.

import { IconContextProvider } from 'tamagui-phosphor-icons'

const App = () => {

  return (
    <TamaguiProvider
      config={config}
      disableInjectCSS
      defaultTheme="light"
    >
      <IconContextProvider value={{ weight: 'regular', color: '$primary.500' }}>
        {children}
      </IconContextProvider>
    </TamaguiProvider>
  )
}

Credits

All credits go to the amazing Phosphor Icons Team!