saadshahd · August 7, 2017 22:14 · Aug 7, 2017 · Aug 7, 2017
diff --git a/webpack.conf.js b/webpack.conf.js
@@ -0,0 +1,18 @@
+{
+  test: /\.svg$/,
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: 'babel-loader'
+    },
+    {
+      loader: 'svg-sprite-loader',
+      options: {
+        runtimeGenerator: require.resolve('./svg-to-icon'),
+        runtimeOptions: {
+          iconModule: conf.path.src('app/components/icon.js')
+        }
+      }
+    }
+  ]
+}
diff --git a/svg-to-icon.js b/svg-to-icon.js
@@ -0,0 +1,34 @@
+const path = require('path');
+const pascalCase = require('pascal-case');
+const {stringifyRequest} = require('loader-utils');
+const {stringifySymbol, stringify} = require('../../lib/utils');
+
+module.exports = function ({symbol, config, context, loaderContext}) {
+  const {spriteModule, symbolModule, runtimeOptions} = config;
+  const compilerContext = loaderContext._compiler.context;
+
+  const iconModulePath = path.resolve(compilerContext, runtimeOptions.iconModule);
+  const iconModuleRequest = stringify(
+    path.relative(path.dirname(symbol.request.file), iconModulePath)
+  );
+
+  const spriteRequest = stringifyRequest({context}, spriteModule);
+  const symbolRequest = stringifyRequest({context}, symbolModule);
+  const parentComponentDisplayName = 'SpriteSymbolComponent';
+  const displayName = `${pascalCase(symbol.id)}${parentComponentDisplayName}`;
+
+  return `
+    import React from 'react';
+    import SpriteSymbol from ${symbolRequest};
+    import sprite from ${spriteRequest};
+    import ${parentComponentDisplayName} from ${iconModuleRequest};
+
+    const symbol = new SpriteSymbol(${stringifySymbol(symbol)});
+    sprite.add(symbol);
+    export default class ${displayName} extends React.Component {
+      render() {
+        return <${parentComponentDisplayName} glyph="${symbol.id}" {...this.props} />;
+      }
+    }
+  `;
+};