More accurate typescript typings

README.md

@@ -24,13 +24,14 @@ render(<ReactSVG src="svg.svg" />, document.getElementById('root'))
 
 ## Live Examples
 
-- Basic Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/basic-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/basic-usage)
 - API Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/api-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/api-usage)
+- Basic Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/basic-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/basic-usage)
+- CSS-in-JS: [Source](https://github.com/tanem/react-svg/tree/master/examples/css-in-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/css-in-js)
 - External Stylesheet: [Source](https://github.com/tanem/react-svg/tree/master/examples/external-stylesheet) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/external-stylesheet)
 - Fallbacks: [Source](https://github.com/tanem/react-svg/tree/master/examples/fallbacks) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/fallbacks)
 - Loading: [Source](https://github.com/tanem/react-svg/tree/master/examples/loading) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/loading)
-- Typescript: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript)
-- CSS-in-JS: [Source](https://github.com/tanem/react-svg/tree/master/examples/css-in-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/css-in-js)
+- Typescript 2.x: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript-2.x) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript-2.x)
+- Typescript Latest: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript-latest) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript-latest)
 - UMD Build (Development): [Source](https://github.com/tanem/react-svg/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/umd-dev)
 - UMD Build (Production): [Source](https://github.com/tanem/react-svg/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/umd-prod)
 

examples/typescript/README.md → examples/typescript-2.x/README.md

@@ -1,4 +1,4 @@
-# ReactSVG Typescript Example
+# ReactSVG Typescript 2.x Example
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 

examples/typescript-2.x/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "typescript-2.x",
+  "description": "ReactSVG Typescript 2.x Example",
+  "keywords": [
+    "react-svg"
+  ],
+  "main": "src/index.tsx",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-scripts": "^2.1.1",
+    "react-svg": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.3.9",
+    "@types/node": "^10.12.10",
+    "@types/react": "^16.7.7",
+    "@types/react-dom": "^16.0.10",
+    "typescript": "^2.9.2"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

examples/typescript-latest/.env

@@ -0,0 +1 @@
+REACT_APP_DESCRIPTION=$npm_package_description

examples/typescript-latest/.gitignore

@@ -0,0 +1 @@
+/node_modules

examples/typescript-latest/README.md

@@ -0,0 +1,15 @@
+# ReactSVG Typescript Latest Example
+
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.

examples/typescript/package.json → examples/typescript-latest/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "typescript",
-  "description": "ReactSVG Typescript Example",
+  "name": "typescript-latest",
+  "description": "ReactSVG Typescript Latest Example",
   "keywords": [
     "react-svg"
   ],

examples/typescript-latest/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>%REACT_APP_DESCRIPTION%</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

examples/typescript-latest/src/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import ReactSVG from 'react-svg'
+
+ReactDOM.render(<ReactSVG src="svg.svg" />, document.getElementById('root'))

examples/typescript-latest/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

examples/typescript-latest/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}

examples/typescript-latest/tslint.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "linterOptions": {
+    "exclude": ["node_modules/**/*.ts"]
+  }
+}

src/index.tsx

@@ -10,14 +10,14 @@ export type OnInjected = (
 ) => void
 
 interface Props {
-  evalScripts: 'always' | 'once' | 'never'
-  fallback: React.ReactType
-  loading: React.ReactType
-  onInjected: OnInjected
-  renumerateIRIElements: boolean
+  evalScripts?: 'always' | 'once' | 'never'
+  fallback?: React.ReactType
+  loading?: React.ReactType
+  onInjected?: OnInjected
+  renumerateIRIElements?: boolean
   src: string
-  svgClassName: string
-  svgStyle: React.CSSProperties
+  svgClassName?: string
+  svgStyle?: React.CSSProperties
 }
 
 interface State {
@@ -110,7 +110,7 @@ export default class ReactSVG extends React.Component<
             isLoading: false
           }),
           () => {
-            onInjected(error, svg)
+            onInjected!(error, svg)
           }
         )
       }