https://github.com/react-component/icon-anim
Icon cutover or morph animate React Element
https://github.com/react-component/icon-anim
Last synced: 3 months ago
JSON representation
Icon cutover or morph animate React Element
- Host: GitHub
- URL: https://github.com/react-component/icon-anim
- Owner: react-component
- Created: 2016-06-03T07:12:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-04-29T19:22:49.000Z (over 4 years ago)
- Last Synced: 2025-08-09T14:16:57.650Z (5 months ago)
- Language: JavaScript
- Homepage: http://react-component.github.io/icon-anim/
- Size: 784 KB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
Awesome Lists containing this project
README
# rc-icon-anim
---
React IconAnim Component
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rc-icon-anim.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-icon-anim
[travis-image]: https://img.shields.io/travis/react-component/icon-anim.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/icon-anim
[coveralls-image]: https://img.shields.io/coveralls/react-component/icon-anim.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/icon-anim?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/icon-anim.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/icon-anim
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-icon-anim.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-icon-anim
## Browser Support
| |  |  |  | |
| --- | --- | --- | --- | --- |
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
## Development
```
npm install
npm start
```
## Example
http://localhost:8030/examples/
online example: http://react-component.github.io/icon-anim/
## install
[](https://npmjs.org/package/rc-icon-anim)
## Usage
## IconFontAnim
```js
import IconAnim from 'rc-icon-anim';
const IconFontAnim = IconAnim.IconFontAnim;
React.render(, container);
```
## IconSVGAim
```js
import IconAnim from 'rc-icon-anim';
const IconSVGAnim = IconAnim.IconSVGAnim;
React.render(, container);
```
## API
### IconFontAnim
| name | type | default | description |
|------------|----------|--------------|-----------------------|
| type | string | null | antd of icon name |
| appear | bool | true | appear anim |
| animType | string / object | `leftToRight` | animate type, provide : `alpha` `leftToRight` `rightToLeft` `scale` `scaleBack` `scaleBig` `rotate` `rotateX` `rotateY` `left3dFlip` `right3dFlip` `top3dFlip` `bottom3dFlip` `rubberBand`;
if the is object: { appear, enter, leave }, appear is null, with enter,[refer](https://github.com/react-component/icon-anim/blob/master/src/animTypesIconFont.jsx); |
| component | string / React.Element | `div` | component tag |
### IconSVGAnim
| name | type | default | description |
|------------|----------|--------------|-----------------------|
| type | string | null | provide: [svg](https://github.com/react-component/icon-anim/blob/master/src/svg.js) |
| children | React.Element | null | children can not coexist with the type, Normative References [svg](https://github.com/react-component/icon-anim/blob/master/src/svg.js) |
| appear | bool | true | appear anim |
| animation | array | null | animType default provide: [animTypeSVG](https://github.com/react-component/icon-anim/blob/master/src/animTypeSVG.js), is null we will use [`scale`](https://github.com/react-component/icon-anim/blob/master/src/animTypeSVG.js#L5) |
| viewBox | string | '0 0 1024 1024' | svg viewBox |