{"id":19806622,"url":"https://github.com/timnew/react-fa-icon","last_synced_at":"2025-05-01T07:31:01.054Z","repository":{"id":31479713,"uuid":"35043826","full_name":"timnew/react-fa-icon","owner":"timnew","description":"React.js and FontAwesome integration","archived":false,"fork":false,"pushed_at":"2015-05-21T18:46:30.000Z","size":168,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T19:37:33.877Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/timnew/react-fa-icon","language":"JavaScript","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/timnew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-04T15:44:53.000Z","updated_at":"2017-07-28T04:48:09.000Z","dependencies_parsed_at":"2022-09-05T23:01:03.417Z","dependency_job_id":null,"html_url":"https://github.com/timnew/react-fa-icon","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Freact-fa-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Freact-fa-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Freact-fa-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timnew%2Freact-fa-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timnew","download_url":"https://codeload.github.com/timnew/react-fa-icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250477810,"owners_count":21437049,"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":[],"created_at":"2024-11-12T09:08:01.533Z","updated_at":"2025-05-01T07:31:00.815Z","avatar_url":"https://github.com/timnew.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-fa-icon\n=============\n\n`react-fa-icon` help developer to integrate [react.js] with [font-awesome].\n\n## Examples\n\n```jsx\nconst { FaIcon, FaStack } = require('react-fa-icon');\n```\n\n**CAUTION** Font Awesome CSS is not required, it must be included in HTML or via WebPack manually.\n\n### Basic Icons\n\n**HTML**\n```html\n\u003ci class=\"fa fa-camera-retro\"\u003e\u003c/i\u003e\n```\n**JSX**\n```jsx\n\u003cFaIcon icon=\"camera-retro\" /\u003e\n```\n\n### Larger Icons\n\n**HTML**\n```html\n\u003ci class=\"fa fa-camera-retro fa-lg\"\u003e\u003c/i\u003e fa-lg\n\u003ci class=\"fa fa-camera-retro fa-2x\"\u003e\u003c/i\u003e fa-2x\n\u003ci class=\"fa fa-camera-retro fa-3x\"\u003e\u003c/i\u003e fa-3x\n\u003ci class=\"fa fa-camera-retro fa-4x\"\u003e\u003c/i\u003e fa-4x\n\u003ci class=\"fa fa-camera-retro fa-5x\"\u003e\u003c/i\u003e fa-5x\n```\n\n**JSX**\n```jsx\n\u003cFaIcon icon=\"camera-retro\" size=\"lg\" /\u003e\n\u003cFaIcon icon=\"camera-retro\" size=\"2x\" /\u003e\n\u003cFaIcon icon=\"camera-retro\" size=\"3x\" /\u003e\n\u003cFaIcon icon=\"camera-retro\" size=\"4x\" /\u003e\n\u003cFaIcon icon=\"camera-retro\" size=\"5x\" /\u003e\n```\n\n### Fixed Width Icons\n\n**HTML**\n```html\n\u003cdiv\u003e\n  \u003ca href=\"#\"\u003e\u003ci class=\"fa fa-home fa-fw\"\u003e\u003c/i\u003e\u0026nbsp; Home\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003ci class=\"fa fa-book fa-fw\"\u003e\u003c/i\u003e\u0026nbsp; Library\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003ci class=\"fa fa-pencil fa-fw\"\u003e\u003c/i\u003e\u0026nbsp; Applications\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003ci class=\"fa fa-cog fa-fw\"\u003e\u003c/i\u003e\u0026nbsp; Settings\u003c/a\u003e\n\u003c/div\u003e\n```\n\n**JSX**\n```jsx\n\u003cdiv\u003e\n  \u003ca href=\"#\"\u003e\u003cFaIcon icon=\"home\" fixedWidth /\u003e\u0026nbsp; Home\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cFaIcon icon=\"book\" fixedWidth /\u003e\u0026nbsp; Library\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cFaIcon icon=\"pencil\" fixedWidth /\u003e\u0026nbsp; Applications\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cFaIcon icon=\"cog\" fixedWidth /\u003e\u0026nbsp; Settings\u003c/a\u003e\n\u003c/div\u003e\n```\n\n### List Icons\n\n**HTML**\n```html\n\u003cul class=\"fa-ul\"\u003e\n  \u003cli\u003e\u003ci class=\"fa-li fa fa-check-square\"\u003e\u003c/i\u003eList icons\u003c/li\u003e\n  \u003cli\u003e\u003ci class=\"fa-li fa fa-check-square\"\u003e\u003c/i\u003ecan be used\u003c/li\u003e\n  \u003cli\u003e\u003ci class=\"fa-li fa fa-spinner fa-spin\"\u003e\u003c/i\u003eas bullets\u003c/li\u003e\n  \u003cli\u003e\u003ci class=\"fa-li fa fa-square\"\u003e\u003c/i\u003ein lists\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n**JSX**\n```jsx\n\u003cul className=\"fa-ul\"\u003e\n  \u003cli\u003e\u003cFaIcon icon=\"check-square listItem /\u003eList icons\u003c/li\u003e\n  \u003cli\u003e\u003cFaIcon icon=\"check-square listItem /\u003ecan be used\u003c/li\u003e\n  \u003cli\u003e\u003cFaIcon icon=\"spinner\" listItem spin /\u003eas bullets\u003c/li\u003e\n  \u003cli\u003e\u003cFaIcon icon=\"square\" listItem /\u003ein lists\u003c/li\u003e\n\u003c/ul\u003e\n\n```\n\n### Bordered \u0026 Pulled Icons\n\n**HTML**\n```html\n\u003ci class=\"fa fa-quote-left fa-3x pull-left fa-border\"\u003e\u003c/i\u003e\n```\n\n**JSX**\n```jsx\n\u003cFaIcon icon=\"quote-left\" size=\"3x\" pull=\"left\" border\"/\u003e\n```\n\n### Animated Icons\n\n**HTML**\n```html\n\u003ci class=\"fa fa-spinner fa-spin\"\u003e\u003c/i\u003e\n\u003ci class=\"fa fa-circle-o-notch fa-spin\"\u003e\u003c/i\u003e\n\u003ci class=\"fa fa-refresh fa-spin\"\u003e\u003c/i\u003e\n\u003ci class=\"fa fa-cog fa-spin\"\u003e\u003c/i\u003e\n\u003ci class=\"fa fa-spinner fa-pulse\"\u003e\u003c/i\u003e\n```\n\n**JSX**\n```jsx\n\u003cFaIcon icon=\"spinner\" spin /\u003e\n\u003cFaIcon icon=\"circle-o-notch\" spin /\u003e\n\u003cFaIcon icon=\"refresh\" spin /\u003e\n\u003cFaIcon icon=\"cog\" spin /\u003e\n\u003cFaIcon icon=\"spinner\" pulse /\u003e\n```\n\n### Rotated \u0026 Flipped\n\n**HTML**\n```html\n\u003ci class=\"fa fa-shield\"\u003e\u003c/i\u003e normal\u003cbr\u003e\n\u003ci class=\"fa fa-shield fa-rotate-90\"\u003e\u003c/i\u003e fa-rotate-90\u003cbr\u003e\n\u003ci class=\"fa fa-shield fa-rotate-180\"\u003e\u003c/i\u003e fa-rotate-180\u003cbr\u003e\n\u003ci class=\"fa fa-shield fa-rotate-270\"\u003e\u003c/i\u003e fa-rotate-270\u003cbr\u003e\n\u003ci class=\"fa fa-shield fa-flip-horizontal\"\u003e\u003c/i\u003e fa-flip-horizontal\u003cbr\u003e\n\u003ci class=\"fa fa-shield fa-flip-vertical\"\u003e\u003c/i\u003e icon-flip-vertical\n```\n\n**JSX**\n```jsx\n\u003cFaIcon icon=\"shield\" /\u003e\n\u003cFaIcon icon=\"shield\" rotate=\"90\" /\u003e\n\u003cFaIcon icon=\"shield\" rotate=\"180\" /\u003e\n\u003cFaIcon icon=\"shield\" rotate=\"270\" /\u003e\n\u003cFaIcon icon=\"shield\" flip=\"horizontal\" /\u003e\n\u003cFaIcon icon=\"shield\" flip=\"vertical\" /\u003e\n```\n\n### Stacked Icons\n\n**HTML**\n```html\n\u003cspan class=\"fa-stack fa-lg\"\u003e\n  \u003ci class=\"fa fa-square-o fa-stack-2x\"\u003e\u003c/i\u003e\n  \u003ci class=\"fa fa-twitter fa-stack-1x\"\u003e\u003c/i\u003e\n\u003c/span\u003e\n\n\u003cspan class=\"fa-stack fa-lg\"\u003e\n  \u003ci class=\"fa fa-circle fa-stack-2x\"\u003e\u003c/i\u003e\n  \u003ci class=\"fa fa-flag fa-stack-1x fa-inverse\"\u003e\u003c/i\u003e\n\u003c/span\u003e\n\n\u003cspan class=\"fa-stack fa-lg\"\u003e\n  \u003ci class=\"fa fa-square fa-stack-2x\"\u003e\u003c/i\u003e\n  \u003ci class=\"fa fa-terminal fa-stack-1x fa-inverse\"\u003e\u003c/i\u003e\n\u003c/span\u003e\n\n\u003cspan class=\"fa-stack fa-lg\"\u003e\n  \u003ci class=\"fa fa-camera fa-stack-1x\"\u003e\u003c/i\u003e\n  \u003ci class=\"fa fa-ban fa-stack-2x text-danger\"\u003e\u003c/i\u003e\n\u003c/span\u003e\n```\n\n**JSX**\n```jsx\n\u003cFaStack\u003e\n  \u003cFaIcon icon=\"square-o\" stack=\"2x\" /\u003e\n  \u003cFaIcon icon=\"twitter\" stack=\"1x\" /\u003e\n\u003c/FaStack\u003e\n\n\u003cFaStack\u003e\n  \u003cFaIcon icon=\"circle\" stack=\"2x\" /\u003e\n  \u003cFaIcon icon=\"flag\" stack=\"1x\" inverse /\u003e  \n\u003c/FaStack\u003e\n\n\u003cFaStack\u003e\n  \u003cFaIcon icon=\"square\" stack=\"2x\" /\u003e\n  \u003cFaIcon icon=\"terminal\" stack=\"1x\" inverse /\u003e  \n\u003c/FaStack\u003e\n\n\u003cFaStack\u003e  \n  \u003cFaIcon icon=\"camera\" stack=\"1x\"/\u003e  \n  \u003cFaIcon icon=\"ban\" stack=\"2x\" className=\"text-danger\" /\u003e\n\u003c/FaStack\u003e\n```\n\n[react-fa-icon]: https://github.com/timnew/react-fa-icon\n[react.js]: http://facebook.github.io/react/\n[font-awesome]: http://fortawesome.github.io/Font-Awesome/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimnew%2Freact-fa-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimnew%2Freact-fa-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimnew%2Freact-fa-icon/lists"}