Support returning react components when inlining svg files (cyrilwann…

…er#7)

README.md

@@ -50,6 +50,7 @@ module.exports = {
 | limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |
 | optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |
 | cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |
+| includeStrategy | `string` | `'string'` | When using the [?include](#include) query param, it returns a string by default. By setting this value to `'react'`, it returns a React component instead (requires manually installing the additional `@svgr/core` package). |
 | name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |
 | outputPath | | `string` | Images will be saved in this directory instead of the default webpack outputPath. |
 | publicPath | | `string` | The public path that should be used for image URLs instead of the default webpack publicPath. |
@@ -90,6 +91,8 @@ This loader also provides a variety of query params to provide you even more opt
 
 The image will now directly be included in your HTML without a data-uri or a reference to your file.
 
+By default, it will be included as a normal `string`. If you are in a React project and wish to transform it into a React component, set the [`includeStrategy`](#options) to `'react'` and run `npm install @svgr/core`.
+
 #### ?webp
 
 If this `?webp` query parameter is specified, `optimized-images-loader` automatically converts the image to the new WebP format.

src/options.ts

@@ -6,11 +6,13 @@ import { WebpOptions } from 'sharp';
 export interface LoaderOptions {
   optimize?: boolean;
   cacheFolder?: string;
+  includeStrategy?: 'string' | 'react';
   mozjpeg?: MozjpegOptions;
   oxipng?: OxipngOptions;
   webp?: WebpOptions;
   gifsicle?: GifsicleOptions;
   svgo?: Record<string, unknown>;
+  svgr?: Record<string, unknown>;
 }
 
 export interface OptionObject {

src/parseQuery.ts

@@ -10,6 +10,7 @@ export interface ImageOptions {
   forceInline?: boolean;
   forceUrl?: boolean;
   processLoaders?: boolean;
+  component?: 'react';
   lqip?: 'blur' | 'colors';
 }
 
@@ -45,6 +46,10 @@ const parseQuery = (rawQuery: string, loaderOptions: LoaderOptions): ImageOption
   // include raw image (used for svg)
   if (typeof query.include !== 'undefined') {
     options.processLoaders = false;
+
+    if (loaderOptions.includeStrategy === 'react') {
+      options.component = 'react';
+    }
   }
 
   // resize image

src/processLoaders.ts

@@ -23,7 +23,7 @@ const enrichResult = (
   // an array means it was not processed by the url-/file-loader and the result should still be an array
   // instead of a string. so in this case, append the additional export information to the array prototype
   if (Array.isArray(result)) {
-    return `var res = ${JSON.stringify(result)};res.width=${width};res.height=${height};res.format=${JSON.stringify(
+    return `var res=${JSON.stringify(result)};res.width=${width};res.height=${height};res.format=${JSON.stringify(
       format || '',
     )};module.exports = res;`;
   }
@@ -34,7 +34,7 @@ const enrichResult = (
 
   const output = result.replace(/((module\.exports\s*=)\s*)([^\s].*[^;])(;$|$)/g, 'var src = $3;');
 
-  return `${output}module.exports = {src:src,width:${width},height:${height},format:${JSON.stringify(
+  return `${output}module.exports={src:src,width:${width},height:${height},format:${JSON.stringify(
     format || '',
   )},toString:function(){return src;}};`;
 };
@@ -57,6 +57,43 @@ const replaceName = (
     .replace(/\[height\]/g, `${imageOptions.height || originalImageInfo.height}`);
 };
 
+/**
+ * Convert the image into a component
+ *
+ * @param {string} image Processed image
+ * @param {{ width?: number; height?: number; format?: string }} originalImageInfo Metadata of original image
+ * @param {ImageOptions} imageOptions Image options
+ * @param {OptionObject} loaderOptions Loader options
+ */
+const convertToComponent = (
+  image: string,
+  originalImageInfo: { width?: number; height?: number; format?: string },
+  imageOptions: ImageOptions,
+  loaderOptions: OptionObject,
+): string => {
+  if (imageOptions.component === 'react') {
+    const svgr = require('@svgr/core').default; // eslint-disable-line
+    const babel = require('@babel/core'); // eslint-disable-line
+
+    const code = svgr.sync(image, loaderOptions.svgr || {}, { componentName: 'SvgComponent' });
+    const transformed = babel.transformSync(code, {
+      caller: {
+        name: 'optimized-images-loader',
+      },
+      babelrc: false,
+      configFile: false,
+      presets: [
+        babel.createConfigItem(require('@babel/preset-react'), { type: 'preset' }), // eslint-disable-line
+        babel.createConfigItem([require('@babel/preset-env'), { modules: false }], { type: 'preset' }), // eslint-disable-line
+      ],
+    });
+
+    return transformed.code;
+  }
+
+  throw new Error(`Unknown component type ${imageOptions.component}`);
+};
+
 /**
  * Process further loaders (url-loader & file-loader)
  *
@@ -76,6 +113,11 @@ const processLoaders = (
 ): string => {
   // do not apply further loaders if not needed
   if (imageOptions.processLoaders === false) {
+    // transform result to a component
+    if (imageOptions.component === 'react') {
+      return convertToComponent(image.toString(), originalImageInfo, imageOptions, loaderOptions);
+    }
+
     if (Array.isArray(image)) {
       return enrichResult(image, originalImageInfo, imageOptions);
     }