Skip to content

Commit

Permalink
💥Add commonjs, with-native, with-web options
Browse files Browse the repository at this point in the history
  • Loading branch information
@MoOx
MoOx committed Apr 13, 2020
1 parent 4533c64 commit 070a85f
Show file tree
Hide file tree
Showing 9 changed files with 477 additions and 263 deletions.
49 changes: 40 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,61 @@

> Turns SVG files into React Native (Web) (+ optional ReasonML) components
## Install

```console
npm install react-from-svg

# or

yarn add react-from-svg
```

## Usage

```console
react-from-svg [sourcePath] [outputPath] [--with-reason] [--remove-fill] [--remove-stroke] [--reason-module-path]
react-from-svg --help

Usage
$ react-from-svg <sourcePath> <outputPath> [--with-native|--with-web]

Options
--with-native, -native Output code for react-native-svg
--with-web, -web Output code for DOM. If --with-native is also used, will be output as .web.js files
--with-reason, -bs Output ReasonML bindings code
--remove-fill, -rf Remove all 'fill' properties from SVGs, convenient for icons
--remove-stroke, -rs Remove all 'stroke' properties from SVGs, convenient for icons
--commonjs, -cjs Export as commonjs instead of es6 import/export
--bs-module-path, -bsp Allow to customise ReasonML output path

Example
$ react-from-svg assets/svgs src/Svgs --remove-fill
```

### Examples

Just React Native / React Native Web SVGs, with fill svg props removed, nice for
icons
#### React DOM, no options

```console
react-from-svg assets/svgs src/Svgs --remove-fill
react-from-svg assets/svgs src/Svgs --with-web
```

React Native (Web) + ReasonML bindings SVGs
#### React Native with fill svg props removed

```console
react-from-svg assets/svgs src/Svgs --with-reason
react-from-svg assets/svgs src/Svgs --with-native --remove-fill
```

React Native (Web) + ReasonML bindings SVGs and absolute path : it's usefull if
you defined a webpack alias and you don't generate your bucklescript output
"in-source"
#### React Native + ReasonML bindings SVGs

```console
react-from-svg assets/svgs src/Svgs --with-native --with-reason
```

#### React Native + ReasonML bindings SVGs and absolute path

It's usefull if you defined a webpack alias and you don't generate your
bucklescript output `"in-source"`

```console
react-from-svg assets/svgs src/Svgs --with-reason --reason-module-path=./src/components
Expand Down
8 changes: 7 additions & 1 deletion __tests__/Test.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ open Expect;

let snap = (svg, ~removeFill, ~removeStroke) => {
svg
->Transformer.transformSvg(removeFill, removeStroke)
->Transformer.transformSvg(
~removeFill,
~removeStroke,
~commonjs=false,
~pascalCaseTag=true,
~template=Templates.native,
)
->expect
->toMatchSnapshot;
};
Expand Down
18 changes: 0 additions & 18 deletions __tests__/__snapshots__/Test.proxy.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z\\"/></Svg>
Expand Down Expand Up @@ -59,7 +58,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z\\"/></Svg>
Expand Down Expand Up @@ -93,7 +91,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z\\"/></Svg>
Expand Down Expand Up @@ -127,7 +124,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\"/></Svg>
Expand Down Expand Up @@ -162,7 +158,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\"/></Svg>
Expand Down Expand Up @@ -197,7 +192,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\"/></Svg>
Expand Down Expand Up @@ -232,7 +226,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32\\"/></Svg>
Expand Down Expand Up @@ -267,7 +260,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\" stroke=\\"#000\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32\\"/></Svg>
Expand Down Expand Up @@ -302,7 +294,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\" fill=\\"none\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32\\"/></Svg>
Expand Down Expand Up @@ -337,7 +328,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
Expand Down Expand Up @@ -373,7 +363,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
Expand Down Expand Up @@ -409,7 +398,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
Expand Down Expand Up @@ -445,7 +433,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><G fillRule=\\"evenodd\\"><Path d=\\"m0 0h30v30h-30z\\"/><Path d=\\"m10.2955556 11.5277778h-3.39250004l-1.67166667-3.17944447h-2.22888889v3.17944447h-2.99916667v-11.48861113h5.1625c3.04833334 0 4.78555556 1.475 4.78555556 4.03166666 0 1.73722223-.72111111 3.01555556-2.04861111 3.70388889zm-7.2930556-9.09583336v3.52361112h2.17972222c1.21277778 0 1.9175-.62277778 1.9175-1.78638889 0-1.13083334-.70472222-1.73722223-1.9175-1.73722223zm8.8663889-2.39277777h9.0630555v2.39277777h-6.0638888v2.14694445h5.4738888v2.37638889l-5.4738888.01638889v2.16333333h6.2277777v2.3927778h-9.2269444z\\" fillRule=\\"nonzero\\" transform=\\"translate(7.5 15.833333)\\"/></G></Svg>
Expand Down Expand Up @@ -479,7 +466,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><G fillRule=\\"evenodd\\"><Path d=\\"m0 0h30v30h-30z\\"/><Path d=\\"m10.2955556 11.5277778h-3.39250004l-1.67166667-3.17944447h-2.22888889v3.17944447h-2.99916667v-11.48861113h5.1625c3.04833334 0 4.78555556 1.475 4.78555556 4.03166666 0 1.73722223-.72111111 3.01555556-2.04861111 3.70388889zm-7.2930556-9.09583336v3.52361112h2.17972222c1.21277778 0 1.9175-.62277778 1.9175-1.78638889 0-1.13083334-.70472222-1.73722223-1.9175-1.73722223zm8.8663889-2.39277777h9.0630555v2.39277777h-6.0638888v2.14694445h5.4738888v2.37638889l-5.4738888.01638889v2.16333333h6.2277777v2.3927778h-9.2269444z\\" fillRule=\\"nonzero\\" transform=\\"translate(7.5 15.833333)\\"/></G></Svg>
Expand Down Expand Up @@ -513,7 +499,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><G fill=\\"none\\" fillRule=\\"evenodd\\"><Path d=\\"m0 0h30v30h-30z\\" fill=\\"#dd4b39\\"/><Path d=\\"m10.2955556 11.5277778h-3.39250004l-1.67166667-3.17944447h-2.22888889v3.17944447h-2.99916667v-11.48861113h5.1625c3.04833334 0 4.78555556 1.475 4.78555556 4.03166666 0 1.73722223-.72111111 3.01555556-2.04861111 3.70388889zm-7.2930556-9.09583336v3.52361112h2.17972222c1.21277778 0 1.9175-.62277778 1.9175-1.78638889 0-1.13083334-.70472222-1.73722223-1.9175-1.73722223zm8.8663889-2.39277777h9.0630555v2.39277777h-6.0638888v2.14694445h5.4738888v2.37638889l-5.4738888.01638889v2.16333333h6.2277777v2.3927778h-9.2269444z\\" fill=\\"#fff\\" fillRule=\\"nonzero\\" transform=\\"translate(7.5 15.833333)\\"/></G></Svg>
Expand Down Expand Up @@ -547,7 +532,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/><Line x1=\\"256\\" y1=\\"160\\" x2=\\"256\\" y2=\\"448\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/></Svg>
Expand Down Expand Up @@ -582,7 +566,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z\\" stroke=\\"#000\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/><Line x1=\\"256\\" y1=\\"160\\" x2=\\"256\\" y2=\\"448\\" stroke=\\"#000\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/></Svg>
Expand Down Expand Up @@ -617,7 +600,6 @@ import Svg, {
Pattern,
Mask,
} from 'react-native-svg';
export default ({width, height, fill, stroke}) => {
return (
<Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z\\" fill=\\"none\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/><Line x1=\\"256\\" y1=\\"160\\" x2=\\"256\\" y2=\\"448\\" fill=\\"none\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/></Svg>
Expand Down
74 changes: 37 additions & 37 deletions bin.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,44 @@
#!/usr/bin/env node
"use strict";
const meow = require("meow");

function hasArg(args, option) {
return Boolean(args.find(arg => arg[0] === option));
}

function getArg(args, option) {
const argWithValue = args.find(arg => arg[0] === option);
return argWithValue && argWithValue.length == 2 ? argWithValue[1] : undefined;
}

const args = process.argv.slice(0);
args.shift(); // node
args.shift(); // bin name
const sourcePath = args.shift();
const outputPath = args.shift();
// UPDATE README IF YOU UPDATE THIS PLEASE
const cli = meow(
`
Usage
$ react-from-svg <sourcePath> <outputPath> [--with-native|--with-web]
const acceptedOptions = [
"--with-reason",
"--remove-fill",
"--remove-stroke",
"--reason-module-path",
];
Options
--with-native, -native Output code for react-native-svg
--with-web, -web Output code for DOM. If --with-native is also used, will be output as .web.js files
--with-reason, -bs Output ReasonML bindings code
--remove-fill, -rf Remove all 'fill' properties from SVGs, convenient for icons
--remove-stroke, -rs Remove all 'stroke' properties from SVGs, convenient for icons
--commonjs, -cjs Export as commonjs instead of es6 import/export
--bs-module-path, -bsp Allow to customise ReasonML output path
const splitArgs = args.map(arg => arg.split("="));
Example
$ react-from-svg assets/svgs src/Svgs --remove-fill
`,
{
flags: {
"with-native": { type: "boolean", alias: "native" },
"with-web": { type: "boolean", alias: "web" },
"with-reason": { type: "boolean", alias: "bs" },
"remove-fill": { type: "boolean", alias: "rf" },
"remove-stroke": { type: "boolean", alias: "rs" },
commonjs: { type: "boolean", alias: "cjs" },
"bs-module-path": { type: "string", alias: "bsp" },
},
},
);

if (!sourcePath) {
throw new Error("source path is required");
}
if (!outputPath) {
throw new Error("output path is required");
}
if (splitArgs.filter(arg => !acceptedOptions.includes(arg[0])).length > 0) {
throw new Error("only accepted options are: " + acceptedOptions);
if (cli.flags.withNative === undefined && cli.flags.withWeb === undefined) {
console.error(
"You should at least choose an option between --with-native or --with web!",
);
cli.showHelp();
process.exit(1);
}

///
Expand Down Expand Up @@ -68,12 +75,5 @@ setTimeout(function() {
);
}

transformer.make(
sourcePath,
outputPath,
hasArg(splitArgs, "--with-reason"),
hasArg(splitArgs, "--remove-fill"),
hasArg(splitArgs, "--remove-stroke"),
getArg(splitArgs, "--reason-module-path"),
);
transformer.make(cli.input, cli.flags);
}, 0);
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"dependencies": {
"bs-platform": "^7.2.2",
"glob": "^7.1.3",
"meow": "^6.1.0",
"mkdirp": "^0.5.1",
"reason-future": "^2.4.0",
"reason-react": "^0.7.0"
Expand Down
Loading

0 comments on commit 070a85f

Please sign in to comment.