pixo
Convert SVG icons into React components
npm i pixo
Pass a directory or SVG file path as the first argument.
$ pixo src --out-dir dist
Each SVG icon will be automatically optimized and renamed to a pascal case filename for the component. Icon components can then be imported into a React application.
import React from 'react'import CheckIcon from './CheckIcon' const App = <div> <CheckIcon /> </div>
The default component template includes props for:
size
(number) pixel width and height (default24
)color
(string) color value passed to the SVGfill
attribute (default'currentcolor'
)
SVG Requirements
Each SVG icon must conform to the following:
- Use a square
viewBox
attribute, preferably0 0 24 24
- Only use a single color (e.g. black)
- For best results, only use
<path>
elements - Do not use transforms
Pixo includes experimental support for <circle>
, <polygon>
, and <rect>
elements.
The following elements will be ignored:
- Elements within a
<defs>
or<clipPath>
- Elements with the
fill="none"
attribute <ellipse>
elements<line>
elements<polyline>
elements
<path>
elements
Converting SVG shapes into Most graphics applications can convert shapes into SVG paths.
- Adobe Illustrator: use the
Compound Path
command - Figma: TK
- Sketch: TK
Templates
Pixo uses a default template for rendering, but includes some built-in options.
default
: plain SVG with no stylingstyledSystem
: styled-component with margin, padding, and color props from styled-system
Custom Templates
To use a custom template, pass a path to your template to the --template
flag.
pixo icons --template custom-template.js
A template should be a function that returns a string for the component source code, written as a Node.js module.
// default templatemoduleexports = name viewBox pathData `import React from 'react' const Icon = ({ size, color, ...props}) => ( <svg {...props} viewBox='' width={size} height={size} fill={color} > <path d='' /> </svg>) Icon.displayName = 'Icon' Icon.defaultProps = { size: 24, color: 'currentcolor'} export default `
Template function arguments
name
camel cased name that can be used for the component nameviewBox
the original viewBox value from the SVGpathData
extracted path data for the<path>
element'sd
attribute
Options
Options can be passed as flags to the CLI or added to a pixo
field in your package.json
Run pixo --help
to see the list of options.
outDir
(string) output directory (default dist)template
(string) name of built-in template or path to custom templateindex
(boolean) create anindex.js
barrel moduleiconComponent
(boolean) create anIcon.js
wrapper componentrecursive
(boolean) recursively read all SVGs in subdirectories
CLI flags
-d --out-dir Output directory-t --template Name of built-in template or path to custom template-i --index Include index.js barrel module-c --icon-component Include wrapper Icon.js component-r --recursive Recursively read all SVGs in subdirectories
Example package.json
Related
- Microicon
- Building SVG Icons with React
- Reline
- React Icons
- Making SVG Icon Libraries for React Apps
- babel-plugin-inline-react-svg
- svg-react-loader
- react-svg-loader