{"id":13452165,"url":"https://github.com/godaddy/svgs","last_synced_at":"2025-07-27T10:20:54.110Z","repository":{"id":44917878,"uuid":"76280642","full_name":"godaddy/svgs","owner":"godaddy","description":"svgs is a compatiblity layer between svg and react-native-svg","archived":false,"fork":false,"pushed_at":"2023-11-28T16:40:51.000Z","size":395,"stargazers_count":191,"open_issues_count":11,"forks_count":31,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-10-01T07:29:12.549Z","etag":null,"topics":["react","react-native","react-native-svg","react-native-web","svg"],"latest_commit_sha":null,"homepage":"","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/godaddy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-12T17:44:02.000Z","updated_at":"2024-07-27T13:57:31.000Z","dependencies_parsed_at":"2024-06-18T14:06:58.025Z","dependency_job_id":null,"html_url":"https://github.com/godaddy/svgs","commit_stats":{"total_commits":73,"total_committers":13,"mean_commits":5.615384615384615,"dds":"0.36986301369863017","last_synced_commit":"f5f9d34e9a89e12a21d12b1852a543822428ddc4"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Fsvgs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Fsvgs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Fsvgs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/godaddy%2Fsvgs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/godaddy","download_url":"https://codeload.github.com/godaddy/svgs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221900727,"owners_count":16898986,"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","react-native-svg","react-native-web","svg"],"created_at":"2024-07-31T07:01:15.524Z","updated_at":"2024-10-28T18:30:41.451Z","avatar_url":"https://github.com/godaddy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# svgs [![Version npm](https://img.shields.io/npm/v/svgs.svg?style=flat-square)](https://www.npmjs.com/package/svgs)[![Build Status](https://img.shields.io/travis/godaddy/svgs/master.svg?style=flat-square)](https://travis-ci.org/godaddy/svgs)[![Dependencies](https://img.shields.io/david/godaddy/svgs.svg?style=flat-square)](https://david-dm.org/godaddy/svgs)[![Coverage Status](https://img.shields.io/coveralls/godaddy/svgs/master.svg?style=flat-square)](https://coveralls.io/r/godaddy/svgs?branch=master)\n\n![](logo.png)\n\nThe `svgs` module is compatibility layer between `react-native-svg` and regular\n`react` (browser) based SVG elements. This allows you to write SVG in the react\nand react-native using exactly the same API. Bringing your applications a step\ncloser to writing fully isomorphic application.\n\nThe library itself is written in ES6 and comes with the correct babel\ntransforms as dependencies so it's easy to integrate in your existing tool\nchains and webpack builds.\n\nThere are 2 ways in using this package, you could use `svgs` instead of\n`react-native-svg` which is recommended. But you could also instruct your\nWebPack builder to use `svgs` as an alias for `react-native-svg`.\n\n## Table of Contents\n\n- [Install](#install)\n- [WebPack](#webpack)\n- [API](#api)\n- [Example](#example)\n- [Accessibility](#accessibility)\n- [License](#license)\n\n## Install\n\nFor regular react usage:\n\n```\nnpm install --save svgs\n```\n\nFor React-Native usage:\n\n```\nnpm install --save svgs\nnpm install --save react-native-svg\nreact-native link react-native-svg\n```\n\nWord of caution, make sure that you install a `react-native-svg` version that\nworks with your `react-native` version. See the [react-native-svg](https://github.com/react-native-community/react-native-svg#notice)\nproject for a list of supported React versions.\n\n## WebPack\n\nTo use this package as alias for `react-native-svg` you need to update your\nWebPack configuration to include the following snippet:\n\n```\nresolve: {\n  alias: {\n    ...\n    'react-native-svg': 'svgs',\n  }\n}\n```\n\n## API\n\nThe API that we expose is exactly the same as the `react-native-svg` project so\nplease visit: https://github.com/react-native-community/react-native-svg for the\nfull API documentation. But here is a quick little overview of the available\nelements:\n\n```js\nimport Svg, {\n  Circle,\n  ClipPath,\n  Defs,\n  Ellipse,\n  G,\n  Image,\n  Line,\n  LinearGradient,\n  Mask,\n  Path,\n  Pattern,\n  Polygon,\n  Polyline,\n  RadialGradient,\n  Rect,\n  Stop,\n  Svg,\n  Symbol,\n  TSpan,\n  Text,\n  TextPath,\n  Use\n} from 'svgs';\n```\n\nAny incompatibilities should be seen as a bug and be reported in the\n[svgs/issue](https://github.com/godaddy/svgs/issues) page on Github.\n\n#### Example\n\nImport all the SVG elements and make a Twitter logo.\n\n```js\nimport React, { Component } from 'react';\nimport Svg, { Path } from 'svgs';\n\nclass Twitter extends Component {\n  render() {\n    return (\n      \u003cSvg height='1208' width='1000' viewbox='0 0 1000 1208.3' preserveAspectRatio='meet'\u003e\n        \u003cPath fill='#000' d='M0 1007.9q139.6 92.1 305.8 92.1 76.7 0 146.9-18.1 70.2-18.1 126.5-50 56.2-31.9 103.9-75.6 47.7-43.8 82.5-95.7 34.8-51.8 59.2-108.9 24.4-57.1 36.5-116.3 12-59.1 12-117.5 0-17.9-0.4-26.6 13.4-10 42.1-25.5 28.8-15.4 51-30.8 22.3-15.4 34-33.3-15.8 7.1-41.5 10-25.6 2.9-56.4 3.7-30.8 0.9-44.2 2.5 34.6-21.6 69.2-58.1 34.6-36.5 45-69.8-31.3 19.2-76.3 38.3-45 19.2-77 25.9-28-30.4-65.7-47.5-37.7-17.1-79.8-17.1-54.1 0-100.2 27.5-46 27.5-72.7 74.6-26.6 47.1-26.6 102.5 0 24.1 5 46.6-122.5-6.6-229.4-63.1-106.9-56.4-181.9-150.6-26.7 46.7-26.7 102.9 0 52.1 23.8 97.1 23.7 45 64.6 72.9-48.4-1.2-90-25.4l0 2.5q0 73.7 45.4 130.2 45.4 56.5 114.6 70.2-25 7.5-52.5 7.5-19.2 0-37.9-3.7 19.1 61.6 70.4 101.2 51.2 39.6 116.2 40.8-108.7 87.5-247.9 87.5-25.8 0-47.5-2.9z' /\u003e\n      \u003c/Svg\u003e\n    );\n  }\n}\n```\n\n#### Accessibility\n\nIf you want Section 508 Accessibility add the `title` prop to the `\u003cSvg /\u003e` component like this:\n```js\n\u003cSvg title=\"Image Description\" width=\"1000\" height=\"1000\" ... /\u003e\n```\nWhen this renders on native, you'll get your SVG wrapped in a View with an accessibilityLabel.\nOn web, the SVG element will get two aria labels and a `\u003ctitle\u003e` element that are\nrequired for accessibility.\n```html\n\u003csvg role=\"img\" aria-label=\"[title]\" width=\"1000\" height=\"1000\"\u003e\n  \u003ctitle\u003eImage Description\u003c/title\u003e\n  ...\n\u003c/svg\u003e\n```\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgodaddy%2Fsvgs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgodaddy%2Fsvgs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgodaddy%2Fsvgs/lists"}