React native support?

[rishabh876]

Is react native supported? If so can we add the integration steps in the documentation.
Usually font icons works on react native using react native vector icons library. But Phosphor icon support is not there yet.

[rektdeckard]

The icons are implemented as react svg elements, which aren't directly supported in React Native. A library like react-native-svg could get us there pretty easily, but it would call for its own repo. We'll look into supporting in the near future.

If you care to do any work toward it, I can stub out a repo in this org which you can contribute to.

[italomlp]

While Phosphor is not officially supported in react-native, you can just add the Phosphor.ttf file as an asset to react-native, like you do with any other custom font, and use the custom font option of vector-icons. Specifically, you should use the IcoMoon custom font option. The Phosphor.json file is the IcoMoon config, and you can use it like this:

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import phosphorConfig from '_assets/icons/Phosphor.json';
const VectorIcon = createIconSetFromIcoMoon(
  phosphorConfig,
  'Phosphor',
  'Phosphor.ttf'
);

function PhosphorIcon({ name, size, color, ...props }) {
  return <VectorIcon size={size} name={name} color={color} {...props} />;
}

PhosphorIcon.propTypes = {
  name: PropTypes.string.isRequired,
  size: PropTypes.number,
  color: PropTypes.string,
};

PhosphorIcon.defaultProps = {
  size: 24,
  color: '#fff',
};

export default PhosphorIcon

The Phosphor.ttf and Phosphor.json files are present in the zip available in the download option of the Phosphor website homepage.

Edit: By using this way, the Duotone icons do not work. To use them, you should use react-native-svg as @rektdeckard said before. All the others variations are available as a dash-separated name (AKA kebab-case) + variant name (or nothing if you are using the regular one). E.g.: HouseLine = house-line, NumberSquareTwo (bold variant) = number-square-two-bold

[rektdeckard]

@italomlp this is essentially what we do in phosphor-flutter, with the main drawbacks of not having duotone, no tree-shaking (font files and json are pretty big), and the inherent limitations of using fonts. If we were to provide our own react-native implementation, I'd want it to be SVG.

[italomlp]

@rektdeckard of course, you should use the best option to provide all features from Phosphor, I totally agree! But for now, for those who want to use the basic, react-native-vector-icons with custom fonts is a great option. We are still talking about it here in the job. If we will use svg, maybe we could make a PR to contribute to Phosphor too. I'll come back if it's the case.

[Choyeongdeok]

@italomlp I tried it, but got an error Unrecognized font family 'Phosphor'

I added phosphor.ttf in ios/Fonts, Phosper.json in assets/

and added

< key > UIAppFonts </ key >
< array >
< string >Phosphor.ttf</ string >
</ array >
in info.plist and did pod install

Did I miss anything?

[duongdev]

I've just released https://github.com/duongdev/phosphor-react-native. Same API to this lib. Try it guys.

Contribution is welcomed.