react-transformicons

Introduction

Transformicons for React.

Installation

In your console run:

npm install react-transformicons

Add the following module to your webpack.config.js:

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              localIdentName: '[local]',
              modules: true
            }
          }
        ]
      }
    ]
  }

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { MenuIcon } from 'react-transformicons';

ReactDOM.render(
  <MenuIcon animation="butterfly" />,
  document.getElementById('root')
);

Transformicon Components

• Menu Icons
• Grid Icons
• Add Icons
• Remove Icons
• Contact Icons
• Form Icons
• Video Icons
• Scroll Icon
• Loader Icon

Menu Icons

Provides with Menu icons.

Parameters:

• animation - string, optional - Sets the menu animation type. In case this parameter is not provided, it will default to butterfly. Values available:
  • butterfly
  • minus
  • x-cross
  • arrow-up
  • arrow-360-left
  • arrow-left
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<MenuIcon />
<MenuIcon animation="butterly" />
<MenuIcon animation="minus" />
<MenuIcon animation="x-cross" />
<MenuIcon animation="arrow-up" />
<MenuIcon animation="arrow-360-left" />
<MenuIcon animation="arrow-left" />
<MenuIcon animation="arrow-left" isActive={true} />

Grid Icons

Provides with Grid icons.

Parameters:

• animation - string, optional - Sets the menu animation type. In case this parameter is not provided, it will default to rearrange. Values available:
  • rearrange
  • collapse
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<GridIcon />
<GridIcon animation="rearrange" />
<GridIcon animation="collapse" />
<GridIcon animation="collapse" isActive={true} />

Add Icons

Provides with Add icons.

Parameters:

• animation - string, optional - Sets the menu animation type. In case this parameter is not provided, it will default to minus. Values available:
  • minus
  • check
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<AddIcon />
<AddIcon animation="minus" />
<AddIcon animation="check" />
<AddIcon animation="minus" isActive={true} />

Remove Icons

Provides with Remove icons.

Parameters:

• animation - string, optional - Sets the menu animation type. In case this parameter is not provided, it will default to check. Values available:
  • check
  • chevron-left
  • chevron-right
  • chevron-down
  • chevron-up
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<RemoveIcon />
<RemoveIcon animation="check" />
<RemoveIcon animation="chevron-left" />
<RemoveIcon animation="chevron-right" />
<RemoveIcon animation="chevron-down" />
<RemoveIcon animation="chevron-up" />
<RemoveIcon animation="check" isActive={true} />

Contact Icons

Provides with Contact icons.

Parameters:

• animation - string, optional - So far, the only available animation is email.
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<ContactIcon />
<ContactIcon isActive={true}/>
<ContactIcon animation="email" />

Form Icons

Provides with Form icons.

Parameters:

• animation - string, optional - So far, the only available animation is search.
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<FormIcon />
<FormIcon isActive={true}/>
<FormIcon animation="search" />

Video Icons

Provides with Video icons.

Parameters:

• animation - string, optional - So far, the only available animation is play.
• isActive - boolean, optional - Sets initial state for the button. Defaults to false.

Examples

<VideoIcon />
<VideoIcon isActive={true}/>
<VideoIcon animation="play" />

Scroll Icon

Provides with a scroll icon.

Examples

<ScrollIcon />

Loader Icon

Provides with a Loader icon.

Examples

<LoaderIcon />

Contributions

We welcome and appreciate contributions!