88[ ![ 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 )
99[ ![ License] ( https://img.shields.io/github/license/MoOx/react-from-svg )] ( https://github.com/MoOx/react-from-svg )
1010[ ![ GitHub followers] ( https://img.shields.io/github/followers/MoOx?style=social&label=Follow%20me )] ( https://github.com/MoOx )
11- [ ![ Twitter Follow] ( https://img.shields.io/twitter/follow/MoOx?style=social&label=Follow%20me )] ( https://twitter.com/MoOx )
12- [ ![ Sponsor my work] ( https://github.com/moox/.github/raw/main/FUNDING-button.svg )] ( https://github.com/MoOx/react-from-svg?sponsor=1 )
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 )
1314
14- > Transform SVG files into React components, Native and/or Web, JavaScript and
15- > rescriptML. Without shitload of dependencies.
15+ > Transform SVG files into React components, Native and/or Web, JavaScript and/or TypeScript.
16+ > Without minimal dependencies.
1617
1718## Install
1819
1920``` console
2021npm install react-from-svg
21-
22- # or
23-
24- yarn add react-from-svg
2522```
2623
2724## Usage
@@ -35,59 +32,40 @@ Usage
3532Options
3633 --with-native, -rn Output code for react-native-svg
3734 --with-native-for-typescript, -rnts Output code for react-native-svg with TypeScript
38-
3935 --with-web, -rnw Output code for DOM. If --with-native is also used, will be output as .web.js files
40- --with-native-for-rescript, -rrn Output code for @rescript-react-native/svg
41- --with-web-for-rescript, -rrnw Output code for @rescript/react
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
4237 --remove-fill, -rf Remove all 'fill' properties from SVGs, convenient for icons
4338 --remove-stroke, -rs Remove all 'stroke' properties from SVGs, convenient for icons
44- --commonjs, -cjs Export as commonjs instead of es6 import/export
4539
4640Example
4741 $ react-from-svg assets/svgs src/Svgs --with-native --remove-fill
4842```
4943
50- Generated components will have the following props that you can inject to the
51- SVG components:
44+ Generated components will allow you to inject all the props you could use on an ` <svg> ` /` <Svg> ` , such as:
5245
5346- ` width `
5447- ` height `
5548- ` fill ` (if you use ` --remove-fill ` )
5649- ` stroke ` (if you use ` --remove-stroke ` )
50+ - ` style `
5751
58- ⚠️ To see what you can expect from the transformations,
59- [ check our snapshots] ( ./__tests__/__snapshots__ ) 👀
52+ ⚠️ To see what you can expect from the transformations, [ check our snapshots] ( ./tests/ ) 👀
6053
6154## Requirements
6255
63- ### ` --with-web `
56+ ### ` --with-web(-*) `
6457
6558Need you to have:
6659
6760- [ React] ( https://reactjs.org )
6861
69- ### ` --with- web-for-rescript `
62+ Note: if you use [ React Native for Web ] ( https://github.com/necolas/react-native- web) , see requirements below.
7063
71- Need you to have:
72-
73- - [ React] ( https://reactjs.org )
74- - [ ` rescript-react ` ] ( https://rescriptml.github.io/rescript-react/ )
75-
76- ### ` --with-native `
64+ ### ` --with-native(-*) `
7765
7866Need you to have:
7967
8068- [ React] ( https://reactjs.org )
8169- [ React Native] ( https://reactnative.dev ) (or an alternative platform like
8270 [ React Native Web] ( https://github.com/necolas/react-native-web ) )
8371- [ ` react-native-svg ` ] ( https://github.com/react-native-community/react-native-svg )
84-
85- ### ` --with-native-for-rescript `
86-
87- In addition to ` --with-native ` requirements, you need to have:
88-
89- - [ ` @rescript/react ` ] ( https://rescript-lang.org/docs/react/latest/introduction )
90- - [ ` rescript-react-native ` ] ( https://rescript-react-native.github.io )
91- - [ ` @rescript-react-native/svg ` ] ( https://github.com/rescript-react-native/svg )
92-
93- Ensure as that this dependencies are in the ` bs-dependencies ` of your ` bsconfig.json ` .
0 commit comments