feat: extend signature to allow svgr options (#1175)

Co-authored-by: Jakub Romańczyk <lorczyslav@gmail.com>

Author: ilteoood

.changeset/three-cups-juggle.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+feat: allow passing additional SVGR options through `getAssetTransformRules`

packages/repack/src/utils/__tests__/__snapshots__/getAssetTransformRules.test.ts.snap

@@ -62,6 +62,31 @@ exports[`getAssetTransformRules should add XML rule when svg="xml" 1`] = `
 ]
 `;
 
+exports[`getAssetTransformRules should include additional options for SVGR 1`] = `
+[
+  {
+    "test": /\\\\\\.\\(bmp\\|gif\\|jpg\\|jpeg\\|png\\|psd\\|webp\\|tiff\\|m4v\\|mov\\|mp4\\|mpeg\\|mpg\\|webm\\|aac\\|aiff\\|caf\\|m4a\\|mp3\\|wav\\|html\\|pdf\\|yaml\\|yml\\|otf\\|ttf\\|zip\\|obj\\)\\$/,
+    "use": {
+      "loader": "@callstack/repack/assets-loader",
+      "options": {
+        "inline": undefined,
+        "remote": undefined,
+      },
+    },
+  },
+  {
+    "test": /\\\\\\.svg\\$/,
+    "use": {
+      "loader": "@svgr/webpack",
+      "options": {
+        "dimensions": false,
+        "native": true,
+      },
+    },
+  },
+]
+`;
+
 exports[`getAssetTransformRules should return default asset transform rules when no options provided 1`] = `
 [
   {

packages/repack/src/utils/__tests__/getAssetTransformRules.test.ts

@@ -54,4 +54,14 @@ describe('getAssetTransformRules', () => {
     const ruleTest = rules[0]?.test;
     expect(ruleTest.test('test.svg')).toEqual(false);
   });
+
+  it('should include additional options for SVGR', () => {
+    const rules = getAssetTransformRules({
+      svg: { type: 'svgr', options: { dimensions: false } },
+    });
+
+    expect(rules).toHaveLength(2);
+    expect(rules[1]?.use?.options).toHaveProperty('dimensions', false);
+    expect(rules).toMatchSnapshot();
+  });
 });

packages/repack/src/utils/getAssetTransformRules.ts

@@ -4,11 +4,23 @@ import {
   getAssetExtensionsRegExp,
 } from './assetExtensions.js';
 
-function getSvgRule(type: 'svgr' | 'xml' | 'uri') {
-  if (type === 'svgr') {
+type SvgType =
+  | 'svgr'
+  | 'xml'
+  | 'uri'
+  | { type: 'svgr'; options: Record<string, any> };
+
+function getSvgRule(type: SvgType) {
+  const isTypeObject = typeof type === 'object';
+
+  if (type === 'svgr' || (isTypeObject && type?.type === 'svgr')) {
+    const additionalOptions = isTypeObject && type?.options;
     return {
       test: /\.svg$/,
-      use: { loader: '@svgr/webpack', options: { native: true } },
+      use: {
+        loader: '@svgr/webpack',
+        options: { native: true, ...additionalOptions },
+      },
     };
   }
 
@@ -38,7 +50,7 @@ interface GetAssetTransformRulesOptions {
    * - 'xml': Loads SVGs as raw XML source to be used with SvgXml from react-native-svg
    * - 'uri': Loads SVGs as inline URIs to be used with SvgUri from react-native-svg
    */
-  svg?: 'svgr' | 'xml' | 'uri';
+  svg?: SvgType;
 }
 
 /**

website/src/latest/api/utils/get-asset-transform-rules.md

@@ -20,7 +20,7 @@ interface GetAssetTransformRulesOptions {
       resourceExtensionType: string;
     }) => string;
   };
-  svg?: "svgr" | "xml" | "uri";
+  svg?: "svgr" | "xml" | "uri" | { type: "svgr", options: Record<string, any> };
 }
 ```
 
@@ -67,14 +67,21 @@ See [`assetsLoader` documentation](/api/loaders/assets-loader#remoteassetpath) f
 
 ### options.svg
 
-- Type: `'svgr' | 'xml' | 'uri'`
+- Type: `'svgr' | 'xml' | 'uri' | { type: "svgr", options: Record<string, any>}`
 
 Determines how SVG files should be processed:
 
 - `'svgr'`: Uses `@svgr/webpack` to transform SVGs into React Native components
+  - `type: "svgr"`: Uses `@svgr/webpack` to transform SVGs into React Native components and allows to configure additional options to `@svgr/webpack`.
 - `'xml'`: Loads SVGs as raw XML source to be used with `SvgXml` from `react-native-svg`
 - `'uri'`: Loads SVGs as inline URIs to be used with `SvgUri` from `react-native-svg`
 
+#### options.svg.options
+
+- Type: `Record<string, any>`
+
+Allows to configure additional options to `@svgr/webpack`. The full list of available options can be found in the [svgr doc](https://react-svgr.com/docs/options/).
+
 :::tip
 Learn more about using SVG in the [SVG guide](/docs/guides/svg).
 :::