| Recommend this page to a friend! |
| Info | Documentation | Reputation | Support forum | Blog | Links |
| Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
| 2025-07-09 (4 hours ago) | Not yet rated by the users | Total: 25 | All time: 531 This week: 5 | |||||
| Version | License | JavaScript version | Categories | |||
| react-svg-components 1.0.2 | Custom (specified... | 5 | Animation, HTML, Graphics |
| Description | Author | ||||||||
This package can be used to generate animated graphics in SVG using React JS. |
|
SVG components built with [React][react].
Installation:
npm install react-svg-components
Usage:
import { Arc, Line, Rectangle } from 'react-svg-components';
Here's an example for each component:
<Arc radius={25} degreesOffset={15} degrees={270} strokeWidth={2} strokeColor={'#fff'} fillColor={'none'} strokeLinecap={'round'}/>
<Line lineLength={150} degrees={15} strokeWidth={5} strokeColor={'#fff'} strokeLinecap={'square'}/>
<Rectangle width={150} height={15} strokeWidth={5} strokeColor={'#fff'} fillColor={'#fff'}/>
Yes please!
Development:
You can use react-storybook for developing components.
git clone https://github.com/msalsas/react-svg-components.git
cd react-svg-components
npm install
npm run storybook
Go to localhost:9001
To run tests:
npm run test
Deployment:
To build all components into dist directory run:
gulp build
[react]: http://facebook.github.io/react/
| File | Role | Description | ||
|---|---|---|---|---|
| Data | Auxiliary data | |||
| Data | Auxiliary data | |||
| Aux. | Auxiliary script | |||
| Lic. | License text | |||
| Data | Auxiliary data | |||
| Doc. | Documentation | |||
| / | dist |
| File | Role | Description |
|---|---|---|
| |
Class | Class source |
| |
Class | Class source |
| |
Aux. | Auxiliary script |
| |
Class | Class source |
| / | src |
| File | Role | Description | ||
|---|---|---|---|---|
| |
Class | Class source | ||
| |
Class | Class source | ||
| |
Aux. | Auxiliary script | ||
| |
Class | Class source | ||
| / | src | / | stories |
| File | Role | Description |
|---|---|---|
| |
Aux. | Auxiliary script |
| |
Aux. | Auxiliary script |
| |
Aux. | Auxiliary script |
| / | __tests__ |
| File | Role | Description | ||
|---|---|---|---|---|
| |
Example | Example script | ||
| |
Example | Example script | ||
| |
Example | Example script | ||
| / | __tests__ | / | __snapshots__ |
| File | Role | Description |
|---|---|---|
| |
Data | Auxiliary data |
| |
Data | Auxiliary data |
| |
Data | Auxiliary data |
| Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
| 100% |
|
|
| Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.