in

Transform SVG to React Chakra UI from SVG file to CODE


create-chakra-icons

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

Features

  • [x] Transform <SVG/> to Chakra-UI Icon Component or Functional createIcon(...).
    • <Icon /> Component, See.
    • createIcon(...) Functional, See.
  • [x] Multiple input with directories or files as input value for option -i or --input.
  • [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 <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.

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:

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

create-chakra-icons  -o Icons.js ./Facebook.svg ./Apple.svg ./Amazon.svg ./Netflix.svg ./Google.svg 
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

  • [x] 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

GitHub

https://github.com/kodingdotninja/create-chakra-icons


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

The Most Ridiculous VPS Company of All Time

What is the difference between a blockchain and a traditional database?