This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

svg-to-chakra

create-chakraicon

transform SVG asset to be React Chakra-UI Icon

CLI

Usage (CLI)

npx create-chakraicon -n "MyIcon" -i ./myicon.svg -o ./MyIcon.js

Options

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

Pipe (stdout)

$> 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-chakraicon -n "Rin"
// output
import { createIcon } from "@chakra-ui/react";
export const Rin = createIcon({
  displayName: "Rin",
  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"
});

Pipe (output file)

$> 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-chakraicon -n "Rin" > RinIcon.js 

Usage (API)

import { api } from 'create-chakraicon'
// or
import api from 'create-chakraicon/api'
// exported function
api {
  createChakraProperties: [Function: createChakraProperties],
  createChakraFunctional: [Function: createChakraFunctional],
  importChakraIcon: [Function: importChakraIcon],
  createSourceChakraIcon: [Function: createSourceChakraIcon],
  hastSVGToChakraProperties: [Function: hastSVGToChakraProperties]
}

Typedefs

PropsChakraProperties ⇒ Object

PropsChakraFunctional ⇒ Object

SvgProperties ⇒ Object

example of @param

{
    type: 'root',
    children: [
      {
        type: 'element',
        tagName: 'svg',
        properties: { viewBox: '0 0 200 200' },
        children: [ [Object], [length]: 1 ],
        metadata: '\n  '
      },
      [length]: 1
    ]
  }
}

PropsChakraProperties ⇒ Object

Kind: global typedef
Returns: Object - t.ObjectExpression
See: {https://babeljs.io/docs/en/babel-types#objectexpression}
Properties

Name	Type
displayName	String
viewBox	String
[path]	String
[d]	String

PropsChakraFunctional ⇒ Object

Kind: global typedef
Returns: Object - t.ExportNameDeclaration
See

• {https://babeljs.io/docs/en/babel-types#objectexpression}
• {https://babeljs.io/docs/en/babel-types#exportnameddeclaration}

Properties

Name	Type	Description
displayName	String	Will make as Identifier of your export function name
objectExpression	Object	BabelAST for Object Properties Chakra Icon

SvgProperties ⇒ Object

example of @param

{
    type: 'root',
    children: [
      {
        type: 'element',
        tagName: 'svg',
        properties: { viewBox: '0 0 200 200' },
        children: [ [Object], [length]: 1 ],
        metadata: '\n  '
      },
      [length]: 1
    ]
  }
}

Kind: global typedef
Returns: Object - SvgProperties

Param	Type	Description
SVG	Object	HAST

Properties

Name	Type
d	String
viewBox	String

Alternative

• SVGR
• create-chakra-icon

License

See HERE