create-chakra-icons

Transform SVG to React Chakra UI ✨
from SVG file to CODE

Features

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

Usage

Command Line Arguments

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

Flags

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

Options

-i, --input <PATH>      This option for read the input from PATH of 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.

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

                        [e.g.: -T C]

Input

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

Examples

Pipelines command:

• input in pipe

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 "KodingNinjaIcon"

• output in stdout

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

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

• input directories

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

• input directories and per-file at the same time

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

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

Roadmap

• TypeScript Support (Type Annotation or Type Definition).
  • Only when code generated is <Icon /> component See.
• ReScript Support.
• Per file input is Per file output. ⁉️ 🤔
• 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. 🙌

Documentation

• 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