React Loading Icons

!Unit Test CI
!Integration Test CI

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

$3

``bash
yarn add react-loading-icons
`

`bash
npm install react-loading-icons
`

$3

You can import all the loaders at once:

`ts
import LoadingIcons from 'react-loading-icons'
`

and use them in a namespaced manner:

`tsx

`

$3

You can also import a single loader:

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

and use it without any fancy namespacing:

`tsx

`

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.

$3

`tsx
`

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

`tsx
// renders the Puff icon with a mint green stroke


// renders the Puff icon's mint green stroke with an opacity of 12.5%


// renders the Puff icon at 75% speed with a mint green stroke with an opacity of 12.5%

``