react-loading-icons's Introduction

React Loading Icons

A pure SVG zero-dependency React adaptation of Sam Herbert's SVG Loaders library.

Built with React 17 and TypeScript. Check out the Demo!

Also works with JavaScript, of course (supports ESM tree shaking).

Usage

Install from NPM

yarn add react-loading-icons

npm install react-loading-icons

Import all the loaders in a namespaced fashion

You can import all the loaders at once:

import LoadingIcons from 'react-loading-icons'

and use them in a namespaced manner:

<LoadingIcons.Bars />

Import an individual loader

You can also import a single loader:

import { Bars } from 'react-loading-icons'

and use it without any fancy namespacing:

<Bars />

You can even go as far as copying over a single .js file from the dist/components directory to your project — this way you can directly import a certain loading icon without having to import the whole package.

Components

<Audio />
<BallTriangle />
<Bars />
<Circles />
<Grid />
<Hearts />
<Oval />
<Puff />
<Rings />
<SpinningCircles />
<TailSpin />
<ThreeDots />

Options

Each of these components will accept any SVG tag presentation attributes as well as all valid JSX properties (key, onClick, …) as props. Animation speed can be controlled via speed attribute (1 = 100% speed, .5 = 50% speed, 2 = 200%, and so on). The components are also smart about inheriting fill, fillOpacity, stroke, strokeOpactiy and strokeWidth, so these can also easily be controlled.

Common Usage

// renders the Puff icon with a mint green stroke
<Puff stroke="#98ff98" />

// renders the Puff icon's mint green stroke with an opacity of 12.5%
<Puff stroke="#98ff98" strokeOpacity={.125} />

// renders the Puff icon at 75% speed with a mint green stroke with an opacity of 12.5%
<Puff stroke="#98ff98" strokeOpacity={.125} speed={.75} />

react-loading-icons's People

Contributors

Stargazers

Watchers

react-loading-icons's Issues

Speed animation config

Hello, thanks for this library,

is there any way to tweak the speed of the animation rotation ?

Thanks

Package unmaintained

I'm sorry to say but the author of this package passed away. He was a good friend and a great developer.

This package is therefore unmaintained. If someone would like to take over and continue building / maintaining this package - you can create a fork and publish a new version. Please give credit for his work to Damian Kress - the author of this package.

Support for tree shaking

In my project I use only one icon but when I build the app and run a bundle analyzer all icons are bundled:

Most packages usually ship a second build which uses ES6 imports (this is required by many bundlers for tree shaking). To point bundlers at that build they have a module entry in package.json which points to the index file of the ESM build. Here's an example of Redux Toolkit:

https://github.com/reduxjs/redux-toolkit/blob/c6164cbd45d0f9665e775295f7986b666035e0ab/packages/toolkit/package.json#L26