Compatibility with webpack v2

.editorconfig

@@ -5,9 +5,13 @@
 root = true
 
 [*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-indent_style = space
-indent_size = 2

.eslintrc

@@ -0,0 +1,20 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "never"
+    }],
+    "no-console": ["error", { "allow": ["warn", "error", "info", "assert"] }],
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "react/jsx-filename-extension": "off"
+  }
+}

.gitignore

@@ -1,9 +1,12 @@
+# Include your project-specific ignores in this file
+# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
+
 # Logs
-logs
-*.log
-npm-debug.log*
+npm-debug.log
+yarn-error.log
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
+# Compiled addons (http://nodejs.org/api/addons.html)
+coverage
 build
 
 # Dependency directory

.travis.yml

@@ -1,8 +1,12 @@
 language: node_js
 sudo: false
 node_js:
-  - stable
+  - '7'
+  - '6'
 install:
-  - npm install
+  - yarn install
 script:
-  - npm test
+  - yarn run lint
+  - yarn run test:cover
+after_success:
+  - yarn run coveralls

LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Vladimir Kutepov
+Copyright (c) 2015-present Vladimir Kutepov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,23 +1,29 @@
 # svg-to-jsx-loader
 
-[Webpack](http://webpack.github.io/) loader that allows to load SVG files as [stateless functional](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components) [React](http://facebook.github.io/react/) components with [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx).
+[Webpack](https://webpack.js.org/) loader that allows to load SVG files as [stateless functional](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components) [React](http://facebook.github.io/react/) components with [svg-to-jsx](https://github.com/janjakubnanista/svg-to-jsx).
 
-[![Build Status](https://travis-ci.org/frenzzy/svg-to-jsx-loader.svg?branch=master)](https://travis-ci.org/frenzzy/svg-to-jsx-loader)
+[![NPM version](http://img.shields.io/npm/v/svg-to-jsx-loader.svg?style=flat-square)](https://www.npmjs.com/package/svg-to-jsx-loader)
+[![NPM downloads](http://img.shields.io/npm/dm/svg-to-jsx-loader.svg?style=flat-square)](https://www.npmjs.com/package/svg-to-jsx-loader)
+[![Build Status](http://img.shields.io/travis/frenzzy/svg-to-jsx-loader/master.svg?style=flat-square)](https://travis-ci.org/frenzzy/svg-to-jsx-loader)
+[![Coverage Status](https://img.shields.io/coveralls/frenzzy/svg-to-jsx-loader.svg?style=flat-square)](https://coveralls.io/github/frenzzy/svg-to-jsx-loader)
+[![Dependency Status](http://img.shields.io/david/frenzzy/svg-to-jsx-loader.svg?style=flat-square)](https://david-dm.org/frenzzy/svg-to-jsx-loader)
 
 ## Installation
 
+Using [npm](https://www.npmjs.com/):
+
 ```shell
 $ npm install svg-to-jsx-loader --save-dev
 ```
 
 ## Usage
 
-Webpack documentation: [Using loaders](http://webpack.github.io/docs/using-loaders.html)
+Webpack documentation: [Using loaders](https://webpack.js.org/concepts/loaders/)
 
-In your `webpack.config.js`, add the `svg-to-jsx-loader`, chained with the [`babel-loader`](https://babeljs.io/docs/setup/#webpack):
+In your `webpack.config.js`, add the `svg-to-jsx-loader`, chained with the [`babel-loader`](https://babeljs.io/docs/setup/#webpack2):
 
 ```js
-loaders: [
+rules: [
   {
     test: /\.svg$/,
     loaders: [
@@ -31,14 +37,13 @@ loaders: [
 Or you can find a working example in [test/webpack.config.js](https://github.com/frenzzy/svg-to-jsx-loader/blob/master/test/webpack.config.js) file:
 
 ```js
-loaders: [
+rules: [
   {
     test: /\.(js|svg)$/i,
     loader: 'babel-loader', // v6 or later
     exclude: /node_modules/,
     query: {
-      presets: ['react', 'es2015'],
-      plugins: ['transform-runtime']
+      presets: ['react']
     }
   },
   {
@@ -52,7 +57,7 @@ loaders: [
 
 ```svg
 <?xml version="1.0" encoding="iso-8859-1"?>
-<!-- forward-icon.svg -->
+<!-- 001-forward-icon.svg -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" width="24" height="24">
   <path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>
 </svg>
@@ -63,11 +68,13 @@ loaders: [
 ```js
 import React from 'react';
 
-const ForwardIcon = (props) => (
-  <svg height="24" width="24" version="1.1" viewBox="0 0 24 24" {...props}>
-    <path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>
-  </svg>
-);
+function ForwardIcon(props) {
+  return (
+    <svg height="24" width="24" version="1.1" viewBox="0 0 24 24" {...props}>
+      <path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>
+    </svg>
+  );
+}
 
 export default ForwardIcon;
 ```

index.js

@@ -1,30 +1,33 @@
-var svgtojsx = require('svg-to-jsx');
-var path = require('path');
+const path = require('path');
+const svgToJsx = require('svg-to-jsx');
 
 function toUpperCamelCase(string) {
-  return string.split(/[^a-zA-Z]+/).map(function (str) {
-    return str[0].toUpperCase() + str.slice(1);
-  }).join('');
+  return string.split(/[^a-zA-Z]+/).map(word =>
+    word && word[0].toUpperCase() + word.slice(1)
+  ).join('');
 }
 
-module.exports = function (content) {
+module.exports = function loader(content) {
   this.cacheable();
 
-  var callback = this.async();
-  var fileName = path.basename(this.resourcePath, '.svg');
-  var componentName = toUpperCamelCase(fileName) || 'Svg';
+  const callback = this.async();
+  const fileName = path.basename(this.resourcePath, '.svg');
+  const componentName = toUpperCamelCase(fileName) || 'Svg';
 
-  svgtojsx(content, function (err, jsx) {
-    if (err) return callback(err);
+  svgToJsx(content, (err, jsx) => {
+    if (err) {
+      callback(err);
+      return;
+    }
 
     callback(null,
-      'import React from \'react\';\n\n' +
+      `import React from 'react';\n` +
 
-      'const ' + componentName + ' = (props) => (' +
-      jsx.replace(/(<svg[^>]*)(>)/i, '$1 {...props}$2') +
-      ');\n\n' +
+      `function ${componentName}(props) {` +
+      `  return (${jsx.replace(/(<svg[^>]*)(>)/i, '$1 {...props}$2')});` +
+      `}\n` +
 
-      'export default ' + componentName + ';\n'
+      `export default ${componentName};`
     );
   });
 };

package.json

@@ -1,18 +1,12 @@
 {
   "name": "svg-to-jsx-loader",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "SVG to JSX loader module for webpack",
   "author": "Vladimir Kutepov",
   "license": "MIT",
   "homepage": "https://github.com/frenzzy/svg-to-jsx-loader#readme",
   "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/frenzzy/svg-to-jsx-loader.git"
-  },
-  "bugs": {
-    "url": "https://github.com/frenzzy/svg-to-jsx-loader/issues"
-  },
+  "repository": "frenzzy/svg-to-jsx-loader",
   "keywords": [
     "WebPack",
     "Loader",
@@ -22,20 +16,29 @@
     "Babel"
   ],
   "dependencies": {
-    "svg-to-jsx": "0.0.13"
+    "svg-to-jsx": "0.0.20"
   },
   "devDependencies": {
-    "babel-core": "^6.3.13",
-    "babel-loader": "^6.2.0",
-    "babel-plugin-transform-runtime": "^6.3.13",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "html-webpack-plugin": "^1.7.0",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "webpack": "^1.12.9"
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-react": "^6.24.1",
+    "coveralls": "^2.13.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.3",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul": "1.1.0-alpha.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "rimraf": "^2.6.1",
+    "webpack": "^2.4.1"
   },
   "scripts": {
-    "test": "webpack --config test/webpack.config.js"
+    "lint": "eslint index.js test",
+    "test": "node test/webpack.config.js",
+    "test:cover": "istanbul cover test/webpack.config.js",
+    "coveralls": "cat coverage/lcov.info | coveralls"
   }
 }

test/app.js

@@ -1,8 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ForwardIcon from './forward-icon.svg';
+import Icon1 from './001-forward-icon.svg';
+import Icon2 from './002-f0rward-ic0n.svg';
+import Icon3 from './003-ForwardIcon.svg';
+import Icon4 from './004.svg';
 
 ReactDOM.render(
-  <ForwardIcon fill="#61dafb" width="240" height="240" />,
+  <ul>
+    <li><Icon1 /></li>
+    <li><Icon2 width="64" height="64" /></li>
+    <li><Icon3 fill="#61dafb" width="64" height="64" /></li>
+    <li><Icon4 style={{ fill: '#61dafb' }} /></li>
+  </ul>,
   document.getElementById('root')
 );

test/svg-to-jsx-loader-spec.js

@@ -1,22 +1,56 @@
-var expected = (
-  'import React from \'react\';\n\n' +
+const expected = [
+  // 001-forward-icon.svg
+  // 003-ForwardIcon.svg
+  `import React from 'react';\n` +
 
-  'const ForwardIcon = (props) => (' +
-  '<svg height="24" width="24" version="1.1" viewBox="0 0 24 24" {...props}>' +
-  '\n\t<path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>\n' +
-  '</svg>' +
-  ');\n\n' +
+  `function ForwardIcon(props) {` +
+  `  return (<svg height="24" width="24" version="1.1" viewBox="0 0 24 24" {...props}>` +
+  `\n\t<path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>\n` +
+  `</svg>);` +
+  `}\n` +
 
-  'export default ForwardIcon;\n'
-);
+  `export default ForwardIcon;`,
 
-module.exports = function(actual) {
+  // 002-f0rward-ic0n.svg
+  `import React from 'react';\n` +
 
+  `function FRwardIcN(props) {` +
+  `  return (<svg height="24" width="24" version="1.1" viewBox="0 0 24 24" {...props}>` +
+  `\n\t<path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>\n` +
+  `</svg>);` +
+  `}\n` +
+
+  `export default FRwardIcN;`,
+
+  // 003-ForwardIcon.svg
+  `import React from 'react';\n` +
+
+  `function ForwardIcon(props) {` +
+  `  return (<svg height="24" width="24" version="1.1" viewBox="0 0 24 24" {...props}>` +
+  `\n\t<path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>\n` +
+  `</svg>);` +
+  `}\n` +
+
+  `export default ForwardIcon;`,
+
+  // 004.svg
+  `import React from 'react';\n` +
+
+  `function Svg(props) {` +
+  `  return (<svg height="24" width="24" {...props}>` +
+  `\n\t<path d="M21 11l-7-7v4C7 9 4 14 3 19c2.5-3.5 6-5.1 11-5.1V18l7-7z"/>\n` +
+  `</svg>);` +
+  `}\n` +
+
+  `export default Svg;`,
+];
+
+module.exports = (actual) => {
   console.assert(
-    actual === expected,
-    'svg-to-jsx-loader should return stateless functional react component' +
-    '\n\n==> Actual result:\n' + actual +
-    '\n\n==> Expected result:\n' + expected
+    expected.find(x => x === actual),
+    `svg-to-jsx-loader should return stateless functional react component` +
+    `\n\n==> Actual result:\n${actual}` +
+    `\n\n==> Expected result:\n${expected}`
   );
 
   return actual;