https://github.com/merodriguezblanco/react-transformicons

Transformicons for React apps
https://github.com/merodriguezblanco/react-transformicons

icons react transformicons

Last synced: about 1 year ago
JSON representation

Transformicons for React apps

• Host: GitHub
• URL: https://github.com/merodriguezblanco/react-transformicons
• Owner: merodriguezblanco
• License: mit
• Created: 2017-11-02T22:01:49.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-06-28T20:25:09.000Z (almost 7 years ago)
• Last Synced: 2025-03-29T14:35:03.091Z (about 1 year ago)
• Topics: icons, react, transformicons
• Language: JavaScript
• Size: 92.8 KB
• Stars: 7
• Watchers: 1
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  



# react-transformicons

[![npm](https://badge.fury.io/js/react-transformicons.svg)](https://www.npmjs.com/package/react-transformicons)

[![Build Status](https://travis-ci.org/merodriguezblanco/react-transformicons.svg?branch=master)](https://travis-ci.org/merodriguezblanco/react-transformicons)

## Introduction

[Transformicons](http://www.transformicons.com/) for React.

## Installation

In your console run:

    npm install react-transformicons

## Usage

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { MenuIcon } from 'react-transformicons';

ReactDOM.render(

  ,

  document.getElementById('root')

);

```

## Transformicon Components

- [Menu Icons](#menu-icons)

- [Grid Icons](#grid-icons)

- [Add Icons](#add-icons)

- [Remove Icons](#remove-icons)

- [Contact Icons](#contact-icons)

- [Form Icons](#form-icons)

- [Video Icons](#video-icons)

- [Scroll Icon](#scroll-icon)

- [Loader Icon](#loader-icon)

### Menu Icons

Provides with Menu icons.

![Menu Icons](/img/menu-icons.png)

#### 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

```handlebars

```

### Grid Icons

Provides with Grid icons.

![Grid Icons](/img/grid-icons.png)

#### 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

```handlebars

```

### Add Icons

Provides with Add icons.

![Add Icons](/img/add-icons.png)

#### 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

```handlebars

```

### Remove Icons

Provides with Remove icons.

![Remove Icons](/img/remove-icons.png)

#### 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

```handlebars

```

### Contact Icons

Provides with Contact icons.

![Contact Icons](/img/contact-icons.png)

#### 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

```handlebars

```

### Form Icons

Provides with Form icons.

![Form Icons](/img/form-icons.png)

#### 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

```handlebars

```

### Video Icons

Provides with Video icons.

![Video Icons](/img/video-icons.png)

#### 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

```handlebars

```

### Scroll Icon

Provides with a scroll icon.

![Scroll Icon](/img/scroll-icon.png)

#### Examples

```handlebars

```

### Loader Icon

Provides with a Loader icon.

![Loader Icon](/img/loader-icon.png)

#### Examples

```handlebars

```

# Contributions

We welcome and appreciate [contributions](CONTRIBUTING.md)!