0.0.0 • Published 3 years ago
svg-to-chakra v0.0.0
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 bedisplayName
in Component Properties.-i/--input
: where your put theSVG
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
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
License
0.0.0
3 years ago