@next-core/build-next-bricks 1.1.1 → 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.1",
+  "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": "f4639c59925a6f007fdf03630bcb9a9b0163cd8b"
+  "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,52 +241,32 @@ export default async function build(config) {
             rootMode: "upward",
           },
         },
-        {
-          test: /\.svg$/i,
-          issuer(input) {
-            // The issuer is null (or an empty string) for dynamic import
-            return !config.svgAsAsset && (!input || /\.[jt]sx?$/.test(input));
-          },
-          use: [
-            {
-              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: true,
-                          },
-                        },
-                      },
-                    },
-                  ],
-                },
-              },
-            },
-          ],
-        },
         {
           // Images
-          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          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
+            ? [
+                {
+                  test: /\.svg$/i,
+                  use: getSvgrLoaders(false),
+                },
+              ]
+            : [])),
         {
           // Fonts
           test: /\.(woff|woff2|eot|ttf|otf)$/i,
@@ -294,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 };