https://github.com/bmcmahen/create-react-icons

a CLI for generating your own react icon components from svg files
https://github.com/bmcmahen/create-react-icons

icon-pack icons react

Last synced: about 2 months ago
JSON representation

a CLI for generating your own react icon components from svg files

• Host: GitHub
• URL: https://github.com/bmcmahen/create-react-icons
• Owner: bmcmahen
• Created: 2019-04-10T05:39:29.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T19:29:39.000Z (over 1 year ago)
• Last Synced: 2024-07-06T07:02:17.550Z (3 months ago)
• Topics: icon-pack, icons, react
• Language: JavaScript
• Homepage:
• Size: 917 KB
• Stars: 78
• Watchers: 3
• Forks: 3
• Open Issues: 15
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

• awesome-list - create-react-icons

README

        
Deprecated:

While I'm likely to continue using this project for a while, I recommend you use [svgr](https://www.smooth-code.com/open-source/svgr/docs/cli/) instead. 



    

# Create react icons

  

[![npm package](https://img.shields.io/npm/v/create-react-icons/latest.svg)](https://www.npmjs.com/package/create-react-icons)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=create-react-icons%20is%20a%20CLI%20for%20generating%20your%20own%20react%20icon%20components%20from%20svg%20files.&url=https://github.com/bmcmahen/create-react-icons&hashtags=react,javascript)

[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](

https://twitter.com/intent/follow?screen_name=benmcmahen

)




Create react icons is a CLI for easily generating react icon components from a set of svg formatted icons. It was originally built to generate the feather icons found in [Sancho-UI](http://sancho-ui.com).

Install using yarn or npm

```

yarn global add create-react-icons

```

```

create-react-icons -s './icons/**.svg' -d path/to/destination

```

## Features

- Generate javascript or typescript components.

- Provide a custom ejs template, or use the [included template](https://github.com/bmcmahen/create-react-icons/blob/master/lib/default-js-template.ejs). This flexibility means you could create a component that uses styled-components, themes, or even a non-react component.

- Generated icons support tree shaking. Bundle only those icons that you use!

- Creates an index file which exports all of your generated icons.

It converts something like this:

```svg

    

    888

    

    

        

            

            

        

    

```

into this:

```jsx

import React from "react";

import PropTypes from "prop-types";

export function IconBaseball(props) {

  const { size, color, ...other } = props;

  return (

    

      888

      

      

        

          

          

        

      

    

  );

}

IconBaseball.defaultProps = {

  color: "currentColor",

  size: 24

};

IconBaseball.propTypes = {

  color: PropTypes.string,

  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])

};

```

## API

```

Usage: create-react-icons [options]

Options:

  -V, --version             output the version number

  -s, --source        Path to the svg icons source ('./path/**.svg')

  -d, --destination   Destination path for the react components (./path/destination)

  -t, --template      Path to ejs react component template (./path/template.ejs)

  --typescript              Generate typescript icons

  -h, --help                output usage information

```

## License

MIT