{"id":19815641,"url":"https://github.com/duongdev/phosphor-react-native","last_synced_at":"2025-05-15T11:06:30.853Z","repository":{"id":37619751,"uuid":"408566051","full_name":"duongdev/phosphor-react-native","owner":"duongdev","description":"phosphor-icons for react-native. A flexible icon family for React Native","archived":false,"fork":false,"pushed_at":"2025-03-05T10:56:45.000Z","size":6951,"stargazers_count":217,"open_issues_count":3,"forks_count":28,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-13T00:37:51.392Z","etag":null,"topics":["icons","phosphoricons","react","react-native","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/phosphor-react-native","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/duongdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-20T18:57:57.000Z","updated_at":"2025-05-03T02:46:51.000Z","dependencies_parsed_at":"2022-07-12T16:34:03.113Z","dependency_job_id":"d8b9baf9-9a87-4a24-b04e-21041aeb0e1d","html_url":"https://github.com/duongdev/phosphor-react-native","commit_stats":{"total_commits":53,"total_committers":7,"mean_commits":7.571428571428571,"dds":0.3207547169811321,"last_synced_commit":"bcc9e2f842ecdeac84b76f91fbddb36f41103a29"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duongdev%2Fphosphor-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duongdev%2Fphosphor-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duongdev%2Fphosphor-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duongdev%2Fphosphor-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/duongdev","download_url":"https://codeload.github.com/duongdev/phosphor-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icons","phosphoricons","react","react-native","svg","svg-icons"],"created_at":"2024-11-12T10:06:40.837Z","updated_at":"2025-05-15T11:06:30.831Z","avatar_url":"https://github.com/duongdev.png","language":"TypeScript","readme":"\u003cimg src=\"/meta/phosphor-mark-tight-yellow.png\" width=\"128\" align=\"right\" /\u003e\n\n# phosphor-react-native\n\nPhosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at [phosphoricons.com](https://phosphoricons.com).\nInspired by [phosphor-react](https://github.com/phosphor-icons/phosphor-react).\n\n\u003ctable\u003e\n\u003ctr\u003e\n\t\u003ctd\u003e\u003cimg src=\"/meta/example-regular.png\" /\u003e\n\t\u003ctd\u003e\u003cimg src=\"/meta/example-bold.png\" /\u003e\n\t\u003ctd\u003e\u003cimg src=\"/meta/example-fill.png\" /\u003e\n\u003ctr\u003e\n\t\u003ctd\u003e\u003cimg src=\"/meta/example-duotone.png\" /\u003e\n\t\u003ctd\u003e\u003cimg src=\"/meta/example-thin.png\" /\u003e\n\t\u003ctd\u003e\u003cimg src=\"/meta/example-light.png\" /\u003e\n\u003c/table\u003e\n\n## Installation\n\n```bash\nyarn add phosphor-react-native react-native-svg\n```\n\nor\n\n```bash\nnpm install --save phosphor-react-native react-native-svg\n```\n\n## Usage\n\nSimply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use.\n\n```tsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport { Horse, Heart, Cube } from 'phosphor-react-native';\n\nconst App = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cHorse /\u003e\n      \u003cHeart color=\"#AE2983\" weight=\"fill\" size={32} /\u003e\n      \u003cCube color=\"teal\" weight=\"duotone\" /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n### Typescript support\nIf you get this error...\n```\nProperty 'className' does not exist on type 'IntrinsicAttributes \u0026 IntrinsicClassAttributes\u003cSvg\u003e \u0026 Pick\u003cReadonly\u003cSvgProps\u003e, \"children\" | \"style\" | ... 144 more ... | \"fontVariationSettings\"\u003e \u0026 InexactPartial\u003c...\u003e \u0026 InexactPartial\u003c...\u003e'\n```\nAdd this code to your `global.d.ts` file\n```ts\nimport type { SvgProps as DefaultSvgProps } from 'react-native-svg';\n\ndeclare module 'react-native-svg' {\n  interface SvgProps extends DefaultSvgProps {\n    className?: string;\n  }\n}\n```\n\n### Props\n\nIcon components accept all props that you can pass to a normal SVG element, including inline `style` objects, `onClick` handlers, and more. The main way of styling them will usually be with the following props:\n\n- **color?**: `string` – Icon stroke/fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors.\n- **size?**: `number | string` – Icon height \u0026 width. As with standard React elements, this can be a number, or a string with units in `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`.\n- **weight?**: `\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\"` – Icon weight/style. Can also be used, for example, to \"toggle\" an icon's state: a rating component could use Stars with `weight=\"regular\"` to denote an empty star, and `weight=\"fill\"` to denote a filled star.\n- **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.\n- **title?**: `string` – Accessibility label\n- **titleId?**: `string` – Accessibility label ID\n- **testID?**: `string` – testID for tests\n- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black.\n- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2.\n\n### Context\n\nPhosphor takes advantage of React Context to make applying a default style to all icons simple. Create an `IconContext.Provider` at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:\n\n```tsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport { IconContext, Horse, Heart, Cube } from 'phosphor-react-native';\n\nconst App = () =\u003e {\n  return (\n    \u003cIconContext.Provider\n      value={{\n        color: 'limegreen',\n        size: 32,\n        weight: 'bold',\n      }}\n    \u003e\n      \u003cView\u003e\n        \u003cHorse /\u003e {/* I'm lime-green, 32px, and bold! */}\n        \u003cHeart /\u003e {/* Me too! */}\n        \u003cCube /\u003e {/* Me three :) */}\n      \u003c/View\u003e\n    \u003c/IconContext.Provider\u003e\n  );\n};\n```\n\nYou may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.\n\n### Imports\n\nYou may wish to import all icons at once for use in your project, though depending on your bundler this could prevent tree-shaking and make your app's bundle larger.\n\n```tsx\nimport * as Icon from \"phosphor-react-native\";\n...\n\u003cIcon.Smiley /\u003e\n\u003cIcon.Folder weight=\"thin\" /\u003e\n\u003cIcon.BatteryHalf size=\"24px\" /\u003e\n\u003cIcon.AirplaneTakeoff size=\"24px\" mirrored={true} /\u003e\n```\n\nIn cases where tree shaking does not work (resulting in large bundle size), you can import icons individually in this format:\n\n```tsx\n// Javascript\nimport Star from \"phosphor-react-native/lib/commonjs/icons/Star\";\n\n// Typescript\nimport Star from 'phosphor-react-native/src/icons/Star';\n\n\u003cStar size=\"24px\" /\u003e\n```\n\n## Related Projects\n\n- [phosphor-home](https://github.com/phosphor-icons/phosphor-home) ▲ Phosphor homepage and general info\n- [phosphor-react](https://github.com/phosphor-icons/phosphor-react) ▲ Phosphor icon component library for React\n- [phosphor-vue](https://github.com/phosphor-icons/phosphor-vue) ▲ Phosphor icon component library for Vue\n- [phosphor-icons](https://github.com/phosphor-icons/phosphor-icons) ▲ Phosphor icons for Vanilla JS\n- [phosphor-flutter](https://github.com/phosphor-icons/phosphor-flutter) ▲ Phosphor IconData library for Flutter\n- [phosphor-webcomponents](https://github.com/phosphor-icons/phosphor-webcomponents) ▲ Phosphor icons as Web Components\n- [phosphor-figma](https://github.com/phosphor-icons/phosphor-figma) ▲ Phosphor icons Figma plugin\n- [phosphor-sketch](https://github.com/phosphor-icons/phosphor-sketch) ▲ Phosphor icons Sketch plugin\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduongdev%2Fphosphor-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduongdev%2Fphosphor-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduongdev%2Fphosphor-react-native/lists"}