revamp project structure

- Use babel 6.0
- Remove CommonJS / ES bundle, only provide ES module source
- Notice change in README

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "es2015", "stage-1"]
+}

.gitignore

@@ -2,3 +2,4 @@ npm-debug.log
 /node_modules/
 /dist/
 /es/
+*.map

README.md

@@ -1,27 +1,35 @@
 # `svg-inline-react`: Inline SVG wrapper component for React
 
-This component wraps `dangerouslyInnerHTML` prop for easier use. Inlining SVG has pros and cons; See ["Using SVG"](https://css-tricks.com/using-svg/) for further detail.
+This component wraps `dangerouslyInnerHTML` prop for easier use. Inlining SVG has pros and cons; See ["Using SVG"](https://css-tricks.com/using-svg/) for further detail. However, I recommended to use static svg transformed as React component, since React now supports svg properly.
 
-## notice on transpilation
+## note for 1.x.x user: transpiling is discontinued
 
-Distributed source is transpiled. If you want to use ES module version, please import from `svg-inline-react/es`. (Rollup's jsnext:main' also option points to it)
+I removed `dist` and `es` and made `lib` (which is ES2015 source) default, and there are several reason for it. For now use of ES2015 (and modules) is widespread, there are many tools supporting it (i.e. Webpack 2, Rollup), and you will use them anyway – if you are using React/etc. If you want to stay in CommonJS land, please specify deps as `1.x.x`. i.e) `svg-inline-react: 1.x.x`
 
 ## Usage
 
 You can use [`svg-inline-loader`](https://github.com/sairion/svg-inline-loader) with [Webpack](https://webpack.github.io) to inline SVG.
 
-Use like:
+Example:
 
 ```jsx
-var InlineSVG = require('svg-inline-react');  // CommonJS
-import InlineSVG from 'svg-inline-react'; // ES2015
-
-<InlineSVG src={require("svg-inline!icon.svg")} /> // Use with loader
+import InlineSVG from 'svg-inline-react';
+
+// Use with loader
+<InlineSVG src={require("svg-inline-loader!icon.svg")} />
+
+// Use without loader
+const svgSource = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="48" height="48" viewBox="0 0 48 48">
+  <g id="artboard-1">
+    <path d="m-115.8,119.6c-12.8-22-3.2,33.6-3.2,33.6,8.8,34.4,145.6-17.6,145.6-17.6s168.8-30.4,180-34.4,96.8,1.6,96.8,1.6l-4.8-22.4c-64.8-46.4-75.2-16.8-88.8-20.8s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2-31.62-23.007-16.8,8.8c22.23,47.707-60.759,37.627-75.2,28-16.8-11.2,7.2,18.4,7.2,18.4,18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4-8.8-2.4-6.865-21.256-40,3.2c-33.6,24.8-44,8.8-44,8.8l-7.2-4.8z" class="cls-1"/>
+  </g>
+</svg>`;
+<InlineSVG src={svgSource} />
 ```
 
 ### prop `src` : string
 
-valid SVG string.
+valid SVG element string.
 
 ### prop `element` : string
 
@@ -33,6 +41,4 @@ This prop allows your svg file to be rendered directly, without a container elem
 
 ## Notes
 
-This component was initially included with `svg-inline-loader`, but since it is totally diffrent domain, I moved this component to separate package. Any suggestion or pull request to improve this component would be welcome!
-
 [inspired by](https://gist.github.com/MoOx/1eb30eac43b2114de73a)

karma.conf.js

@@ -1,3 +1,5 @@
+var webpackConf = require('./webpack.config.js');
+
 module.exports = function(config) {
     var conf = {
         basePath: '.',
@@ -20,26 +22,7 @@ module.exports = function(config) {
             'karma-chrome-launcher',
             'karma-webpack',
         ],
-        webpack: {
-            cache: true,
-            debug: true,
-            devtool: 'inline-source-map',
-            entry: [
-                './dist/index.js'
-            ],
-            module: {
-                loaders: [
-                    {
-                        test: /\.js$/,
-                        loader: 'babel',
-                    },
-                    {
-                        test: /\.svg$/,
-                        loader: 'svg-inline',
-                    },
-                ]
-            }
-        },
+        webpack: webpackConf,
         autoWatch: true,
         singleRun: false
     };

package.json

@@ -2,18 +2,11 @@
   "name": "svg-inline-react",
   "version": "1.0.3",
   "description": "Inline SVG wrapper component for React",
-  "main": "dist/index.js",
-  "jsnext:main": "es/index.js",
+  "main": "lib/index.js",
+  "jsnext:main": "lib/index.js",
   "scripts": {
     "test": "karma start",
-    "test:conformance": "npm run clean && npm run build && babel-node ./test/import.js ",
-    "clean": "rimraf es dist",
-    "build:es": "babel lib --out-dir es --blacklist=es6.modules --stage=0",
-    "build:cjs": "babel lib --out-dir dist --stage=0",
-    "build": "npm run build:es && npm run build:cjs",
-    "version": "npm run build",
-    "postversion": "git push && git push --tags",
-    "prepublish": "npm run build"
+    "build": "webpack"
   },
   "author": "Jaeho Lee <[email protected]>",
   "license": "MIT",
@@ -23,8 +16,7 @@
   },
   "keywords": [
     "svg",
-    "react",
-    "loader"
+    "react"
   ],
   "bugs": {
     "url": "https://github.com/sairion/svg-inline-react/issues"
@@ -34,17 +26,18 @@
     "react": "^0.14.0 || ^15.0.0"
   },
   "devDependencies": {
-    "babel": "^5.8.34",
-    "babel-core": "^5.8.35",
-    "babel-loader": "^5.4.0",
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-1": "^6.22.0",
     "karma": "^0.13.21",
     "karma-chrome-launcher": "^0.2.2",
     "karma-mocha": "^0.2.2",
     "karma-spec-reporter": "0.0.24",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
-    "react-dom": "^0.14.3",
-    "rimraf": "^2.5.1",
+    "react-dom": "^0.14.0 || ^15.0.0",
     "svg-inline-loader": "^0.4.1",
     "webpack": "^1.12.14"
   }

test/test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import assert from 'assert';
 
-import InlineSVG from '../dist';
+import InlineSVG from '../lib';
 
 
 describe('<InlineSVG />', function () {

webpack.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    cache: true,
+    debug: true,
+    devtool: 'cheap-module-hidden-source-map',
+    entry: [
+        './lib/index.js'
+    ],
+    output: {
+        filename: './dist/index.js',
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+            },
+            {
+                test: /\.svg$/,
+                loader: 'svg-inline-loader',
+            },
+        ]
+    }
+}