Skip to content

Commit

Permalink
docs(CLI): update README.md (#2)
Browse files Browse the repository at this point in the history
* docs: update section of CLI in README.md

* docs: add options for prefix in README.md
  • Loading branch information
r17x authored Sep 6, 2021
1 parent 4dcee43 commit e391ba3
Showing 1 changed file with 40 additions and 26 deletions.
66 changes: 40 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<p align="center">
<label style="font-weight:bold;font-size:x-large">Transform SVG to React Chakra UI <Icon \/> ✨ </label>
<br/><label style="font-weight:bold;font-size:small">from SVG file to CODE</label>
<label style="font-weight:bold;font-size:200%">Transform SVG to React Chakra UI <Icon \/> ✨ </label>
<br/><label style="font-weight:bold;font-size:small;font-style:italic">from SVG file to CODE</label>
<br/>
<br/>
<img src="https://github.com/kodingdotninja/create-chakra-icons/blob/main/create-chakra-icons.gif?raw=true" alt="creater-chakra-icons" />
Expand All @@ -13,30 +13,50 @@

## Usage

### CLI
### Command Line Arguments
```console
create-chakra-icons [FLAGS] [OPTIONS] [INPUT]
```

### Flags
```console
npx create-chakra-icons -n "MyIcon" -i ./myicon.svg -o ./MyIcon.js
-h, --help Prints help information
-V, --version Prints version information
```

### Options
```console
-i, --input <PATH> This option for read the input from PATH from FILE or DIRECTORIES.
[e.g.: -i some/path , -i file.svg]
-o, --output <PATH> Writes the output. [default: stdout]
-n, --name <STRING> Sets value for `displayName` properties
(*ONLY for pipelines command). [default: Unamed] [e.g. -n "MyIcon"]
-C, --case <snake|camel|constant|pascal>
Sets for case [snake|camel|constant|pascal] in export named declaration
output. [default: pascal]
-S, --suffix <STRING> Sets for suffix in export named declaration.
-P, --prefix <STRING> Sets for prefix in export named declaration.
[e.g.: -S "Icon"]
--ts, --typescript Sets output as TypeScript code.
```
### Examples

* `-n/--name`: it will be `displayName` in Component Properties.
* `-i/--input`: where your put the `SVG` file - can be `file` or `directories`.
* `-o/--output`: where your want to save your file.

### Pipe (stdout)
#### Pipelines command:

* **input** in pipe
```console
$> echo "
echo "
<svg viewBox=\"0 0 200 200\">
<path
fill=\"#666\"
d=\"M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\"
/>
</svg>
" | create-chakra-icons -n "Rin"
// output
" | create-chakra-icons -n "KodingNinjaIcon"
```
* **output** in stdout

```jsx
import { createIcon } from "@chakra-ui/react";
export const Rin = createIcon({
displayName: "Rin",
Expand All @@ -45,20 +65,7 @@ export const Rin = createIcon({
});
```

### Pipe (output file)

```console
$> echo "
<svg viewBox=\"0 0 200 200\">
<path
fill=\"#666\"
d=\"M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\"
/>
</svg>
" | create-chakra-icons -n "Rin" > RinIcon.js
```

## Readmap
## Roadmap

* [ ] TypeScript Support (Type Annotation or Type Definition).
* [ ] ReScript Support.
Expand All @@ -68,6 +75,8 @@ $> echo "

## API

<details>
<summary> Click here, for more details about API of create-chakra-icons</summary>
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

#### Table of Contents
Expand Down Expand Up @@ -359,6 +368,11 @@ Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/G

Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)**

</details>

## Maintainer
* **Rin** ([@ri7nz](//github.com/ri7nz))

## Contribution

Feel free for making an issue, pull request, or give any feedback. 🙌
Expand Down

0 comments on commit e391ba3

Please sign in to comment.