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

Overview

Transform SVG to React Chakra UI
from SVG file to CODE

creater-chakra-icons

Features

  • Transform to Chakra-UI Icon Component or Functional createIcon(...).
    • 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 .

Usage

Command Line Arguments

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

Flags

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

Options

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

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
" | create-chakra-icons -n "KodingNinjaIcon" ">
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
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 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).

API

Click here, for more details about API of create-chakra-icons

Table of Contents

ast

pairToObjectProperty

Examples
const pair = ["hey", "jude"]

pairToObjectProperty(value)
// output:
// {
//   type: 'ObjectProperty',
//   key: { type: 'Identifier', name: 'hey' },
//   value: { type: 'StringLiteral', value: 'jude' },
//   computed: false,
//   shorthand: false,
//   decorators: null
// }

Returns Object

objectPropertyToPair

Parameters
  • Object
Examples
const objectProperty = {
  type: 'ObjectProperty',
  key: { type: 'Identifier', name: 'hey' },
  value: { type: 'StringLiteral', value: 'jude' },
  computed: false,
  shorthand: false,
  decorators: null
}

objectPropertyToPair(objectProperty)
// output: ["hey", "jude"]

Returns [String, String]

objectToObjectExpression

Parameters
  • Object
Examples
let object = { hey: "jude" }
// output:
objectToObjectExpression(object)
// {
//   type: 'ObjectExpression',
//   properties: [
//     {
//       type: 'ObjectProperty',
//       key: [Object],
//       value: [Object],
//       computed: false,
//       shorthand: false,
//       decorators: null
//     }
//   ]
// }

Returns Object

objectExpressionToObject

Parameters
  • Object
Examples
let objectExpression = {
  type: 'ObjectExpression',
  properties: [
    {
      type: 'ObjectProperty',
      key: [Object],
      value: [Object],
      computed: false,
      shorthand: false,
      decorators: null
    }
  ]
}
objectExpressionToObject(objectExpression)
// output:
// let object = { hey: "jude" }

Returns Object

toImportDeclaration

Parameters

Returns Object

toExportNamedDeclaration

Parameters
  • Object
Properties
Examples
let object = {
 displayName: "MyModule",
 objectExpression: {...} // you can make with function objectToObjectExpression
}
toExportNamedDeclaration(object)

Returns Object

toSource

Parameters
  • Array

Returns Object

hastToProperties

Parameters
  • Object

Returns Object

hastChildrenLength

Parameters
  • Object

Returns Number

hastToJSXProperties

Parameters
  • Object

Returns Object

jsxPropertiesToComponent

Parameters
  • Object

Returns Object

objectToObjectExpression

Parameters

  • object

chakra

the module for generate Chakra Icon Code.

createChakraIcon

Parameters

Returns Object

utils

provided utility function.

compose

Parameters
  • Array

Returns T

pairToObject

Parameters
  • Array

Returns Object

objectToPair

Parameters
  • Object

Returns Array

pairsToObject

Parameters
  • Array

Returns Object

objectToPairs

Parameters
  • Object

Returns Array

Maintainer

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

Issues
  • chore(deps): bump remark-html from 13.0.1 to 13.0.2

    chore(deps): bump remark-html from 13.0.1 to 13.0.2

    Bumps remark-html from 13.0.1 to 13.0.2.

    Release notes

    Sourced from remark-html's releases.

    13.0.2

    • b0b1ba5 Fix to sanitize by default The docs have always said remark-html is safe by default. It wasn’t and this patches that.

      If you do want to be unsafe, use remark-html with sanitize: false:

      -  .use(remarkHtml)
      +  .use(remarkHtml, {sanitize: false})
      

    Full Changelog: https://github.com/remarkjs/remark-html/compare/13.0.1...13.0.2

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • feat: basic CLI and API for Programmatically

    feat: basic CLI and API for Programmatically

    How it Works

    
    [SVG: string] -> svg-parse -> Hast -> BabelAST -> [JS Code: String]
    

    Project Name ?

    ~~I have been try to publish with name create-chakraicon but the registry of npm show error~~

    npm notice
    npm notice 📦  [email protected]
    npm notice === Tarball Contents ===
    npm notice 1.1kB LICENSE
    npm notice 1.6kB index.bin.js
    npm notice 47B   index.js
    npm notice 3.3kB lib/index.js
    npm notice 918B  package.json
    npm notice 4.0kB README.md
    npm notice === Tarball Details ===
    npm notice name:          create-chakraicon
    npm notice version:       0.0.0
    npm notice package size:  3.8 kB
    npm notice unpacked size: 10.9 kB
    npm notice shasum:        7e490fedb5d9eebcfe7e830a2453ac10643d7139
    npm notice integrity:     sha512-TeWNRMjktOpGe[...]wSy2104/pUGKg==
    npm notice total files:   6
    npm notice
    npm ERR! code E403
    npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/create-chakraicon - Package name too similar to existing packages; try renaming your package to '@ri7nz/create-chakraicon' and publishing with 'npm publish --access=public' instead
    npm ERR! 403 In most cases, you or one of your dependencies are requesting
    npm ERR! 403 a package version that is forbidden by your security policy.
    
    

    Then, I have been try with another name:

    do you have any suggestion name @gifaeriyanto @grikomsn

    opened by ri7nz 0
  • docs: update section of CLI in README.md

    docs: update section of CLI in README.md

    In this pull request, it's only represent the next update of this CLI tools by updated README.md

    documentation enhancement 
    opened by ri7nz 0
  • feat(CLI): add new flags and options.

    feat(CLI): add new flags and options.

    Implemented

    • [x] Case for Export named declarations
    -C, --case <snake|camel|constant|pascal>     
                      Sets for case [snake|camel|constant|pascal] in export named declaration 
                       output. [default: pascal]
    
    • [x] Help (default) and Version Informations
    -h, --help      Prints help information
    -V, --version   Prints version information
    
    • [x] -P, --prefix https://github.com/kodingdotninja/create-chakra-icons/pull/4
    • [x] -S, --suffix https://github.com/kodingdotninja/create-chakra-icons/pull/4
    • [x] --ts, --typescript https://github.com/kodingdotninja/create-chakra-icons/pull/4
    enhancement 
    opened by ri7nz 0
  • feat: support typescript

    feat: support typescript

    This PR is ready to merge when https://github.com/kodingdotninja/create-chakra-icons/pull/3 is MERGED

    enhancement 
    opened by ri7nz 0
  • docs: next feature

    docs: next feature

    Feel free to comment on this PRs for discussion new feature.

    I think it's better if we have

    • [ ] no-import import { some, function } from "from" ⁉️🤔
    • [ ] no-export export const Some = ... ⁉️🤔
    documentation help wanted question 
    opened by ri7nz 0
Releases(v1.0.1)
Owner
Koding Ninja
Another open source collective doing web things
Koding Ninja
A React component to crop images/videos with easy interactions

react-easy-crop A React component to crop images/videos with easy interactions Demo Check out the examples: Basic example with hooks Basic example wit

Ricardo 1.4k Oct 10, 2021
Cropperjs as React component

Cropperjs as React component

null 1.6k Oct 8, 2021
A React based image & video annotation tool

A React based image & video annotation tool

Benny Lin 62 Sep 13, 2021
前端画板(基于 React 和 SVG)

前端画板(基于 React 和 SVG) 可以绘制各种图形,包括圆形、矩形、三角形、直线、弧线;可以设置图形轮廓线颜色、宽度;可以填充封闭图形,填充可选择颜色,图形可重叠。可以保存绘制内容到浏览器储存。具有撤销、恢复功能。 前端画板(基于React和SVG) 可以绘制各种图形,包括圆形、矩形、三角形

Liu Can 7 Aug 18, 2021
Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.

react-avatar-editor Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. Insta

Moritz Schwörer 1.8k Oct 13, 2021
😎 🏞 A React Img component let you handle image UX and performance as a Pro!

?? ?? A React Img component let you handle image UX and performance as a Pro!

Welly 491 Oct 9, 2021
Lightbox image image viewer for react with zoom, rotate and move feature with single or multi image 💡📦

Lightbox for react with zoom, rotate and move feature with touch support ????

Anam Ahmed 103 Oct 8, 2021
Pixel Annotation Tool Written in React and OpenCV.js

Pixel Annotation Tool Written in React and OpenCV.js

Rand Xie 17 Oct 8, 2021
🏹 Draw arrows between React elements 🖋

react-archer ?? Draw arrows between DOM elements in React ?? Installation npm install react-archer --save or yarn add react-archer Example Try it out!

Pierre Poupin 710 Oct 10, 2021
Vue Avatar Cropper - 👧 A simple and elegant avatar cropping and upload plugin.

Vue Avatar Cropper - ?? A simple and elegant avatar cropping and upload plugin.

安正超 429 Sep 25, 2021
An infinitely customizable image annotation library built on React

An infinitely customizable image annotation library built on React

Arian Valdez 241 Oct 5, 2021
A component to reveal images on user interaction, written with TypeScript + React.

A component to reveal images on user interaction, written with TypeScript + React.

Nik 67 Aug 20, 2021
🌈 A React image component. Simple realization of image shadow.

?? A React image component. Simple realization of image shadow.

null 18 Sep 23, 2021
Highly customisable Crop component for React Native 💅 >

react-native-avatar-crop Supports rect and circle cropping. Use cropArea={{width, height}} for custom aspect ratio. Download apk to see it in action,

Aravind Vemula 20 Sep 5, 2021
A simple solution to get text from images using tesseract.js

A simple solution to get text from images using tesseract.js

Gustavo Roberge Warmling 7 Oct 6, 2021
Image comparison slider. Compare images before and after.

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Dmitry Snisarenko 91 Sep 29, 2021
Aiming to be a complete solution for avatar cropping in react.

react-avatar-cropper React Avatar Cropper aims to be an out of the box solution to solve the avatar cropping problem for 99% of common use cases. Most

Justin 284 Jul 29, 2021
🌄↔️ A slider component with pinch to zoom capabilities inspired by Instagram

??↔️ A slider component with pinch to zoom capabilities inspired by Instagram

Sean Kozer 46 Aug 27, 2021
react image crop

collaborators wanted I have barely no time work on improve this project, needs collaborators for project maintenance. React Image Cropper A React.JS I

jerry 170 Sep 14, 2020