@next-core/build-next-bricks 1.1.2 → 1.2.0

package/index.d.ts

@@ -1,6 +1,10 @@
 import type { Compiler, Configuration, RuleSetRule, container } from "webpack";
 
 export declare function build(config: BuildNextBricksConfig): Compiler;
+export declare function getSvgrLoaders(options: {
+  /** Set it to true for font icons */
+  convertCurrentColor?: boolean;
+}): RuleSetRule["use"];
 
 // Types of `SharedConfig` and `SharedObject` are copied from webpack.
 
@@ -66,7 +70,11 @@ export interface BuildNextBricksConfig {
   mode?: "development" | "production";
   entry?: Record<string, string>;
   extractCss?: boolean;
-  svgAsAsset?: boolean;
+  /** Treat svg as React component instead of asset */
+  svgAsReactComponent?: boolean;
+  /** Customize rules for svg */
+  svgRules?: RuleSetRule[];
+  /** By default the image assets are named `images/[hash][ext][query]` */
   imageAssetFilename?: string | ((pathData: any, assetInfo: any) => string);
   plugins?: Configuration["plugins"];
   moduleRules?: RuleSetRule[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-core/build-next-bricks",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Build next bricks",
   "homepage": "https://github.com/easyops-cn/next-core/tree/master/packages/build-next-bricks",
   "license": "GPL-3.0",
@@ -46,5 +46,5 @@
     "typescript": "^5.0.2",
     "webpack": "^5.76.2"
   },
-  "gitHead": "3e4c6996c85fb0bb14330cd1d128dd8ff690bf5e"
+  "gitHead": "5f7e81c60f23e6b1ad116bd07e943ff743900766"
 }

package/src/build.js

@@ -8,6 +8,7 @@ import cssnano from "cssnano";
 import cssnanoPresetLite from "cssnano-preset-lite";
 import EmitBricksJsonPlugin from "./EmitBricksJsonPlugin.js";
 import getCamelPackageName from "./getCamelPackageName.js";
+import getSvgrLoaders from "./getSvgrLoaders.js";
 
 const require = createRequire(import.meta.url);
 
@@ -240,54 +241,32 @@ export default async function build(config) {
             rootMode: "upward",
           },
         },
-        config.svgAsAsset
-          ? {
-              // Images
-              test: /\.(png|svg|jpg|jpeg|gif)$/i,
-              type: "asset/resource",
-              generator: {
-                filename:
-                  config.imageAssetFilename ?? "images/[hash][ext][query]",
-              },
-            }
-          : {
-              test: /\.svg$/i,
-              issuer(input) {
-                // The issuer is null (or an empty string) for dynamic import
-                return !input || /\.[jt]sx?$/.test(input);
-              },
-              use: [
-                {
-                  loader: "babel-loader",
-                  options: {
-                    rootMode: "upward",
-                  },
-                },
+        {
+          // Images
+          test: new RegExp(
+            `\\.(?:${[
+              "png",
+              "jpg",
+              "jpeg",
+              "gif",
+              ...(config.svgRules ? [] : ["svg"]),
+            ].join("|")})$`,
+            "i"
+          ),
+          type: "asset/resource",
+          generator: {
+            filename: config.imageAssetFilename ?? "images/[hash][ext][query]",
+          },
+        },
+        ...(config.svgRules ??
+          (config.svgAsReactComponent
+            ? [
                 {
-                  loader: "@svgr/webpack",
-                  options: {
-                    babel: false,
-                    icon: true,
-                    svgoConfig: {
-                      plugins: [
-                        {
-                          name: "preset-default",
-                          params: {
-                            overrides: {
-                              // Keep `viewbox`
-                              removeViewBox: false,
-                              convertColors: {
-                                currentColor: true,
-                              },
-                            },
-                          },
-                        },
-                      ],
-                    },
-                  },
+                  test: /\.svg$/i,
+                  use: getSvgrLoaders(false),
                 },
-              ],
-            },
+              ]
+            : [])),
         {
           // Fonts
           test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -296,12 +275,12 @@ export default async function build(config) {
             filename: "fonts/[hash][ext][query]",
           },
         },
-        ...(config.moduleRules || []),
+        ...(config.moduleRules ?? []),
       ],
     },
     devtool: false,
     optimization:
-      config.optimization ||
+      config.optimization ??
       (isBricks
         ? {
             splitChunks: {

package/src/getSvgrLoaders.js

@@ -0,0 +1,34 @@
+export default function getSvgrLoaders(options = {}) {
+  return [
+    {
+      loader: "babel-loader",
+      options: {
+        rootMode: "upward",
+      },
+    },
+    {
+      loader: "@svgr/webpack",
+      options: {
+        babel: false,
+        icon: true,
+        svgoConfig: {
+          plugins: [
+            {
+              name: "preset-default",
+              params: {
+                overrides: {
+                  // Keep `viewbox`
+                  removeViewBox: false,
+
+                  convertColors: {
+                    currentColor: options.convertCurrentColor ?? false,
+                  },
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  ];
+}

package/src/index.js

@@ -1,3 +1,4 @@
 import build from "./build.js";
+import getSvgrLoaders from "./getSvgrLoaders.js";
 
-export { build };
+export { build, getSvgrLoaders };