{"id":18681720,"url":"https://github.com/stowball/react-native-svg-icon","last_synced_at":"2025-04-05T13:08:17.148Z","repository":{"id":12575003,"uuid":"72279109","full_name":"stowball/react-native-svg-icon","owner":"stowball","description":"A simple, but flexible SVG icon component for React Native","archived":false,"fork":false,"pushed_at":"2022-12-07T01:58:56.000Z","size":1875,"stargazers_count":179,"open_issues_count":8,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T12:11:07.133Z","etag":null,"topics":["react","react-native","svg","svg-icons"],"latest_commit_sha":null,"homepage":"https://medium.com/@stowball/creating-an-svg-icon-system-in-react-native-fa0964ea5fe4","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/stowball.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":"2016-10-29T10:42:52.000Z","updated_at":"2025-03-13T21:36:17.000Z","dependencies_parsed_at":"2023-01-13T17:01:36.593Z","dependency_job_id":null,"html_url":"https://github.com/stowball/react-native-svg-icon","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Freact-native-svg-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Freact-native-svg-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Freact-native-svg-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stowball%2Freact-native-svg-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stowball","download_url":"https://codeload.github.com/stowball/react-native-svg-icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"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":["react","react-native","svg","svg-icons"],"created_at":"2024-11-07T10:09:05.839Z","updated_at":"2025-04-05T13:08:17.121Z","avatar_url":"https://github.com/stowball.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-svg-icon\n\nA simple, but flexible SVG icon component for React Native. [Read the introductory blog post](https://medium.com/@stowball/creating-an-svg-icon-system-in-react-native-fa0964ea5fe4).\n\n[![npm version](https://badge.fury.io/js/react-native-svg-icon.svg)](https://badge.fury.io/js/react-native-svg-icon)\n[![Build Status](https://travis-ci.org/stowball/react-native-svg-icon.svg?branch=master)](https://travis-ci.org/stowball/react-native-svg-icon)\n\n## Installation\n\n1. Ensure sure you've installed [`react-native-svg`](https://github.com/react-native-community/react-native-svg)\n2. `npm i react-native-svg-icon --save`\n\n### NOTICE\n\n* 0.8.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) \u003e= 5.3.0\n* 0.7.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) \u003e= 5.3.0\n* 0.6.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) 4.5.0\n* 0.5.0 - only supports [react-native-svg](https://github.com/react-native-community/react-native-svg) 4.4.x\n\n## Setup\n\n1. Create an object of your SVG icons\n\n    ```js\n    import React from 'react';\n    import { G, Path } from 'react-native-svg';\n\n    // Each nameValuePair can be:\n    // * Name: \u003cSvg /\u003e; or\n    // * Name: { svg: \u003cSvg /\u003e, viewBox: '0 0 50 50' }\n\n    export default {\n        SortArrows: \u003cG\u003e\u003cPath d=\"M0 45h90L45 0 0 45z\"/\u003e\u003cPath d=\"M0 55h90l-45 45L0 55z\"/\u003e\u003c/G\u003e,\n        Tick: {\n            svg: \u003cPath d=\"M38.729 75.688a4.48 4.48 0 0 1-3.21-1.356L16.558 55.004c-1.774-1.807-1.774-4.736-.001-6.543a4.48 4.48 0 0 1 6.42 0l15.753 16.056 37.749-38.474a4.478 4.478 0 0 1 6.419 0c1.773 1.806 1.773 4.736 0 6.543L41.939 74.332a4.48 4.48 0 0 1-3.21 1.356z\"/\u003e,\n            viewBox: '0 0 50 50',\n        },\n    }\n    ```\n\n    To conform to React/JSX standards, we need to convert SVG elements to begin with a capital letter, and convert hyphenated attributes to camelCase. For example. `\u003cpath\u003e` becomes `\u003cPath\u003e` and `stop-color` becomes `stopColor`.\n\n2. Create an `\u003cIcon /\u003e` component as a bridge between react-native-svg-icon's `\u003cSvgIcon /\u003e` which `import`s the above SVGs\n\n    ```js\n    import React from 'react';\n    import SvgIcon from 'react-native-svg-icon';\n    import svgs from './assets/svgs';\n\n    const Icon = (props) =\u003e \u003cSvgIcon {...props} svgs={svgs} /\u003e;\n\n    export default Icon;\n    ```\n\n## Usage\n\nUse your `\u003cIcon /\u003e` in your views.\n\n```js\nimport Icon from './components/Icon';\n\n// Inside some view component\nrender() {\n    return (\n        \u003cFragment\u003e\n          \u003cIcon name=\"SortArrows\" height=\"20\" width=\"20\" /\u003e\n          \u003cIcon name=\"Tick\" fill=\"#0f0\" viewBox=\"0 0 200 200\" /\u003e\n          \u003cIcon name=\"Star\" fill=\"transparent\" stroke=\"#fff\" strokeWidth=\"5\" /\u003e\n        \u003c/Fragment\u003e\n    );\n}\n```\n\n**Pro Tip**: An SVG name suffixed with `'.ios'` or `'.android'` will automatically be rendered on the appropriate platform when passing the base name as the `name` prop.\n\n### Props\n\n#### Default\n\n```js\n{\n    fill: '#000',\n    fillRule: 'evenodd',\n    height: '44',\n    width: '44',\n    viewBox: '0 0 100 100',\n}\n```\n\nThese can be overridden in your `\u003cIcon /\u003e`'s `defaultProps` or an a per instance basis.\n\n#### Types\n\n```js\n{\n    defaultViewBox: string,\n    fill: string.isRequired,\n    fillRule: string,\n    height: oneOfType([number, string]).isRequired,\n    name: string.isRequired,\n    stroke: string,\n    strokeWidth: oneOfType([number, string]),\n    style: oneOfType([array, object]),\n    svgs: object.isRequired,\n    width: oneOfType([number, string]).isRequired,\n    viewBox: string,\n}\n```\n\nThe specificity order for `viewBox` is:\n\n1. `\u003cIcon viewBox /\u003e`\n2. `{ Name: { viewBox: '' } }`\n3. `Icon.defaultProps.defaultViewBox`\n4. `SvgIcon.defaultProps.viewBox`\n\n---\n\nCopyright (c) 2018 [Matt Stow](http://mattstow.com)  \nLicensed under the MIT license *(see [LICENSE](https://github.com/stowball/react-native-svg-icon/blob/master/LICENSE) for details)*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Freact-native-svg-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstowball%2Freact-native-svg-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstowball%2Freact-native-svg-icon/lists"}