@nexite/create-chakra-icons

Transform SVG to React Chakra UI ✨

from SVG file to CODE

Features

- [x] Transform to Chakra-UI Icon Component or Functional createIcon(...).
- Component, See.
- createIcon(...) Functional, See.
- [x] Multiple input with directories or files as input value for option -i or --input.
- [x] Multiple outputs for each input svg.
- [x] Support case in export name declaration (camel|snake|pascal|constant).
- [x] Suffix and Prefix for generated code of export name declaration.
- [x] Support type annotation when code generated is .

Usage

$3

``console
create-chakra-icons [FLAGS] [OPTIONS] [INPUT]
`

$3

`console
-h, --help Prints help information
-V, --version Prints version information
`

$3

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

--m, --multi Creates separate output for each input (*ONLY for CLI command).

-T, --type TYPE:
(F|f). Sets output code with function \createIcon({...})\.
(C|c). Sets output code with Component Icon \(props) => {...} \.

[e.g.: -T C]

`

$3

`console
[INPUT] This option for read the input from PATH of FILE or DIRECTORIES.
[e.g.: create-chakra-icons ./MyICON.svg ~/assets]
`

$3

#### Pipelines command:

- input in pipe

`console
echo "

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\"
/>

" | create-chakra-icons -n "KodingNinjaIcon"
`

- output in stdout

`jsx
import { createIcon } from "@chakra-ui/react";
export const KodingNinjaIcon = createIcon({
displayName: "KodingNinjaIcon",
viewBox: "0 0 200 200",
d: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
});
`

#### Multiple Input

- input per-file

`console
create-chakra-icons -o Icons.js ./Facebook.svg ./Apple.svg ./Amazon.svg ./Netflix.svg ./Google.svg
`

- input directories

`console
create-chakra-icons -o Icons.js ./social-icons
`

- input directories and per-file at the same time

`console
create-chakra-icons -o Icons.js ./MyCompany.svg ./social-icons
`

- output will be make in Icons.js (argument -o or --output).

#### Multiple Output

`console
create-chakra-icons -o output_dir ./Facebook.svg ./Apple.svg ./Amazon.svg ./Netflix.svg ./Google.svg --m
`

- output will make files for each svg in output_dir (argument --m or --multi).

Roadmap

- [x] TypeScript Support (Type Annotation or Type Definition).
- Only when code generated is component See.
- [ ] ReScript Support.
- [ ] Feel free for give me any feedback or feature request (create an issue first).

Maintainer

- Rin (@ri7nz)

Contribution

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

$3

- Write the documentation 📝, you just need to modify comments in lib/*.js.
- When you done write the documentation, you just need to run yarn docs in the root repository.
- The command yarn docs will modify README.md` and see the changes.

LICENSE

See Here