Merge pull request transitive-bullshit#75 from xin-nie/xin-nie-svgr-support

Add SVG as component support

Author: transitive-bullshit

template/default/package.json

@@ -27,6 +27,7 @@
     "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@svgr/rollup": "^2.4.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.5",
     "babel-plugin-external-helpers": "^6.22.0",

template/default/rollup.config.js

@@ -4,6 +4,7 @@ import external from 'rollup-plugin-peer-deps-external'
 import postcss from 'rollup-plugin-postcss'
 import resolve from 'rollup-plugin-node-resolve'
 import url from 'rollup-plugin-url'
+import svgr from '@svgr/rollup'
 
 import pkg from './package.json'
 
@@ -27,6 +28,7 @@ export default {
       modules: true
     }),
     url(),
+    svgr(),
     babel({
       exclude: 'node_modules/**',
       plugins: [ 'external-helpers' ]

template/typescript/package.json

@@ -28,6 +28,7 @@
     "react-dom": "^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
+    "@svgr/rollup": "^2.4.1",
     "@types/jest": "^23.1.5",
     "@types/react": "^16.3.13",
     "@types/react-dom": "^16.0.5",
@@ -44,7 +45,7 @@
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss-modules": "1.0.8",
-    "rollup-plugin-typescript2": "^0.13.0",
+    "rollup-plugin-typescript2": "^0.17.0",
     "rollup-plugin-url": "^1.4.0",
     "typescript": "^2.8.3"
   },

template/typescript/rollup.config.js

@@ -4,6 +4,7 @@ import external from 'rollup-plugin-peer-deps-external'
 import postcss from 'rollup-plugin-postcss-modules'
 import resolve from 'rollup-plugin-node-resolve'
 import url from 'rollup-plugin-url'
+import svgr from '@svgr/rollup'
 
 import pkg from './package.json'
 
@@ -30,9 +31,11 @@ export default {
       writeDefinitions: true
     }),
     url(),
+    svgr(),
     resolve(),
     typescript({
-      rollupCommonJSResolveHack: true
+      rollupCommonJSResolveHack: true,
+      clean: true
     }),
     commonjs()
   ]

template/typescript/src/typings.d.ts

@@ -6,3 +6,12 @@ declare module '*.css' {
   const content: { [className: string]: string };
   export default content;
 }
+
+interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
+
+declare module '*.svg' {
+  const svgUrl: string;
+  const svgComponent: SvgrComponent;
+  export default svgUrl;
+  export { svgComponent as ReactComponent }
+}