├── .github └── workflows │ └── build.yml ├── .gitignore ├── .husky └── pre-push ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── adjust-svg.ts ├── all-combinations.test.ts ├── bin.ts ├── case.ts ├── templates.ts └── transformer.ts ├── tests ├── components │ ├── with-native-for-typescript │ │ ├── SVGClean.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithStroke.tsx │ │ └── SVGWithStyleAndData.tsx │ ├── with-native-for-typescript_allow-override-fill │ │ ├── SVGClean.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithStroke.tsx │ │ └── SVGWithStyleAndData.tsx │ ├── with-native-for-typescript_remove-fill │ │ ├── SVGClean.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithStroke.tsx │ │ └── SVGWithStyleAndData.tsx │ ├── with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill │ │ ├── SVGClean.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithStroke.tsx │ │ └── SVGWithStyleAndData.tsx │ ├── with-native-for-typescript_remove-stroke │ │ ├── SVGClean.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithStroke.tsx │ │ └── SVGWithStyleAndData.tsx │ ├── with-native-for-typescript_with-web-for-typescript │ │ ├── SVGClean.tsx │ │ ├── SVGClean.web.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGEdgeCaseWidth.web.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGMatrixNegative.web.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGPctUnit.web.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSimple.web.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGSketchExport.web.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithFill.web.tsx │ │ ├── SVGWithStroke.tsx │ │ ├── SVGWithStroke.web.tsx │ │ ├── SVGWithStyleAndData.tsx │ │ └── SVGWithStyleAndData.web.tsx │ ├── with-native │ │ ├── SVGClean.js │ │ ├── SVGEdgeCaseWidth.js │ │ ├── SVGMatrixNegative.js │ │ ├── SVGPctUnit.js │ │ ├── SVGSimple.js │ │ ├── SVGSketchExport.js │ │ ├── SVGWithFill.js │ │ ├── SVGWithStroke.js │ │ └── SVGWithStyleAndData.js │ ├── with-native_with-web │ │ ├── SVGClean.js │ │ ├── SVGClean.web.js │ │ ├── SVGEdgeCaseWidth.js │ │ ├── SVGEdgeCaseWidth.web.js │ │ ├── SVGMatrixNegative.js │ │ ├── SVGMatrixNegative.web.js │ │ ├── SVGPctUnit.js │ │ ├── SVGPctUnit.web.js │ │ ├── SVGSimple.js │ │ ├── SVGSimple.web.js │ │ ├── SVGSketchExport.js │ │ ├── SVGSketchExport.web.js │ │ ├── SVGWithFill.js │ │ ├── SVGWithFill.web.js │ │ ├── SVGWithStroke.js │ │ ├── SVGWithStroke.web.js │ │ ├── SVGWithStyleAndData.js │ │ └── SVGWithStyleAndData.web.js │ ├── with-web-for-typescript │ │ ├── SVGClean.tsx │ │ ├── SVGEdgeCaseWidth.tsx │ │ ├── SVGMatrixNegative.tsx │ │ ├── SVGPctUnit.tsx │ │ ├── SVGSimple.tsx │ │ ├── SVGSketchExport.tsx │ │ ├── SVGWithFill.tsx │ │ ├── SVGWithStroke.tsx │ │ └── SVGWithStyleAndData.tsx │ └── with-web │ │ ├── SVGClean.js │ │ ├── SVGEdgeCaseWidth.js │ │ ├── SVGMatrixNegative.js │ │ ├── SVGPctUnit.js │ │ ├── SVGSimple.js │ │ ├── SVGSketchExport.js │ │ ├── SVGWithFill.js │ │ ├── SVGWithStroke.js │ │ └── SVGWithStyleAndData.js └── fixtures │ ├── clean.svg │ ├── edge-case-width.svg │ ├── matrix-negative.svg │ ├── pct-unit.svg │ ├── simple.svg │ ├── sketch-export.svg │ ├── with-fill.svg │ ├── with-stroke.svg │ └── with-style-and-data.svg └── tsconfig.json /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | pull_request: 5 | branches: [main] 6 | push: 7 | branches: [main] 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - uses: actions/checkout@v4 15 | 16 | - name: Use Node.js 17 | uses: actions/setup-node@v4 18 | with: 19 | node-version-file: "package.json" 20 | cache: "npm" 21 | 22 | - name: Handle Next.js Cache 23 | uses: actions/cache@v4 24 | with: 25 | path: .next/cache 26 | key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }} 27 | restore-keys: | 28 | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}- 29 | 30 | - name: Install dependencies 31 | run: npm ci 32 | 33 | - name: Test 34 | run: npm run test 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # macos crap 2 | .DS_Store 3 | 4 | # node 5 | node_modules 6 | 7 | # build 8 | dist 9 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | npm test 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog of `react-from-svg` 2 | 3 | ## 8.0.0 - 2025-04-29 4 | 5 | - Add new `--allow-override-fill` option 6 | - Add `{props.children}` injection so you can inject stuff in your svg (eg: `` that can be used with `--allow-override-fill`) 7 | 8 | Check the README for an example. 9 | 10 | ## 7.1.2 - 2025-04-29 11 | 12 | - Fix unnecessary `.web` suffix presence for web only exports 13 | 14 | ## 7.1.1 - 2025-04-08 15 | 16 | - Fix title & desc removal if there are attributes 17 | 18 | ## 7.1.0 - 2025-04-08 19 | 20 | - Add transform for `style="..."` as object 21 | - Fix support for `data-*` and `aria-*`attributes (no transformation) 22 | 23 | ## 7.0.1 - 2025-04-04 24 | 25 | - Fixed: issue with dash to camel case transforming incorrectly negative number 26 | 27 | ## 7.0.0 - 2025-04-03 28 | 29 | Rewritten in TypeScript. 30 | ReScript support as been removed (but feel free to add it back via a PR). 31 | 32 | - Remove `--commonjs` option 33 | - Remove `--with-*-for-rescript` options 34 | - Add `--with-web-for-typescript` option for DOM with TypeScript 35 | 36 | ## 6.0.0 - 2023-01-17 37 | 38 | - Add `--with-native-for-typescript` option for `react-native-svg` with TypeScript 39 | 40 | ## 5.1.3 - 2022-08-18 41 | 42 | - Handle `gradientTransform` for ReScript 43 | - Handle float without leading 0 for ReScript 44 | 45 | ## 5.1.2 - 2021-08-18 46 | 47 | - Fix style prop generation 48 | 49 | ## 5.1.1 - 2021-08-18 50 | 51 | - Fix published files 52 | 53 | ## 5.1.0 - 2021-08-18 54 | 55 | - Add support for style prop 56 | 57 | ## 5.0.3 - 2021-07-07 58 | 59 | - Fix negative number transformation for ReScript output. 60 | 61 | ## 5.0.2 - 2021-05-05 62 | 63 | - Fix \*-rescript options, round 2 64 | - Adjust a bit rescript output 65 | 66 | ## 5.0.1 - 2021-05-05 67 | 68 | Fix \*-rescript options 69 | 70 | ## 5.0.0 - 2021-05-05 71 | 72 | ### Breaking change for all users 73 | 74 | Some alias have been replaced. Please check the README for more information. 75 | 76 | ### Breaking change for user of `--with-**-reason` options 77 | 78 | ReasonML output has been replaced by ReScript. This means: 79 | 80 | - `--with-native-for-reason` has been replaced by `--with-native-for-rescript` 81 | - `--with-web-for-reason` has been replaced by `--with-web-for-rescript` 82 | 83 | Output is now ReScript code that works with `@rescript/react`, `rescript-react-native` and `@rescript-react-native/svg`. 84 | 85 | See for more informations. 86 | 87 | ## 4.0.6 - 2020-08-08 88 | 89 | - `--with-native-for-reason`: Fixed unwanted props transformation (eg: opacity) [b69604f](https://github.com/MoOx/react-from-svg/commit/b69604f) by [@MoOx](https://github.com/MoOx) 90 | 91 | ## 4.0.5 - 2020-08-08 92 | 93 | - `--with-native-for-reason`: Fixed untransformed `offset` prop for `Stop` component [cdcbf0e](https://github.com/MoOx/react-from-svg/commit/cdcbf0e) by [@MoOx](https://github.com/MoOx) 94 | 95 | ## 4.0.4 - 2020-07-15 96 | 97 | - Add missing `Stop` component [#15](https://github.com/MoOx/react-from-svg/pull/15) by [@Naturalclar](https://github.com/Naturalclar) 98 | 99 | ## 4.0.3 - 2020-06-11 100 | 101 | - `--with-native`: Fix JS output error "Error: Text strings must be rendered within a `` [#14](https://github.com/MoOx/react-from-svg/pull/14) by [@Freddy03h](https://github.com/Freddy03h) 102 | 103 | ## 4.0.2 - 2020-05-01 104 | 105 | - `--with-native-for-reason`: Fix 4.0.1 regression where size is undefined 106 | 107 | ## 4.0.1 - 2020-04-16 108 | 109 | - `--with-native-for-reason`: Avoid bucklescript shadow warnings for `ReactNative.Style.size` by [@MoOx](https://github.com/MoOx) 110 | 111 | ## 4.0.0 - 2020-04-16 112 | 113 | In addition to some fixes, this release introduce a breaking change for the CLI. 114 | Now you must use one of the `--with-*` options options to have output for you desired platform/language: 115 | 116 | - `--with-native`: Output code using React Native & `react-native-svg` (compatible with React Native Web) 117 | - `--with-web`: Output code using React DOM. If `--with-native` is also used, will be output as `.web.js` files 118 | - `--with-native-for-reason`: Output code for Reason React Native & `@reason-react-native/svg` 119 | - `--with-web-for-reason`: Output code for Reason React DOM 120 | 121 | CLI has also been improved a little to be more gentle & can offer some `--help`. 122 | 123 | Also, now, no `postinstall` step are necessary for this package as we ship a bundled version. 124 | 125 | ### 💥 Breaking Changes 126 | 127 | - Add `--with-native`, & `--with-web` options ([070a85f](https://github.com/MoOx/react-from-svg/commit/070a85f)) by [@MoOx](https://github.com/MoOx) 128 | - Remove `--with-reason` & `--bs-module-path` ([8034065](https://github.com/MoOx/react-from-svg/commit/8034065)) by [@MoOx](https://github.com/MoOx) 129 | This change make sense as you can now directly output reason code that are directly svgs, not just bindings (see `--with*-for-reason` new options). 130 | - Add `--with-native-for-reason`, `--with-web-for-reason` ([8034065](https://github.com/MoOx/react-from-svg/commit/8034065)) by [@MoOx](https://github.com/MoOx) 131 | - File are now renamed to pascale case (eg: `some-file.svg` become `SVGSomeFile.*`) ([c62989f](https://github.com/MoOx/react-from-svg/commit/c62989f)) by [@MoOx](https://github.com/MoOx) 132 | 133 | ### 🐛 BugFixes 134 | 135 | - Fix `strokeLinejoin`, `strokeLinecap` & `strokeMiterlimit` props ([#8](https://github.com/MoOx/react-from-svg/pull/8)) by [@Freddy03h](https://github.com/Freddy03h) 136 | - Fix incorrect replacement for width/height/fill incorrectly removed ([4533c64](https://github.com/MoOx/react-from-svg/commit/4533c64)) by [@MoOx](https://github.com/MoOx) 137 | 138 | ### 🎉 New 139 | 140 | - Add `--remove-stroke` option + `stroke` component prop ([#8](https://github.com/MoOx/react-from-svg/pull/8)) by [@Freddy03h](https://github.com/Freddy03h) 141 | - Add `--commonjs` ([070a85f](https://github.com/MoOx/react-from-svg/commit/070a85f)) by [@MoOx](https://github.com/MoOx) 142 | 143 | ### 🚧 Notable Internal changes 144 | 145 | - We now serve the package as a bundle bin to avoid `bs-platform` build on postinstall + artifacts issues ([ed6262c](https://github.com/MoOx/react-from-svg/commit/ed6262c)) by [@MoOx](https://github.com/MoOx) 146 | - Codebase covered by tests (via snapshots) by [@MoOx](https://github.com/MoOx) 147 | - Upgrade to bs-platform 7.2 ([#7](https://github.com/MoOx/react-from-svg/pull/7)) by [@broerjuang](https://github.com/broerjuang) 148 | 149 | ## 3.1.0 - 2020-02-18 150 | 151 | - Fix TSpan import error ([#6](https://github.com/MoOx/react-from-svg/pull/6)) by [@broerjuang](https://github.com/broerjuang) 152 | - bump bs-platform to 7.1.0 ([#6](https://github.com/MoOx/react-from-svg/pull/6)) by [@broerjuang](https://github.com/broerjuang) 153 | 154 | ## 3.0.0 - 2020-01-23 155 | 156 | - Fixed reason generated module name to the js 157 | - `--reason-absolute-path` is now `--reason-module-path` & can support absolute and local path 158 | 159 | ## 2.1.1 - 2020-01-23 160 | 161 | - oopsy path 162 | 163 | ## 2.1.0 - 2020-01-23 164 | 165 | - Add `--reason-absolute-path` option for reason files ([#4](https://github.com/MoOx/react-from-svg/pull/4)) by [@Freddy03h](https://github.com/Freddy03h) 166 | - Fix fill reason type by [@MoOx](https://github.com/MoOx) 167 | 168 | ## 2.0.1 - 2020-01-22 169 | 170 | - Try to autorebuild if compiled artifacts are missing 171 | 172 | ## 2.0.0 - 2020-01-22 173 | 174 | - Try to load compiled transformer differently (not in-source as it's the recommended place - to avoid issue with existing bs compilation, which can override & break nodejs script due to not using commonjs). 175 | - Use bs-platform@^7.0.0 176 | 177 | We might in the future rebuild script before running it. 178 | 179 | ## 1.2.3 - 2020-01-03 180 | 181 | - Fix unwanted whitespace that create text nodes 182 | 183 | ## 1.2.2 - 2020-01-03 184 | 185 | - Fix removal of ` 4 | Sponsoring button 5 | 6 | 7 | [![GitHub package.json version](https://img.shields.io/github/package-json/v/MoOx/react-from-svg) ![npm downloads](https://img.shields.io/npm/dm/react-from-svg)](https://www.npmjs.com/package/react-from-svg) 8 | [![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/MoOx/react-from-svg/build.yml?branch=main)](https://github.com/MoOx/react-from-svg/actions) 9 | [![License](https://img.shields.io/github/license/MoOx/react-from-svg)](https://github.com/MoOx/react-from-svg) 10 | [![GitHub followers](https://img.shields.io/github/followers/MoOx?style=social&label=Follow%20me)](https://github.com/MoOx) 11 | [![LinkedIn Follow](https://img.shields.io/badge/Follow%20Me-on%20LinkedIn-gray?style=social&logo=invision&logoColor=%230077B5)](https://www.linkedin.com/in/maxthirouin/) 12 | [![BlueSky Follow](https://img.shields.io/badge/Follow%20Me-on%20BlueSky-gray?style=social&logo=bluesky)](https://bsky.app/profile/moox.io) 13 | [![X Follow](https://img.shields.io/twitter/follow/MoOx?style=social&label=Follow%20me)](https://x.com/MoOx) 14 | 15 | > Transform SVG files into React components, Native and/or Web, JavaScript and/or TypeScript. 16 | > Without minimal dependencies. 17 | 18 | ## Install 19 | 20 | ```console 21 | npm install react-from-svg 22 | ``` 23 | 24 | ## Usage 25 | 26 | ```console 27 | react-from-svg --help 28 | 29 | Usage 30 | $ react-from-svg [--with-native|--with-web] 31 | 32 | Options 33 | --with-native, -rn Output code for react-native-svg 34 | --with-native-for-typescript, -rnts Output code for react-native-svg with TypeScript 35 | --with-web, -rnw Output code for DOM. If --with-native is also used, will be output as .web.js files 36 | --with-web-for-typescript, -rnwts Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files 37 | --remove-fill, -rf Remove all 'fill' properties from SVGs, convenient for icons 38 | --remove-stroke, -rs Remove all 'stroke' properties from SVGs, convenient for icons 39 | --allow-override-fill, -aof --allow-override-fill, -aof Replace all 'fill' properties by a dynamic prop (fills) in SVGs, e.g. fill={fills[N]}. 40 | 41 | Example 42 | $ react-from-svg src/svgs src/svgs/components --with-web-for-typescript --allow-override-fill 43 | ``` 44 | 45 | Generated components will allow you to inject all the props you could use on an ``/``, such as: 46 | 47 | - `width` 48 | - `height` 49 | - `fill` (if you use `--remove-fill`) 50 | - `stroke` (if you use `--remove-stroke`) 51 | - `style` 52 | 53 | ⚠️ To see what you can expect from the transformations, [check our snapshots](./tests/) 👀 54 | 55 | ## Requirements 56 | 57 | ### `--with-web(-*)` 58 | 59 | Need you to have: 60 | 61 | - [React](https://reactjs.org) 62 | 63 | Note: if you use [React Native for Web](https://github.com/necolas/react-native-web), see requirements below. 64 | 65 | ### `--with-native(-*)` 66 | 67 | Need you to have: 68 | 69 | - [React](https://reactjs.org) 70 | - [React Native](https://reactnative.dev) (or an alternative platform like 71 | [React Native Web](https://github.com/necolas/react-native-web)) 72 | - [`react-native-svg`](https://github.com/react-native-community/react-native-svg) 73 | 74 | ## Options 75 | 76 | ### `--remove-fill` 77 | 78 | Remove all `fill` properties from SVGs, convenient for icons. 79 | 80 | ### `--remove-stroke` 81 | 82 | Remove all `stroke` properties from SVGs, convenient for icons. 83 | 84 | ### `--allow-override-fill` 85 | 86 | Replace all `fill` properties by a dynamic prop (fills) in SVGs, e.g. fill={fills[N]}. 87 | If `fills[N]` is undefined, fallback to the original value (except if `--remove-fill` is used). Useful to dynamically control icon color(s). 88 | 89 | ## Examples 90 | 91 | ### Usage with `--allow-override-fill` and children 92 | 93 | When using `--allow-override-fill`, you can pass children to the component to override the fill(s). 94 | You can for example update a black SVG path to one using a gradient. 95 | 96 | Assuming you have a SVG in `src/svgs/logo.svg`, let's generate an SVG component : 97 | 98 | ```console 99 | react-from-svg src/svgs src/svgs/components --with-web-for-typescript 100 | ``` 101 | 102 | You should have an SVG component in `src/svgs/components/SVGLogo.tsx`. 103 | 104 | Now let's boost this SVG component to use a gradient. 105 | 106 | ```tsx 107 | import SVGLogo from "@/src/svgs/components/SVGLogo"; 108 | import { colors } from "@/src/tokens.stylex"; // your colors could be just a simple object 109 | 110 | const logoGradientId = "logo-gradient-id"; 111 | export default function LogoWithGradient() { 112 | return ( 113 | 114 | 115 | 116 | 117 | 118 | 119 | ); 120 | } 121 | ``` 122 | 123 | That's it. You started from a simple single color SVG path and ended up with a gradient SVG path. 124 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-from-svg", 3 | "description": "Transform SVG files into React components, Native and/or Web, JavaScript and TypeScript. Without shitload of dependencies.", 4 | "version": "8.0.0", 5 | "license": "MIT", 6 | "repository": "https://github.com/MoOx/react-from-svg", 7 | "type": "module", 8 | "exports": "./dist/bin.js", 9 | "keywords": [ 10 | "react-native-svg", 11 | "react-native-web", 12 | "react-native", 13 | "react", 14 | "svg-to-react", 15 | "svg", 16 | "svgr-cli", 17 | "svgr" 18 | ], 19 | "engines": { 20 | "node": "^22.0.0" 21 | }, 22 | "bin": { 23 | "react-from-svg": "./dist/bin.js" 24 | }, 25 | "files": [ 26 | "dist", 27 | "!dist/**.test.js" 28 | ], 29 | "scripts": { 30 | "prepare": "husky", 31 | "build": "tsc", 32 | "format:generated": "prettier --write tests/components", 33 | "test:build:all": "node dist/all-combinations.test.js", 34 | "test": "npm run build && npm run test:build:all", 35 | "prepublishOnly": "npm run build", 36 | "release": "npmpub" 37 | }, 38 | "dependencies": { 39 | "camelcase": "^8.0.0", 40 | "glob": "^11.0.1", 41 | "meow": "^13.2.0", 42 | "mkdirp": "^3.0.1" 43 | }, 44 | "devDependencies": { 45 | "@types/react": "^19.1.0", 46 | "husky": "^9.1.7", 47 | "npmpub": "^5.0.0", 48 | "prettier": "^3.5.3", 49 | "react": "^19.1.0", 50 | "react-native-svg": "^15.11.2", 51 | "typescript": "^5.8.0" 52 | }, 53 | "prettier": { 54 | "trailingComma": "all" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/adjust-svg.ts: -------------------------------------------------------------------------------- 1 | import { toCamel, toPascal } from "./case.js"; 2 | 3 | const tagsToRemove = ["title", "desc"]; 4 | 5 | const cleanupStart = (svg: string): string => { 6 | let result = svg 7 | .replace(/'/g, '"') 8 | .replace(/\sversion="1.1"/g, "") 9 | .replace(/<\?xml(.*)\?>/g, "") 10 | .replace(/\sxmlns="http:\/\/www\.w3\.org\/2000\/svg"/g, "") 11 | .replace(/\sxmlns:xlink="http:\/\/www.w3.org\/1999\/xlink"/g, "") 12 | .replace(//g, ""); 13 | 14 | // Remove tags with or without attributes 15 | tagsToRemove.forEach((tag) => { 16 | result = result.replace(new RegExp(`<${tag}[^>]*>.*?<\/${tag}>`, "gs"), ""); 17 | }); 18 | 19 | return result; 20 | }; 21 | 22 | const prepareSvgProps = (svg: string): string => { 23 | return svg 24 | .replace(/]*)?\swidth="[^"]*"/g, "]*)?\sheight="[^"]*"/g, "]*)?\sfill="[^"]*"/g, " { 30 | // Inject {...props} and {props.children} just after the opening tag of or 31 | // 1. Inject {...props} as before 32 | // 2. Immediately after, inject {props.children} 33 | // This ensures that children can be injected by React 34 | return svg 35 | .replace(/(\{\.\.\.props\}>)/, "$1{props.children}") 36 | .replace(/(>)/, " {...props}>{props.children}"); 37 | }; 38 | 39 | const dashToCamelCaseProps = (svg: string): string => { 40 | return svg.replace(/\s([a-z][a-z-]+[a-z])/g, (match, p1) => { 41 | if (p1.startsWith("data-") || p1.startsWith("aria-")) { 42 | return match; 43 | } 44 | return " " + toCamel(p1); 45 | }); 46 | }; 47 | 48 | const tagToPascalCase = (svg: string): string => { 49 | return svg.replace( 50 | /<(\/?)([a-z])/g, 51 | (_, p1, p2) => "<" + (p1 + toPascal(p2)), 52 | ); 53 | }; 54 | 55 | const cleanupEndWithoutSpace = (svg: string): string => { 56 | return svg.replace(/>\s+<"); 57 | }; 58 | 59 | const deleteFill = (svg: string): string => { 60 | return svg.replace(/ fill="[^"]*"/g, ""); 61 | }; 62 | 63 | const deleteStroke = (svg: string): string => { 64 | return svg.replace(/ stroke="[^"]*"/g, ""); 65 | }; 66 | 67 | const transformStyleAttributes = (svg: string): string => { 68 | return svg.replace(/ style="([^"]*)"/g, (_, styleContent) => { 69 | const styleObject = styleContent 70 | .split(";") 71 | .filter(Boolean) 72 | .map((style: string) => { 73 | const [property, value] = style.split(":").map((s: string) => s.trim()); 74 | return `"${toCamel(property)}": "${value}"`; 75 | }) 76 | .join(", "); 77 | 78 | return ` style={{${styleObject}}}`; 79 | }); 80 | }; 81 | 82 | // Replace each existing fill with fill={fills[N]} (N = index of occurrence) 83 | // If fills[N] is strictly undefined, keep the original value unless removeFill is true, then fallback to undefined 84 | function allowOverrideFillWithProp( 85 | svg: string, 86 | removeFill: boolean = false, 87 | ): string { 88 | let fillIndex = 0; 89 | return svg.replace( 90 | /(<(?!svg)[^\s>]+)([^>]*?)\sfill="([^"]*)"([^>]*>)/g, 91 | function ( 92 | match: string, 93 | startTag: string, 94 | beforeFill: string, 95 | fillValue: string, 96 | afterFill: string, 97 | ) { 98 | const idx = fillIndex++; 99 | // If removeFill: no fallback to the original value 100 | // Otherwise: fallback to the original value 101 | const fallback = removeFill ? "undefined" : `"${fillValue}"`; 102 | return `${startTag}${beforeFill} fill={typeof fills !== 'undefined' && typeof fills[${idx}] !== 'undefined' ? fills[${idx}] : ${fallback}}${afterFill}`; 103 | }, 104 | ); 105 | } 106 | 107 | export { 108 | cleanupStart, 109 | prepareSvgProps, 110 | injectSvgJsProps, 111 | dashToCamelCaseProps, 112 | tagToPascalCase, 113 | cleanupEndWithoutSpace, 114 | deleteFill, 115 | deleteStroke, 116 | transformStyleAttributes, 117 | allowOverrideFillWithProp, 118 | }; 119 | -------------------------------------------------------------------------------- /src/all-combinations.test.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import { execSync } from "node:child_process"; 4 | import { mkdirSync, existsSync, rmSync } from "node:fs"; 5 | import path from "node:path"; 6 | import { fileURLToPath } from "node:url"; 7 | 8 | const __filename = fileURLToPath(import.meta.url); 9 | const __dirname = path.dirname(__filename); 10 | 11 | const optionalFlags = [ 12 | { name: "remove-fill", alias: "rf", bool: true }, 13 | { name: "remove-stroke", alias: "rs", bool: true }, 14 | { name: "allow-override-fill", alias: "aof", bool: true, value: '["#f00"]' }, 15 | ]; 16 | 17 | // Create specific core combinations as requested 18 | const coreCombinations = [ 19 | [{ name: "with-native", alias: "rn", bool: true }], 20 | 21 | [{ name: "with-web", alias: "rnw", bool: true }], 22 | 23 | [ 24 | { name: "with-native", alias: "rn", bool: true }, 25 | { name: "with-web", alias: "rnw", bool: true }, 26 | ], 27 | 28 | [{ name: "with-native-for-typescript", alias: "rnts", bool: true }], 29 | 30 | [{ name: "with-web-for-typescript", alias: "rnwts", bool: true }], 31 | 32 | [ 33 | { name: "with-native-for-typescript", alias: "rnts", bool: true }, 34 | { name: "with-web-for-typescript", alias: "rnwts", bool: true }, 35 | ], 36 | ]; 37 | 38 | // Helper function to generate combinations of other options with with-native-for-typescript 39 | function generateOtherOptionCombinations() { 40 | const baseTsOption = { 41 | name: "with-native-for-typescript", 42 | alias: "rnts", 43 | bool: true, 44 | }; 45 | const result = []; 46 | 47 | // Generate combinations of other options 48 | optionalFlags.forEach((option) => { 49 | result.push([baseTsOption, option]); 50 | }); 51 | 52 | // Also test all other options together 53 | if (optionalFlags.length > 0) { 54 | result.push([baseTsOption, ...optionalFlags]); 55 | } 56 | 57 | return result; 58 | } 59 | 60 | const allCombinations = [ 61 | ...coreCombinations, 62 | ...generateOtherOptionCombinations(), 63 | ]; 64 | 65 | // Create output directory if it doesn't exist 66 | const outputBaseDir = path.join(__dirname, "../tests/components"); 67 | if (existsSync(outputBaseDir)) { 68 | rmSync(outputBaseDir, { recursive: true, force: true }); 69 | } 70 | mkdirSync(outputBaseDir, { recursive: true }); 71 | 72 | console.log(`Testing ${allCombinations.length} combinations...`); 73 | 74 | // Run each combination 75 | for (let i = 0; i < allCombinations.length; i++) { 76 | const combination = allCombinations[i]; 77 | 78 | // Create option string for command 79 | const optionsString = combination.map((opt) => `--${opt.name}`).join(" "); 80 | 81 | // Create directory name from combination 82 | const dirName = combination 83 | .map((opt) => opt.name) 84 | .join("_") 85 | .replace(/\-/g, "-"); 86 | 87 | const outputDir = path.join(outputBaseDir, dirName); 88 | mkdirSync(outputDir, { recursive: true }); 89 | 90 | // Build and execute the command 91 | const command = `node ./dist/bin.js tests/fixtures ${outputDir} ${optionsString}`; 92 | 93 | try { 94 | console.log(`[${i + 1}/${allCombinations.length}] Running: ${command}`); 95 | execSync(command, { stdio: "inherit" }); 96 | 97 | // Run prettier on generated files to fix formatting issues (including escaped quotes) 98 | console.log(`Running prettier on ${outputDir}`); 99 | try { 100 | execSync(`npx prettier --write "${outputDir}/**/*.{js,jsx,ts,tsx}"`, { 101 | stdio: "inherit", 102 | }); 103 | } catch (prettierError: unknown) { 104 | console.error(`⚠️ Prettier failed for ${dirName}:`); 105 | console.error(prettierError); 106 | // Exit immediately if prettier fails 107 | process.exit(1); 108 | } 109 | 110 | console.log(`✅ Completed: ${dirName}`); 111 | } catch (error: unknown) { 112 | console.error(`❌ Failed: ${dirName}`); 113 | console.error(error); 114 | // Exit immediately if any combination fails 115 | process.exit(1); 116 | } 117 | } 118 | 119 | console.log("All combinations tested!"); 120 | 121 | // Check if there are Git changes in the tests/components directory 122 | try { 123 | console.log("Checking for Git changes in tests/components..."); 124 | const gitStatus = execSync(`git status --porcelain tests/components`, { 125 | encoding: "utf-8", 126 | }); 127 | 128 | if (gitStatus.trim()) { 129 | console.error( 130 | "❌ Error: Git changes detected in tests/components directory!", 131 | ); 132 | console.error(gitStatus); 133 | console.error("Please commit these changes or update the expected output."); 134 | process.exit(1); 135 | } 136 | 137 | console.log("✅ No Git changes detected in tests/components."); 138 | } catch (error: unknown) { 139 | console.error("❌ Error checking Git status:"); 140 | console.error(error); 141 | process.exit(1); 142 | } 143 | -------------------------------------------------------------------------------- /src/bin.ts: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | import meow from "meow"; 4 | import { make } from "./transformer.js"; 5 | 6 | const cli = meow( 7 | ` 8 | Usage 9 | $ react-from-svg [--with-native|--with-web] 10 | 11 | Options 12 | --with-native, -rn Output code for react-native-svg 13 | --with-native-for-typescript, -rnts Output code for react-native-svg with TypeScript 14 | --with-web, -rnw Output code for DOM. If --with-native is also used, will be output as .web.js files 15 | --with-web-for-typescript, -rnwts Output code for DOM with TypeScript. If --with-native is also used, will be output as .web.tsx files 16 | --remove-fill, -rf Remove all 'fill' properties from SVGs, convenient for icons 17 | --remove-stroke, -rs Remove all 'stroke' properties from SVGs, convenient for icons 18 | --allow-override-fill, -aof Replace all 'fill' properties by a dynamic prop (fills) in SVGs, e.g. fill={fills[N]}. 19 | 20 | Example 21 | $ react-from-svg src/svgs src/svgs/components --with-web-for-typescript --allow-override-fill 22 | `, 23 | { 24 | importMeta: import.meta, 25 | flags: { 26 | withNative: { type: "boolean", shortFlag: "rn" }, 27 | withNativeForTypescript: { type: "boolean", shortFlag: "rnts" }, 28 | withWeb: { type: "boolean", shortFlag: "rnw" }, 29 | withWebForTypescript: { type: "boolean", shortFlag: "rnwts" }, 30 | removeFill: { type: "boolean", shortFlag: "rf" }, 31 | removeStroke: { type: "boolean", shortFlag: "rs" }, 32 | allowOverrideFill: { type: "boolean", shortFlag: "aof" }, 33 | }, 34 | }, 35 | ); 36 | 37 | if ( 38 | cli.flags.withNative === undefined && 39 | cli.flags.withNativeForTypescript === undefined && 40 | cli.flags.withWeb === undefined && 41 | cli.flags.withWebForTypescript === undefined 42 | ) { 43 | console.error( 44 | "You should at least choose an output option (one of --with-*)!", 45 | ); 46 | cli.showHelp(); 47 | process.exit(1); 48 | } 49 | 50 | make(cli.input as [string, string], cli.flags); 51 | -------------------------------------------------------------------------------- /src/case.ts: -------------------------------------------------------------------------------- 1 | import camelCase from "camelcase"; 2 | 3 | export const toCamel = (s: string): string => 4 | camelCase(s, { pascalCase: false }); 5 | export const toPascal = (s: string): string => 6 | camelCase(s, { pascalCase: true }); 7 | -------------------------------------------------------------------------------- /src/templates.ts: -------------------------------------------------------------------------------- 1 | const sep = ";\n"; 2 | 3 | // Helper for prop signature 4 | function getPropsSignature( 5 | allowOverrideFill: boolean, 6 | typescript: boolean, 7 | native: boolean, 8 | ): string { 9 | const fillsType = `{fills?: (${native ? "ColorValue" : "string"} | undefined)[]}`; 10 | const optionalPropsType = typescript 11 | ? ` : ${ 12 | native ? "SvgProps" : "React.SVGProps" 13 | }${allowOverrideFill ? " & " + fillsType : ""}` 14 | : ""; 15 | return `(${allowOverrideFill ? "{ fills, ...props }" : "props"}${optionalPropsType})`; 16 | } 17 | 18 | const importReact = (): string => { 19 | return "import React from 'react'"; 20 | }; 21 | 22 | const jsExport = ( 23 | name: string, 24 | svgOutput: string, 25 | allowOverrideFill: boolean = false, 26 | ): string => { 27 | const content = 28 | `const ${name} = ${getPropsSignature(allowOverrideFill, false, false)} => { 29 | return (${svgOutput}); 30 | }` + sep; 31 | return `${content} 32 | export default ${name}`; 33 | }; 34 | 35 | const tsxExport = ( 36 | name: string, 37 | svgOutput: string, 38 | native: boolean, 39 | allowOverrideFill: boolean = false, 40 | ): string => { 41 | const content = 42 | `const ${name} = ${getPropsSignature(allowOverrideFill, true, native)} => { 43 | return (${svgOutput}); 44 | }` + sep; 45 | return `${content} 46 | export default ${name}`; 47 | }; 48 | 49 | const web = ( 50 | svgOutput: string, 51 | name: string, 52 | allowOverrideFill: boolean = false, 53 | ): string => { 54 | return ( 55 | importReact() + sep + jsExport(name, svgOutput, allowOverrideFill) + sep 56 | ); 57 | }; 58 | 59 | const RNSvgModules = [ 60 | "Circle", 61 | "ClipPath", 62 | "Defs", 63 | "Ellipse", 64 | "ForeignObject", 65 | "G", 66 | "Image", 67 | "Line", 68 | "LinearGradient", 69 | "Marker", 70 | "Mask", 71 | "Path", 72 | "Pattern", 73 | "Polygon", 74 | "Polyline", 75 | "RadialGradient", 76 | "Rect", 77 | "Stop", 78 | "Symbol", 79 | "Text", 80 | "TextPath", 81 | "TSpan as Tspan", 82 | "Use", 83 | ]; 84 | 85 | const importReactNativeSvg = ( 86 | typescript: boolean, 87 | allowOverrideFill: boolean, 88 | ): string => { 89 | return `import Svg, { 90 | ${RNSvgModules.join(",")} 91 | } from 'react-native-svg';${ 92 | typescript && allowOverrideFill 93 | ? `import type { ColorValue } from 'react-native';` 94 | : "" 95 | }${typescript ? `import type { SvgProps } from 'react-native-svg';` : ""} 96 | `; 97 | }; 98 | 99 | const native = ( 100 | svgOutput: string, 101 | name: string, 102 | allowOverrideFill: boolean = false, 103 | ): string => { 104 | return ( 105 | importReact() + 106 | sep + 107 | importReactNativeSvg(false, allowOverrideFill) + 108 | sep + 109 | jsExport(name, svgOutput, allowOverrideFill) + 110 | sep 111 | ); 112 | }; 113 | 114 | const nativeForTypescript = ( 115 | svgOutput: string, 116 | name: string, 117 | allowOverrideFill: boolean = false, 118 | ): string => { 119 | return ( 120 | importReact() + 121 | sep + 122 | importReactNativeSvg(true, allowOverrideFill) + 123 | sep + 124 | tsxExport(name, svgOutput, true, allowOverrideFill) + 125 | sep 126 | ); 127 | }; 128 | 129 | const webForTypescript = ( 130 | svgOutput: string, 131 | name: string, 132 | allowOverrideFill: boolean = false, 133 | ): string => { 134 | return ( 135 | importReact() + 136 | sep + 137 | tsxExport(name, svgOutput, false, allowOverrideFill) + 138 | sep 139 | ); 140 | }; 141 | 142 | export { web, native, nativeForTypescript, webForTypescript }; 143 | -------------------------------------------------------------------------------- /src/transformer.ts: -------------------------------------------------------------------------------- 1 | import { mkdirp } from "mkdirp"; 2 | import { join, dirname } from "node:path"; 3 | import { readFileSync, writeFileSync } from "node:fs"; 4 | import { glob } from "glob"; 5 | import { toPascal } from "./case.js"; 6 | import { 7 | cleanupStart, 8 | prepareSvgProps, 9 | injectSvgJsProps, 10 | dashToCamelCaseProps, 11 | tagToPascalCase, 12 | cleanupEndWithoutSpace, 13 | deleteFill, 14 | deleteStroke, 15 | transformStyleAttributes, 16 | allowOverrideFillWithProp, 17 | } from "./adjust-svg.js"; 18 | import { 19 | web, 20 | native, 21 | nativeForTypescript, 22 | webForTypescript, 23 | } from "./templates.js"; 24 | 25 | type File = { 26 | name: string; 27 | content: string; 28 | }; 29 | 30 | type Flags = { 31 | withNative?: boolean; 32 | withNativeForTypescript?: boolean; 33 | withWeb?: boolean; 34 | withWebForTypescript?: boolean; 35 | removeFill?: boolean; 36 | removeStroke?: boolean; 37 | allowOverrideFill?: boolean; 38 | }; 39 | 40 | const get = async (globPattern: string): Promise => { 41 | const files = await glob(globPattern); 42 | return files 43 | .sort() 44 | .reverse() 45 | .map((item: string) => ({ 46 | name: item, 47 | content: readFileSync(item, "utf8"), 48 | })); 49 | }; 50 | 51 | const shortenFilenames = (sourcePath: string, files: File[]): File[] => { 52 | return files.map((file) => ({ 53 | ...file, 54 | name: file.name 55 | .replace(sourcePath + "/", "") 56 | .replace(".svg", "") 57 | .split("/") 58 | .map((part) => toPascal(part)) 59 | .join("/"), 60 | })); 61 | }; 62 | 63 | const noop = (s: string): string => s; 64 | 65 | export const transformSvg = ( 66 | svg: string, 67 | options: { 68 | removeFill: boolean; 69 | removeStroke: boolean; 70 | allowOverrideFill: boolean; 71 | pascalCaseTag: boolean; 72 | template: (svg: string) => string; 73 | }, 74 | ): string => { 75 | const { 76 | removeFill, 77 | removeStroke, 78 | allowOverrideFill, 79 | pascalCaseTag, 80 | template, 81 | } = options; 82 | 83 | let result = cleanupStart(svg); 84 | result = prepareSvgProps(result); 85 | result = injectSvgJsProps(result); 86 | result = dashToCamelCaseProps(result); 87 | result = transformStyleAttributes(result); 88 | result = pascalCaseTag ? tagToPascalCase(result) : result; 89 | result = cleanupEndWithoutSpace(result); 90 | if (allowOverrideFill) { 91 | result = allowOverrideFillWithProp(result, removeFill); 92 | } 93 | result = removeFill ? deleteFill(result) : result; 94 | result = removeStroke ? deleteStroke(result) : result; 95 | 96 | return template(result); 97 | }; 98 | 99 | const makeName = (name: string): string => "SVG" + name; 100 | 101 | const transformFiles = ( 102 | files: File[], 103 | options: { 104 | withNative: boolean; 105 | withNativeForTypescript: boolean; 106 | withWeb: boolean; 107 | withWebForTypescript: boolean; 108 | removeFill: boolean; 109 | removeStroke: boolean; 110 | allowOverrideFill: boolean; 111 | }, 112 | ): File[] => { 113 | const { 114 | withNative, 115 | withNativeForTypescript, 116 | withWeb, 117 | withWebForTypescript, 118 | removeFill, 119 | removeStroke, 120 | allowOverrideFill, 121 | } = options; 122 | 123 | return files.reduce((acc, file) => { 124 | const name = makeName(file.name); 125 | const trsf = (options: { 126 | js: boolean; 127 | pascalCaseTag: boolean; 128 | template: (svg: string) => string; 129 | }) => 130 | transformSvg(file.content, { 131 | removeFill, 132 | removeStroke, 133 | allowOverrideFill, 134 | ...options, 135 | }); 136 | 137 | const trsfNative = () => 138 | trsf({ 139 | js: true, 140 | pascalCaseTag: true, 141 | template: (svg) => native(svg, name, allowOverrideFill), 142 | }); 143 | 144 | const trsfNativeForTs = () => 145 | trsf({ 146 | js: true, 147 | pascalCaseTag: true, 148 | template: (svg) => nativeForTypescript(svg, name, allowOverrideFill), 149 | }); 150 | 151 | const trsfWeb = () => 152 | trsf({ 153 | js: true, 154 | pascalCaseTag: false, 155 | template: (svg) => web(svg, name, allowOverrideFill), 156 | }); 157 | 158 | const trsfWebForTs = () => 159 | trsf({ 160 | js: true, 161 | pascalCaseTag: false, 162 | template: (svg) => webForTypescript(svg, name, allowOverrideFill), 163 | }); 164 | 165 | if ( 166 | !withNative && 167 | !withNativeForTypescript && 168 | !withWeb && 169 | !withWebForTypescript 170 | ) { 171 | return acc; 172 | } 173 | 174 | const newFiles: File[] = []; 175 | 176 | if (withNative) { 177 | newFiles.push({ 178 | name: file.name + ".js", 179 | content: trsfNative(), 180 | }); 181 | } 182 | 183 | if (withNativeForTypescript) { 184 | newFiles.push({ 185 | name: file.name + ".tsx", 186 | content: trsfNativeForTs(), 187 | }); 188 | } 189 | 190 | const webExtension = withNative || withNativeForTypescript ? ".web" : ""; 191 | 192 | if (withWeb) { 193 | newFiles.push({ 194 | name: file.name + webExtension + ".js", 195 | content: trsfWeb(), 196 | }); 197 | } 198 | 199 | if (withWebForTypescript) { 200 | newFiles.push({ 201 | name: file.name + webExtension + ".tsx", 202 | content: trsfWebForTs(), 203 | }); 204 | } 205 | 206 | return [...acc, ...newFiles]; 207 | }, [] as File[]); 208 | }; 209 | 210 | const write = (outputPath: string, files: File[]): File[] => { 211 | files.forEach((file) => { 212 | const filename = join(outputPath, makeName(file.name)); 213 | mkdirp.sync(dirname(filename)); 214 | writeFileSync(filename, file.content, "utf8"); 215 | }); 216 | return files; 217 | }; 218 | 219 | export const make = async ( 220 | [sourcePath, outputPath]: [string, string], 221 | flags: Flags, 222 | ): Promise => { 223 | const files = await get(join(sourcePath, "*.svg")); 224 | console.log("Files found", files.length); 225 | 226 | const transformedFiles = transformFiles(shortenFilenames(sourcePath, files), { 227 | withNative: flags.withNative ?? false, 228 | withNativeForTypescript: flags.withNativeForTypescript ?? false, 229 | withWeb: flags.withWeb ?? false, 230 | withWebForTypescript: flags.withWebForTypescript ?? false, 231 | removeFill: flags.removeFill ?? false, 232 | removeStroke: flags.removeStroke ?? false, 233 | allowOverrideFill: flags.allowOverrideFill ?? false, 234 | }); 235 | 236 | console.log("Files transformed", transformedFiles.length); 237 | 238 | const writtenFiles = write(outputPath, transformedFiles); 239 | console.log("Files written", writtenFiles.length); 240 | 241 | return writtenFiles; 242 | }; 243 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGClean = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGClean; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGEdgeCaseWidth = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGEdgeCaseWidth; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGMatrixNegative = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 60 | 61 | ); 62 | }; 63 | 64 | export default SVGMatrixNegative; 65 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGPctUnit = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGPctUnit; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSimple = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 41 | 42 | ); 43 | }; 44 | 45 | export default SVGSimple; 46 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSketchExport = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 40 | 46 | 47 | 48 | ); 49 | }; 50 | 51 | export default SVGSketchExport; 52 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithFill = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | export default SVGWithFill; 46 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStroke = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 41 | 52 | 53 | ); 54 | }; 55 | 56 | export default SVGWithStroke; 57 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStyleAndData = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGWithStyleAndData; 39 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGClean = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default SVGClean; 42 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGEdgeCaseWidth = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default SVGEdgeCaseWidth; 42 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGMatrixNegative = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 43 | 44 | 45 | 46 | 53 | 54 | 55 | 56 | 68 | 69 | ); 70 | }; 71 | 72 | export default SVGMatrixNegative; 73 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGPctUnit = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default SVGPctUnit; 42 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGSimple = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 49 | 50 | ); 51 | }; 52 | 53 | export default SVGSimple; 54 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGSketchExport = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 48 | 58 | 59 | 60 | ); 61 | }; 62 | 63 | export default SVGSketchExport; 64 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGWithFill = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 44 | 52 | 62 | 63 | 64 | ); 65 | }; 66 | 67 | export default SVGWithFill; 68 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGWithStroke = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 49 | 64 | 65 | ); 66 | }; 67 | 68 | export default SVGWithStroke; 69 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_allow-override-fill/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGWithStyleAndData = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 47 | 48 | ); 49 | }; 50 | 51 | export default SVGWithStyleAndData; 52 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGClean = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGClean; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGEdgeCaseWidth = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGEdgeCaseWidth; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGMatrixNegative = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 59 | 60 | ); 61 | }; 62 | 63 | export default SVGMatrixNegative; 64 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGPctUnit = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGPctUnit; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSimple = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGSimple; 45 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSketchExport = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGSketchExport; 45 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithFill = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGWithFill; 45 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStroke = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 40 | 50 | 51 | ); 52 | }; 53 | 54 | export default SVGWithStroke; 55 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStyleAndData = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGWithStyleAndData; 39 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGClean = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default SVGClean; 42 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGEdgeCaseWidth = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default SVGEdgeCaseWidth; 42 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGMatrixNegative = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 43 | 44 | 45 | 46 | 53 | 54 | 55 | 56 | 67 | 68 | ); 69 | }; 70 | 71 | export default SVGMatrixNegative; 72 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGPctUnit = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 38 | ); 39 | }; 40 | 41 | export default SVGPctUnit; 42 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGSimple = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 48 | 49 | ); 50 | }; 51 | 52 | export default SVGSimple; 53 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGSketchExport = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 47 | 57 | 58 | 59 | ); 60 | }; 61 | 62 | export default SVGSketchExport; 63 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGWithFill = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 44 | 52 | 62 | 63 | 64 | ); 65 | }; 66 | 67 | export default SVGWithFill; 68 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGWithStroke = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 48 | 62 | 63 | ); 64 | }; 65 | 66 | export default SVGWithStroke; 67 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-fill_remove-stroke_allow-override-fill/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { ColorValue } from "react-native"; 28 | import type { SvgProps } from "react-native-svg"; 29 | const SVGWithStyleAndData = ({ 30 | fills, 31 | ...props 32 | }: SvgProps & { fills?: (ColorValue | undefined)[] }) => { 33 | return ( 34 | 35 | {props.children} 36 | 37 | 47 | 48 | ); 49 | }; 50 | 51 | export default SVGWithStyleAndData; 52 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGClean = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGClean; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGEdgeCaseWidth = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGEdgeCaseWidth; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGMatrixNegative = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 59 | 60 | ); 61 | }; 62 | 63 | export default SVGMatrixNegative; 64 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGPctUnit = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGPctUnit; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSimple = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGSimple; 45 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSketchExport = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | export default SVGSketchExport; 46 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithFill = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | export default SVGWithFill; 46 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStroke = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 40 | 50 | 51 | ); 52 | }; 53 | 54 | export default SVGWithStroke; 55 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_remove-stroke/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStyleAndData = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGWithStyleAndData; 39 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGClean = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGClean; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGClean.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGClean = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGClean; 12 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGEdgeCaseWidth = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGEdgeCaseWidth; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGEdgeCaseWidth.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGEdgeCaseWidth = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGEdgeCaseWidth; 12 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGMatrixNegative = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 39 | 40 | 41 | 42 | 49 | 50 | 51 | 52 | 60 | 61 | ); 62 | }; 63 | 64 | export default SVGMatrixNegative; 65 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGMatrixNegative.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGMatrixNegative = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 26 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGMatrixNegative; 39 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGPctUnit = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGPctUnit; 38 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGPctUnit.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGPctUnit = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGPctUnit; 12 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSimple = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 41 | 42 | ); 43 | }; 44 | 45 | export default SVGSimple; 46 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGSimple.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSimple = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGSimple; 20 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGSketchExport = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 40 | 46 | 47 | 48 | ); 49 | }; 50 | 51 | export default SVGSketchExport; 52 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGSketchExport.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSketchExport = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 14 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default SVGSketchExport; 26 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithFill = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | export default SVGWithFill; 46 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGWithFill.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithFill = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGWithFill; 20 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStroke = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 41 | 52 | 53 | ); 54 | }; 55 | 56 | export default SVGWithStroke; 57 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGWithStroke.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStroke = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 15 | 26 | 27 | ); 28 | }; 29 | 30 | export default SVGWithStroke; 31 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | import type { SvgProps } from "react-native-svg"; 28 | const SVGWithStyleAndData = (props: SvgProps) => { 29 | return ( 30 | 31 | {props.children} 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGWithStyleAndData; 39 | -------------------------------------------------------------------------------- /tests/components/with-native-for-typescript_with-web-for-typescript/SVGWithStyleAndData.web.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStyleAndData = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default SVGWithStyleAndData; 13 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGClean.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGClean = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default SVGClean; 37 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGEdgeCaseWidth.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGEdgeCaseWidth = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default SVGEdgeCaseWidth; 37 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGMatrixNegative.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGMatrixNegative = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 38 | 39 | 40 | 41 | 48 | 49 | 50 | 51 | 59 | 60 | ); 61 | }; 62 | 63 | export default SVGMatrixNegative; 64 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGPctUnit.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGPctUnit = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default SVGPctUnit; 37 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGSimple.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGSimple = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGSimple; 45 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGSketchExport.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGSketchExport = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 39 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export default SVGSketchExport; 51 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGWithFill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGWithFill = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGWithFill; 45 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGWithStroke.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGWithStroke = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 40 | 51 | 52 | ); 53 | }; 54 | 55 | export default SVGWithStroke; 56 | -------------------------------------------------------------------------------- /tests/components/with-native/SVGWithStyleAndData.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGWithStyleAndData = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGWithStyleAndData; 38 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGClean.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGClean = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default SVGClean; 37 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGClean.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGClean = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGClean; 12 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGEdgeCaseWidth.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGEdgeCaseWidth = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default SVGEdgeCaseWidth; 37 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGEdgeCaseWidth.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGEdgeCaseWidth = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGEdgeCaseWidth; 12 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGMatrixNegative.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGMatrixNegative = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 38 | 39 | 40 | 41 | 48 | 49 | 50 | 51 | 59 | 60 | ); 61 | }; 62 | 63 | export default SVGMatrixNegative; 64 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGMatrixNegative.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGMatrixNegative = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 26 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGMatrixNegative; 39 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGPctUnit.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGPctUnit = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default SVGPctUnit; 37 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGPctUnit.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGPctUnit = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGPctUnit; 12 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGSimple.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGSimple = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGSimple; 45 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGSimple.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSimple = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGSimple; 20 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGSketchExport.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGSketchExport = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 39 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | export default SVGSketchExport; 51 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGSketchExport.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSketchExport = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 14 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default SVGSketchExport; 26 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGWithFill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGWithFill = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default SVGWithFill; 45 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGWithFill.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithFill = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGWithFill; 20 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGWithStroke.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGWithStroke = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 40 | 51 | 52 | ); 53 | }; 54 | 55 | export default SVGWithStroke; 56 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGWithStroke.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStroke = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 15 | 26 | 27 | ); 28 | }; 29 | 30 | export default SVGWithStroke; 31 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGWithStyleAndData.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Svg, { 3 | Circle, 4 | ClipPath, 5 | Defs, 6 | Ellipse, 7 | ForeignObject, 8 | G, 9 | Image, 10 | Line, 11 | LinearGradient, 12 | Marker, 13 | Mask, 14 | Path, 15 | Pattern, 16 | Polygon, 17 | Polyline, 18 | RadialGradient, 19 | Rect, 20 | Stop, 21 | Symbol, 22 | Text, 23 | TextPath, 24 | TSpan as Tspan, 25 | Use, 26 | } from "react-native-svg"; 27 | const SVGWithStyleAndData = (props) => { 28 | return ( 29 | 30 | {props.children} 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default SVGWithStyleAndData; 38 | -------------------------------------------------------------------------------- /tests/components/with-native_with-web/SVGWithStyleAndData.web.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStyleAndData = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default SVGWithStyleAndData; 13 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGClean.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGClean = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGClean; 12 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGEdgeCaseWidth.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGEdgeCaseWidth = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGEdgeCaseWidth; 12 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGMatrixNegative.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGMatrixNegative = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 26 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGMatrixNegative; 39 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGPctUnit.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGPctUnit = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGPctUnit; 12 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGSimple.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSimple = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGSimple; 20 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGSketchExport.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSketchExport = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 14 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default SVGSketchExport; 26 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGWithFill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithFill = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGWithFill; 20 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGWithStroke.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStroke = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 15 | 26 | 27 | ); 28 | }; 29 | 30 | export default SVGWithStroke; 31 | -------------------------------------------------------------------------------- /tests/components/with-web-for-typescript/SVGWithStyleAndData.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStyleAndData = (props: React.SVGProps) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default SVGWithStyleAndData; 13 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGClean.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGClean = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGClean; 12 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGEdgeCaseWidth.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGEdgeCaseWidth = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGEdgeCaseWidth; 12 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGMatrixNegative.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGMatrixNegative = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 26 | 34 | 35 | ); 36 | }; 37 | 38 | export default SVGMatrixNegative; 39 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGPctUnit.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGPctUnit = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default SVGPctUnit; 12 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGSimple.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSimple = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGSimple; 20 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGSketchExport.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGSketchExport = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 14 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default SVGSketchExport; 26 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGWithFill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithFill = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default SVGWithFill; 20 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGWithStroke.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStroke = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 15 | 26 | 27 | ); 28 | }; 29 | 30 | export default SVGWithStroke; 31 | -------------------------------------------------------------------------------- /tests/components/with-web/SVGWithStyleAndData.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | const SVGWithStyleAndData = (props) => { 3 | return ( 4 | 5 | {props.children} 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default SVGWithStyleAndData; 13 | -------------------------------------------------------------------------------- /tests/fixtures/clean.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/fixtures/edge-case-width.svg: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /tests/fixtures/matrix-negative.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/fixtures/pct-unit.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tests/fixtures/simple.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /tests/fixtures/sketch-export.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | chevron 7 | Created with Sketch. 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /tests/fixtures/with-fill.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/fixtures/with-stroke.svg: -------------------------------------------------------------------------------- 1 | 2 | ionicons-v5-h 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tests/fixtures/with-style-and-data.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "NodeNext", 4 | "moduleResolution": "NodeNext", 5 | "esModuleInterop": false, 6 | "allowSyntheticDefaultImports": true, 7 | "strict": true, 8 | "skipLibCheck": true, 9 | "jsx": "react", 10 | "outDir": "dist", 11 | "rootDir": "src" 12 | }, 13 | "ts-node": { 14 | "compilerOptions": { 15 | "module": "NodeNext" 16 | } 17 | }, 18 | "exclude": ["tests/**"] 19 | } 20 | --------------------------------------------------------------------------------