Merge pull request #4672 from easyops-cn/steve/v2-image-icons

feat(): support image icons

Author: qiaofengxi

.size-limit.js

@@ -29,7 +29,7 @@ module.exports = [
   },
   {
     path: "packages/brick-container/dist/icons--*.js",
-    limit: "882 KB",
+    limit: "890 KB",
   },
   {
     path: "packages/brick-container/dist/polyfill.*.js",

declarations/global.d.ts

@@ -22,7 +22,12 @@ declare module "*.svg" {
 }
 
 declare module "*.png" {
-  const value: any;
+  const value: string;
+  export = value;
+}
+
+declare module "*.gif" {
+  const value: string;
   export = value;
 }
 

packages/brick-container/webpack/common.js

@@ -158,6 +158,13 @@ module.exports = () => {
             )}`,
             to: "assets/illustrations",
           },
+          {
+            from: `${path.resolve(
+              require.resolve("@next-core/brick-icons/package.json"),
+              "../dist/image-icons"
+            )}`,
+            to: "assets/image-icons",
+          },
         ],
       }),
       new HtmlWebpackPlugin({

packages/brick-icons/rollup.config.js

@@ -1,3 +1,4 @@
+import path from "path";
 import { rollupFactory, rollupPlugins } from "@next-core/rollup-config-factory";
 import svgr from "@svgr/rollup";
 
@@ -48,5 +49,12 @@ export default rollupFactory({
         },
       ],
     }),
+    rollupPlugins.url({
+      include: ["**/*.png", "**/*.gif"],
+      fileName: "[dirname][name].[hash][extname]",
+      destDir: "dist/image-icons",
+      limit: 0,
+      sourceDir: path.join(__dirname, "src/icons/image"),
+    }),
   ],
 });

packages/brick-icons/scripts/pre-build.js

@@ -31,6 +31,21 @@ const flattenIcons = klawSync(iconsDir, {
   return { category, relativePath, basename };
 });
 
+const imageIconsDir = path.join(iconsDir, "image");
+const flattenImageIcons = klawSync(imageIconsDir, {
+  depthLimit: 1,
+  nodir: true,
+  filter: (item) => item.path.endsWith(".png") || item.path.endsWith(".gif"),
+  traverseAll: true,
+}).map((item) => {
+  const filename = path.basename(item.path);
+  const relativePath = `image/${filename}`;
+  const basename = filename.replace(/\.(png|gif)$/, "-$1");
+  return { category: "image", relativePath, basename };
+});
+
+flattenIcons.push(...flattenImageIcons);
+
 const groupedIcons = Object.entries(_.groupBy(flattenIcons, "category"));
 
 for (const [category, icons] of groupedIcons) {
@@ -42,20 +57,26 @@ for (const [category, icons] of groupedIcons) {
   );
   const exports = `export const ${changeCase.camelCase(category)}Category = {
     ${icons
-      .map(
-        (icon) =>
-          `  "${changeCase.paramCase(icon.basename)}": ${changeCase.pascalCase(
-            category
-          )}${changeCase.pascalCase(icon.basename)},`
-      )
+      .map((icon) => {
+        const specifier = `${changeCase.pascalCase(
+          category
+        )}${changeCase.pascalCase(icon.basename)}`;
+        return `  "${changeCase.paramCase(icon.basename)}": ${
+          category === "image"
+            ? `() => (<img src={\`\${__webpack_public_path__}assets/image-icons/\${${specifier}}\`} style={{ width: "1em", height: "1em", verticalAlign: "baseline" }} />)`
+            : specifier
+        },`;
+      })
       .join(os.EOL)}
   };`;
-  const content = imports.concat(exports).join(os.EOL);
+  const content = ['import React from "react";']
+    .concat(imports, exports)
+    .join(os.EOL);
 
   const categoryTsPath = path.join(
     process.cwd(),
     "src/generated/icons",
-    `${category}.ts`
+    `${category}.tsx`
   );
   fs.outputFileSync(
     categoryTsPath,