Skip to content

merodriguezblanco/react-transformicons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Transformicons

react-transformicons

npm Build Status

Introduction

Transformicons for React.

Installation

In your console run:

npm install react-transformicons

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

Provides with Menu icons.

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.

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.

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.

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.

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.

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.

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.

Scroll Icon

Examples

<ScrollIcon />

Loader Icon

Provides with a Loader icon.

Loader Icon

Examples

<LoaderIcon />

Contributions

We welcome and appreciate contributions!