{"id":13475956,"url":"https://github.com/aeirola/react-native-svg-app-icon","last_synced_at":"2025-03-27T01:30:43.465Z","repository":{"id":34900621,"uuid":"183749257","full_name":"aeirola/react-native-svg-app-icon","owner":"aeirola","description":"Generate all app icons for you React Native apps from a single SVG file","archived":false,"fork":false,"pushed_at":"2023-03-17T05:44:55.000Z","size":1979,"stargazers_count":173,"open_issues_count":17,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-22T00:05:02.915Z","etag":null,"topics":["app-icon","react-native","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-svg-app-icon","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/aeirola.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-04-27T08:43:53.000Z","updated_at":"2024-04-10T23:45:29.000Z","dependencies_parsed_at":"2024-01-16T07:23:18.715Z","dependency_job_id":"a6b7fd87-16bb-4b31-968f-603de01c634c","html_url":"https://github.com/aeirola/react-native-svg-app-icon","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeirola%2Freact-native-svg-app-icon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeirola%2Freact-native-svg-app-icon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeirola%2Freact-native-svg-app-icon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeirola%2Freact-native-svg-app-icon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeirola","download_url":"https://codeload.github.com/aeirola/react-native-svg-app-icon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245217795,"owners_count":20579297,"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":["app-icon","react-native","svg"],"created_at":"2024-07-31T16:01:25.090Z","updated_at":"2025-03-27T01:30:41.935Z","avatar_url":"https://github.com/aeirola.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-svg-app-icon\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Android adaptive icon\"\n    align=\"middle\"\n    src=\"src/__tests__/fixtures/example/icon.svg\" /\u003e\n  \u003cimg alt=\"iOS icon\"\n    align=\"middle\"\n    src=\"src/__tests__/fixtures/example/ios/example/Images.xcassets/AppIcon.appiconset/iphone-29@3x.png\" /\u003e\n  \u003cimg alt=\"Android legacy square icon\"\n    align=\"middle\"\n    src=\"src/__tests__/fixtures/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png\" /\u003e\n  \u003cimg alt=\"Android legacy round icon\"\n    align=\"middle\"\n    src=\"src/__tests__/fixtures/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png\" /\u003e\n\u003c/p\u003e\n\n![Build Status](https://github.com/aeirola/react-native-svg-app-icon/actions/workflows/main.yml/badge.svg?branch=master)\n\nCLI tool for generating all the necessary iOS and Android application launcher icons for React Native projects from a single SVG source file. Features include:\n\n- iOS PNG icon generation\n- Android 8.0, and higher, vector drawable adaptive icon generation with PNG fallback\n- Android 7.1 legacy circular icon generation\n- Android 7.0, and lower, legacy square icon generation\n\nFor more information about the generated files, see the [docs](docs/generated_files.md).\n\n:curly_loop: If you also want to use SVG images within your React Native application, you might want to check out [react-native-svg-asset-plugin](https://github.com/aeirola/react-native-svg-asset-plugin).\n\n## Installation\n\n```bash\nnpm install --save-dev react-native-svg-app-icon\n```\n\nSVG rendering handled by the splendid [`sharp`](https://github.com/lovell/sharp) library, meaning no dependencies outside of npm is required.\n\nRequires node version 12, or later.\n\n## Usage\n\nPlace your square 108x108 SVG app icon file named `icon.svg` in the project root and run\n\n```bash\nnpx react-native-svg-app-icon\n```\n\nThis will generate all the required icons under the `android/` and `ios/` directories.\n\n### Icon background\n\nIf you want to use a separate background layer for Android adaptive icons, or because your source icon file doesn't contain a background, you can create an `icon-background.svg` file which will be used as the background layer for the generated icons.\n\nIn case you want to produce both foreground and background layers from a single SVG file, you can use [svg-deconstruct](https://github.com/not-fred/svg-deconstruct) to split layers to separate files. See configuration section below on how to specify input file paths.\n\n## Configuration\n\nBehaviour can be configured in the `app.json` under the `svgAppIcon` field. For example if you want to store icon layers under an `icon/` directory, you might want to use:\n\n```json\n{\n  \"name\": \"example\",\n  \"displayName\": \"example\",\n  \"svgAppIcon\": {\n    \"foregroundPath\": \"./icon/icon-foreground.svg\",\n    \"backgroundPath\": \"./icon/icon-background.svg\",\n    \"platforms\": [\"ios\"],\n    \"force\": false,\n    \"androidOutputPath\": \"./android/app/src/main/res\",\n    \"iosOutputPath\": \"./ios/MyAppName/Images.xcassets/AppIcon.appiconset\"\n  }\n}\n```\n\nSupported configuration values are\n\n| Field               | Default                                              | Description                                                                                                                                                     |\n| ------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `foregroundPath`    | `\"./icon.svg\"`                                       | Input file path for the foreground layer. File needs to exist, and may contain transparency.                                                                    |\n| `backgroundPath`    | `\"./icon-background.svg\"`                            | Input file path for the background layer. File doesn't need to exist, and will default to a fully white background. If file exist, it needs to be fully opaque. |\n| `platforms`         | `[\"android\", \"ios\"]`                                 | Array of platforms for which application launcher icons should be generated. Possible values are `android` and `ios`.                                           |\n| `force`             | `false`                                              | When `true`, output files will always be written even if they are newer than the input files.                                                                   |\n| `androidOutputPath` | `./android/app/src/main/res`                         | Where to place generated Android icons, can be used for flavor-specific icon generation                                                                         |\n| `iosOutputPath`     | `./ios/*/Images.xcassets/AppIcon.appiconset`         | Where to place generated iOS icons, defaults to `AppIcon.appiconset` in first `Images.xcassets` found as a sub-sub-directory in `./ios`                         |\n\nAlternatively, the configuration parameters can also be set as CLI flags. See `react-native-svg-app-icon --help` for details.\n\n## Icon format\n\nThe input icon should be a SVG file adhering to the [Android adaptive icon specification](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive). Specifically, the image should:\n\n- Be a valid SVG image\n- have a 1:1 aspect ratio\n- Have a size of 108x108dp\n\nof which the:\n\n- Center 72x72dp square is the normally visible area\n- Center 66dp diameter circle is the safe area which will always be visible\n\nWith the various icons cropped according to the following image\n\n![Icon copping anatomy](cropping.svg)\n\n- ![#444](https://placehold.it/15/444?text=+) Overflow area\n- ![#666](https://placehold.it/15/666?text=+) Visible area\n- ![#888](https://placehold.it/15/888?text=+) iOS / Android legacy square crop\n- ![#AAA](https://placehold.it/15/AAA?text=+) Android legacy circular crop\n- ![#CCC](https://placehold.it/15/CCC?text=+) Safe area\n- ![#F00](https://placehold.it/15/F00?text=+) Icon keylines\n\nFor an example icon file, see [`example/icon.svg`](example/icon.svg).\n\n## Rationale\n\nReact Native aims to provide tools for building cross platform native mobile applications using technologies familiar from web development. Since the core tooling doesn't provide a solution for building the laundher icons for those applications, this tool aims to fill that gap.\n\nLuckily, most icons follow a similar structure of a foreground shape on a background, which is easily adapted to different shapes and sizes. This is the idea behind Android [Adaptive Icons](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive), and what the [Android Image Asset Studio](https://developer.android.com/studio/write/image-asset-studio) implements nicely for generating leagy icons. This tool can actually be though of as a NPM CLI port of the Image Asset Studio, with added support for generating iOS icons as well.\n\n### Other work\n\nMost existing solutions are centered around the idea of scaling PNG images.\n\n- [Expo](https://docs.expo.io/versions/latest/guides/app-icons/): Scales PNG files generating the required iOS and Android variants, but requires users to supply platform specific PNGs in order to adhere to platform icon design guidelines.\n- [app-icon](https://github.com/dwmkerr/app-icon): Similar to Expo, with some added features such as labeling the icons. Requires imagemagick.\n\n## Troubleshooting\n\n### Supported SVG features\n\nMost common SVG features are supported, including masks and styles. The underlying SVG rendering library is [`librsvg`](https://developer.gnome.org/rsvg/stable/rsvg.html) which claims to support most SVG 1.1 features, excluding scripts, animations and SVG fonts.\n\n## Future improvements\n\n- Add generation of Android notification icons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeirola%2Freact-native-svg-app-icon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeirola%2Freact-native-svg-app-icon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeirola%2Freact-native-svg-app-icon/lists"}