diff --git a/.gitignore b/.gitignore
index 000fe4a..edc3a0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,6 @@
node_modules
npm-debug.log
.DS_Store
-build
.cache
*.iml
.idea
diff --git a/README.md b/README.md
index eaac0a1..713d8a8 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ A circular progress indicator component, built with SVG. Easily customizable wit
[](https://badge.fury.io/js/react-circular-progressbar)
[](https://travis-ci.org/iqnivek/react-circular-progressbar)
-[](http://www.kevinqi.com/react-circular-progressbar/)
+[](http://www.kevinqi.com/react-circular-progressbar/)
## Installation
@@ -15,8 +15,6 @@ Install the npm module:
npm install react-circular-progressbar
```
-**Important**: you'll also need to copy [src/styles.css](src/styles.css) into your repo to use the default styling!
-
## Usage
Import the component:
@@ -25,7 +23,15 @@ Import the component:
import CircularProgressbar from 'react-circular-progressbar';
```
-..and use the component in your JSX:
+If you have a CSS loader configured, you can import the stylesheet:
+
+```javascript
+import 'react-circular-progressbar/dist/styles.css';
+```
+
+If not, you can copy [styles.css](dist/styles.css) into your project instead and use `` in your ``.
+
+Now you can use the component:
```javascript
@@ -52,7 +58,7 @@ For more in-depth examples, take a look at the [demo code](docs/demo.jsx) to see
## Customizing styles
-Use plain CSS to customize the styling - the [default CSS](src/styles.css) is a good starting point, but you can modify it as needed.
+Use plain CSS to customize the styling - the default CSS is a good starting point, but you can override it as needed.
#### CSS hooks
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 0000000..671fe9e
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.CircularProgressbar=t(require("react")):e.CircularProgressbar=t(e.React)}(this,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var r=0;r
+ */
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
+ fill: #3e98c7;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
+ fill: #fff;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
+ stroke: #fff;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
+ stroke: transparent;
+}
diff --git a/docs/index.js b/docs/index.js
index c4e7ce9..36a7f55 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -10373,7 +10373,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-console.log('react-circular-progressbar v' + "0.6.0");
+console.log('react-circular-progressbar v' + "0.7.0");
var githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
diff --git a/assets/react-circular-progressbar.gif b/docs/react-circular-progressbar.gif
similarity index 100%
rename from assets/react-circular-progressbar.gif
rename to docs/react-circular-progressbar.gif
diff --git a/package.json b/package.json
index 1ec63d3..56b5dd1 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "0.7.0",
"description": "A circular progress indicator component",
"author": "Kevin Qi ",
- "main": "./build/index.js",
+ "main": "./dist/index.js",
"repository": "https://github.com/iqnivek/react-circular-progressbar.git",
"license": "MIT",
"keywords": [
@@ -12,10 +12,15 @@
"react-component",
"svg"
],
+ "style": "dist/styles.css",
+ "files": [
+ "dist"
+ ],
"scripts": {
- "build": "NODE_ENV=production webpack && npm run build:demo",
- "build:demo": "NODE_ENV=demo webpack && cp ./src/styles.css ./docs/styles.css",
- "clean": "rimraf build",
+ "build": "NODE_ENV=production webpack && npm run build:demo && npm run build:css",
+ "build:css": "mkdir -p dist && cp ./src/styles.css ./dist/styles.css && cp ./src/styles.css ./docs/styles.css",
+ "build:demo": "NODE_ENV=demo webpack",
+ "clean": "rimraf dist",
"lint": "eslint src test",
"prepare": "npm run clean && npm run build",
"test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js",
diff --git a/webpack.config.js b/webpack.config.js
index ea0a514..5bb90e1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -70,7 +70,7 @@ if (nodeEnv === 'production') {
amd: 'react'
}
};
- webpackConfig.output.path = path.resolve(__dirname, 'build');
+ webpackConfig.output.path = path.resolve(__dirname, 'dist');
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
sourceMap: false