Package Exports

svg-loaders-react
svg-loaders-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-loaders-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This is a zero-dependency React adaptation of Sam Herberts SVG Loaders library.

Usage

Install from NPM

npm install svg-loaders-react

Import the SVGLoaders components

Import all the loaders in a namespaced fashion

You can import all the loaders at once:

import * as SVGLoaders from 'svg-loaders-react';

and use them in a namespaced manner:

<SVGLoaders.Bars />

Import an individual loader

You can also import a single loader:

import { Bars } from 'svg-loaders-react'

and use it without any fancy namespacing:

<Bars />

Components

<Audio />

<BallTriangle />

<Bars />

<Circles />

<Grid />

<Hearts />

<Oval />

<Puff />

<Rings />

<SpinningCircles />

<TailSpin />

<ThreeDots />

Options

Each of these components should be able to accept any SVG tag presentation attributes as props.

Common Usage

// render the Puff loader with a stroke opacity of .125
<Puff strokeOpacity=".125" />

// render the Puff loader with a stroke of mint green
<Puff stroke="#98ff98" />

// render the Puff loader with a stroke of mint green and a stroke opactiy of .125
<Puff stroke="#98ff98" strokeOpacity=".125"/>