v4

.eslintignore

@@ -1,6 +1,8 @@
 lib
 *.svg.react.js
+*.md
 coverage
-flow-typed
 node_modules
-example/public/
+example
+tests/resources
+jest.config.js

.eslintrc

@@ -1,10 +1,14 @@
 {
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "./packages/tsconfig.json",
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.eslint.json"
   },
-  "plugins": ["react", "prettier", "@typescript-eslint"],
+  "plugins": [
+    "react",
+    "prettier",
+    "@typescript-eslint"
+  ],
   "env": {
     "node": true,
     "es6": true
@@ -20,6 +24,11 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:@typescript-eslint/eslint-recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:markdown/recommended",
+    "prettier"
+  ],
+  "ignorePatterns": [
+    "plugin:@typescript-eslint/no-var-requires"
   ]
 }

.github/workflows/lint-test.yml

@@ -1,4 +1,4 @@
-name: react-svg-loader
+name: Test and Lint
 
 on: [push]
 
@@ -7,33 +7,30 @@ jobs:
     name: Lint
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
-    - name: Setup Node 12 for Lint
-      uses: actions/setup-node@v1
-      with:
-        node-version: 12
-    - name: Lint
-      run: |
-        yarn
-        yarn lint
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Setup Node 12 for Lint
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Lint
+        run: |
+          yarn install
+          yarn lint
+        env:
+          CI: true
   build:
     name: Build
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [8.x, 10.x, 12.x]
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
-      run: |
-        yarn
-        yarn build
-        yarn test
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js 12 for Build
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: install, build, and test
+        run: |
+          yarn install
+          yarn build
+          yarn test
+        env:
+          CI: true

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "bracketSameLine": false,
+  "jsxSingleQuote": true,
+  "printWidth": 100,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 4.0.0
+
+- Update svgo to v2
+- Update babel to v7
+- Using jest instead of tap
+- Fuller use of types
+
 ## 3.0.3
 
 - Ignore babel config files during transformation [#264](https://github.com/boopathi/react-svg-loader/pull/264)
@@ -39,19 +46,19 @@ Tests are run on Node 4, 6, and 8
 Previously, the output of the react-svg-loader was -
 
 ```js
-import React from "react";
+import React from 'react'
 export default class SVG extends React.Component {
   render() {
-    return <svg {...this.props}>{svgContent}</svg>;
+    return <svg {...this.props}>{svgContent}</svg>
   }
 }
 ```
 
 and now it is -
 
 ```js
-import React from "react";
-export default props => <svg {...props}>{svgContent}</svg>;
+import React from 'react'
+export default props => <svg {...props}>{svgContent}</svg>
 ```
 
 ### Overridable classnames (to use with css-modules)
@@ -71,15 +78,15 @@ is transformed to
 So, you can pass/override some styles in the svg, for example -
 
 ```js
-import Image from "react-svg-loader!./image.svg";
-import styles from "./styles.css"; // with css-modules
+import Image from 'react-svg-loader!./image.svg'
+import styles from './styles.css' // with css-modules
 
 const imageStyles = {
   foo: styles.foo,
-  bar: styles.bar
-};
+  bar: styles.bar,
+}
 
-let component = <Image styles={imageStyles} />;
+let component = <Image styles={imageStyles} />
 ```
 
 ### Drop option `es5`
@@ -88,7 +95,7 @@ Previously, you could do,
 
 ```js
 {
-  loader: "react-svg-loader",
+  loader: 'react-svg-loader',
   options: {
     es5: true
   }
@@ -111,7 +118,7 @@ This is now deprecated and the **recommended** way to use react-svg-loader is to
 
 and with [babel-preset-env](https://github.com/babel/babel-preset-env) in `.babelrc`:
 
-```json
+```js
 {
   "presets": [
     [

README.md

@@ -14,10 +14,15 @@
 
 ### Current
 
-VERSION: `3.x` (master)
+VERSION: `4.x` (master)
 
 Refer [CHANGELOG](CHANGELOG.md)
 
+### v3.x
+
+[branch=v3](https://github.com/boopathi/react-svg-loader/tree/v3)
+
+
 ### v2.x
 
 [branch=v2](https://github.com/boopathi/react-svg-loader/tree/v2)

example/index.js

@@ -1,16 +1,16 @@
 /* global document */
-import React from "react";
-import ReactDOM from "react-dom";
-import Her from "./her.svg";
-import Pic from "./image.svg";
-import Dummy from "./dummy.svg";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Her from './her.svg'
+import Pic from './image.svg'
+import Dummy from './dummy.svg'
 
 let Root = (
   <div>
     <Dummy />
     <Pic />
     <Her width={300} height={300} />
   </div>
-);
+)
 
-ReactDOM.render(Root, document.getElementById("test"));
+ReactDOM.render(Root, document.getElementById('test'))

example/rollup.config.js

@@ -1,40 +1,39 @@
-import babel from "rollup-plugin-babel";
-import nodeResolve from "rollup-plugin-node-resolve";
-import cjs from "rollup-plugin-commonjs";
-import replace from "rollup-plugin-replace";
+import babel from 'rollup-plugin-babel'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import cjs from 'rollup-plugin-commonjs'
+import replace from 'rollup-plugin-replace'
 
-import reactSvg from "rollup-plugin-react-svg";
+import reactSvg from 'rollup-plugin-react-svg'
 
 export default {
-  input: "index.js",
+  input: 'index.js',
   output: {
-    format: "iife",
-    file: "public/bundle.js"
+    format: 'iife',
+    file: 'public/bundle.js',
   },
   plugins: [
     babel({
-      exclude: "node_modules/**"
+      exclude: 'node_modules/**',
     }),
     nodeResolve(),
     cjs(),
     replace({
-      "process.env.NODE_ENV": JSON.stringify("production")
+      'process.env.NODE_ENV': JSON.stringify('production'),
     }),
 
     // USAGE:
     reactSvg({
       // svgo options
       svgo: {
-        plugins: [], // passed to svgo
-        multipass: true
+        multipass: true,
       },
 
       // whether to output jsx
       jsx: false,
 
       include: null,
 
-      exclude: null
-    })
-  ]
-};
+      exclude: null,
+    }),
+  ],
+}

example/webpack.config.js

@@ -1,35 +1,29 @@
-const reactSvgLoader = require.resolve("../packages/react-svg-loader");
-const path = require("path");
+const reactSvgLoader = require.resolve('../packages/react-svg-loader')
+const path = require('path')
 
 module.exports = {
-  entry: "./index.js",
+  entry: './index.js',
   output: {
-    path: path.join(__dirname, "public"),
-    filename: "bundle.js"
+    path: path.join(__dirname, 'public'),
+    filename: 'bundle.js',
   },
   module: {
     rules: [
       {
         test: /\.svg$/,
         exclude: /node_modules/,
         use: [
-          "babel-loader",
+          'babel-loader',
           {
             loader: reactSvgLoader, // 'react-svg'
-            query: {
-              svgo: {
-                pretty: true,
-                plugins: [{ removeStyleElement: true }]
-              }
-            }
-          }
-        ]
+          },
+        ],
       },
       {
         test: /\.js$/,
-        loader: "babel-loader",
-        exclude: /node_modules/
-      }
-    ]
-  }
-};
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+}