diff --git a/packages/create-freesewing-pattern/template/default/package.json b/packages/create-freesewing-pattern/template/default/package.json
index a2bc00e9a2e..329c1351def 100644
--- a/packages/create-freesewing-pattern/template/default/package.json
+++ b/packages/create-freesewing-pattern/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",
diff --git a/packages/create-freesewing-pattern/template/default/rollup.config.js b/packages/create-freesewing-pattern/template/default/rollup.config.js
index 826dc00b49f..beea189998d 100644
--- a/packages/create-freesewing-pattern/template/default/rollup.config.js
+++ b/packages/create-freesewing-pattern/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' ]
diff --git a/packages/create-freesewing-pattern/template/typescript/package.json b/packages/create-freesewing-pattern/template/typescript/package.json
index 00bec47d3c9..1638f524f5a 100644
--- a/packages/create-freesewing-pattern/template/typescript/package.json
+++ b/packages/create-freesewing-pattern/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"
   },
diff --git a/packages/create-freesewing-pattern/template/typescript/rollup.config.js b/packages/create-freesewing-pattern/template/typescript/rollup.config.js
index b82ec50c9b3..a71db31b645 100644
--- a/packages/create-freesewing-pattern/template/typescript/rollup.config.js
+++ b/packages/create-freesewing-pattern/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()
   ]
diff --git a/packages/create-freesewing-pattern/template/typescript/src/typings.d.ts b/packages/create-freesewing-pattern/template/typescript/src/typings.d.ts
index 5417185cdc7..cd16102bb95 100644
--- a/packages/create-freesewing-pattern/template/typescript/src/typings.d.ts
+++ b/packages/create-freesewing-pattern/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 }
+}