Phosphor icons ready for Tamagui. Universal by default.
npm install tamagui-phosphor-icons
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,
},
},
}import {House} from 'tamagui-phosphor-icons'
const Foo = () => <YStack><House/></YStack>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>
)
}All credits go to the amazing Phosphor Icons Team!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent