Merge pull request #1542 from easyops-cn/steve/lucide-icons

feat(): new icons lib: lucide

Author: weareoutman

bricks/icons/build.config.js

@@ -8,6 +8,10 @@ const easyopsIconsDir = path.resolve(
   require.resolve("@next-shared/icons/package.json"),
   "../src/icons"
 );
+const lucideIconsDir = path.resolve(
+  require.resolve("lucide-static/package.json"),
+  "../icons"
+);
 
 /** @type {import("@next-core/build-next-bricks").BuildNextBricksConfig} */
 export default {
@@ -46,6 +50,19 @@ export default {
           // Terser skip this file for minimization
           info: { minimized: true },
         },
+        {
+          context: lucideIconsDir,
+          from: "*.svg",
+          to: "chunks/lucide-icons",
+          // Terser skip this file for minimization
+          info: { minimized: true },
+        },
+        {
+          from: "src/lucide-icon/generated",
+          to: "chunks/lucide-icons",
+          // Terser skip this file for minimization
+          info: { minimized: true },
+        },
       ],
     }),
   ],

bricks/icons/docs/eo-icon.md

@@ -20,6 +20,10 @@ Your favorite icons, including [Ant Design Icons](https://ant.design/components/
       properties:
         lib: easyops
         icon: honeycomb
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: activity
 ```
 
 ## Examples
@@ -80,6 +84,32 @@ Your favorite icons, including [Ant Design Icons](https://ant.design/components/
         icon: github
 ```
 
+### Lucide
+
+[View all Lucide icons.](https://lucide.dev/icons/)
+
+```yaml preview
+- brick: div
+  properties:
+    style:
+      display: flex
+      gap: 1em
+      fontSize: 32px
+  children:
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: activity
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: languages
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: ambulance
+```
+
 ### EasyOps
 
 ```yaml preview
@@ -142,7 +172,7 @@ children:
   properties:
     style:
       display: grid
-      gridTemplateColumns: repeat(3, 1fr)
+      gridTemplateColumns: repeat(4, 1fr)
       justifyItems: center
       fontSize: 32px
       gap: 0.5em
@@ -162,6 +192,10 @@ children:
         lib: easyops
         category: default
         icon: account
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: ambulance
     - brick: eo-icon
       properties:
         lib: antd
@@ -183,6 +217,12 @@ children:
         icon: account
         style:
           color: gray
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: ambulance
+        style:
+          color: red
     - brick: eo-icon
       properties:
         lib: antd
@@ -205,6 +245,13 @@ children:
         icon: bell
         startColor: pink
         endColor: purple
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: ambulance
+        gradientDirection: left-to-right
+        startColor: pink
+        endColor: red
 ```
 
 ### Spinning
@@ -234,6 +281,11 @@ children:
         lib: easyops
         category: third-menu
         icon: placeholder-third-menu
+    - brick: eo-icon
+      properties:
+        spinning: true
+        lib: lucide
+        icon: loader-circle
 ```
 
 ### Fallback
@@ -267,6 +319,13 @@ children:
         fallback:
           lib: fa
           icon: question
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: oops
+        fallback:
+          lib: fa
+          icon: question
     - brick: eo-icon
       properties:
         lib: antd
@@ -284,3 +343,36 @@ children:
         fallback:
           imgSrc: "https://cdn.jsdelivr.net/npm/[email protected]/icons/y-chart.svg"
 ```
+
+### Lucide stroke width
+
+Lucide icons support setting `strokeWidth` which defaults to `2` (and restrict to range `[0.5, 3]`).
+
+```yaml preview
+- brick: div
+  properties:
+    style:
+      display: grid
+      gridTemplateColumns: repeat(6, 1fr)
+      width: fit-content
+      gap: 0.25em 1em
+      fontSize: 36px
+  children:
+    - brick: :forEach
+      dataSource: [0.5, 1, 1.5, 2, 2.5, 3]
+      children:
+        - brick: eo-icon
+          properties:
+            lib: lucide
+            icon: ambulance
+            strokeWidth: <% ITEM %>
+    - brick: :forEach
+      dataSource: [0.5, 1, 1.5, 2, 2.5, 3]
+      children:
+        - brick: span
+          properties:
+            textContent: <% ITEM %>
+            style:
+              fontSize: 16px
+              justifySelf: center
+```

bricks/icons/docs/eo-lucide-icon.md

@@ -0,0 +1,23 @@
+[View all Lucide icons.](https://lucide.dev/icons/)
+
+```yaml preview
+- brick: div
+  properties:
+    style:
+      display: flex
+      gap: 1em
+      fontSize: 32px
+  children:
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: activity
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: languages
+    - brick: eo-icon
+      properties:
+        lib: lucide
+        icon: ambulance
+```

bricks/icons/package.json

@@ -25,15 +25,17 @@
           "{projectRoot}/deploy",
           "{projectRoot}/src/antd-icon/generated",
           "{projectRoot}/src/easyops-icon/generated",
-          "{projectRoot}/src/fa-icon/generated"
+          "{projectRoot}/src/fa-icon/generated",
+          "{projectRoot}/src/lucide-icon/generated"
         ]
       },
       "build:types": {
         "outputs": [
           "{projectRoot}/dist-types",
           "{projectRoot}/src/antd-icon/generated",
           "{projectRoot}/src/easyops-icon/generated",
-          "{projectRoot}/src/fa-icon/generated"
+          "{projectRoot}/src/fa-icon/generated",
+          "{projectRoot}/src/lucide-icon/generated"
         ]
       },
       "build:main": {
@@ -80,6 +82,7 @@
     "@next-core/runtime": "^1.65.0",
     "@next-core/utils": "^1.8.2",
     "lodash": "^4.17.21",
+    "lucide-static": "0.539.0",
     "react": "0.0.0-experimental-ee8509801-20230117"
   },
   "devDependencies": {

bricks/icons/scripts/pre-build.js

@@ -305,6 +305,85 @@ const tasks = [];
   );
 }
 
+{
+  // --- Lucide Icons start ---
+  const lucideIconsPath = path.resolve(
+    require.resolve("lucide-static/package.json"),
+    "../icons"
+  );
+  const generatedDir = path.resolve(__dirname, "../src/lucide-icon/generated");
+  if (existsSync(generatedDir)) {
+    rmSync(generatedDir, { recursive: true, force: true });
+  }
+  mkdirSync(generatedDir);
+
+  const defaultCategory = "default";
+  const allIcons = {
+    [defaultCategory]: [],
+  };
+
+  const ranges = {};
+  const allSvg = [];
+  const iconsWithPath = [];
+  let cursor = -2;
+
+  tasks.push(
+    (async () => {
+      const icons = await readdir(lucideIconsPath);
+      for (const icon of icons) {
+        const [_m, iconName, ext] = icon.match(/^(.*?)(\.[^.]+)?$/);
+        if (ext === ".svg") {
+          allIcons[defaultCategory].push(iconName);
+          iconsWithPath.push([
+            defaultCategory,
+            path.join(lucideIconsPath, icon),
+          ]);
+        }
+      }
+
+      const hashes = [];
+
+      // Have to be sequential
+      for (const [category, iconPath] of iconsWithPath) {
+        const svg = await readFile(iconPath);
+        allSvg.push(svg);
+
+        let groupRanges = ranges[category];
+        if (!_.has(ranges, category)) {
+          groupRanges = ranges[category] = [];
+        }
+        cursor += svg.length + 1;
+        groupRanges.push(cursor);
+
+        const sha1 = createHash("sha1");
+        sha1.update(svg);
+        hashes.push(sha1.digest("hex").substring(0, 8));
+      }
+
+      // Let final hash to be irrelevant to the order of icons
+      hashes.sort();
+      const sha1 = createHash("sha1");
+      sha1.update(hashes.join(""));
+      ranges._hash = sha1.digest("hex").substring(0, 8);
+
+      await Promise.all([
+        writeFile(
+          path.resolve(generatedDir, "icons.json"),
+          JSON.stringify(allIcons)
+        ),
+        writeFile(
+          path.resolve(generatedDir, "ranges.json"),
+          JSON.stringify(ranges)
+        ),
+        writeFile(
+          path.resolve(generatedDir, `all.${ranges._hash}.svg`),
+          allSvg.join("\n")
+        ),
+      ]);
+    })()
+  );
+}
+
 Promise.all(tasks).then(
   () => {
     console.log("Generate icon files done!");

bricks/icons/src/data-providers/get-icons.ts

@@ -2,6 +2,7 @@ import { createProviderClass } from "@next-core/utils/general";
 import antdIcons from "../antd-icon/generated/icons.json";
 import easyopsIcons from "../easyops-icon/generated/icons.json";
 import faIcons from "../fa-icon/generated/icons.json";
+import lucideIcons from "../lucide-icon/generated/icons.json";
 
 export async function getEasyopsIcons(): Promise<Record<string, string[]>> {
   return easyopsIcons;
@@ -15,6 +16,10 @@ export async function getAntdIcons(): Promise<Record<string, string[]>> {
   return antdIcons;
 }
 
+export async function getLucideIcons(): Promise<Record<string, string[]>> {
+  return lucideIcons;
+}
+
 customElements.define(
   "icons.get-easyops-icons",
   createProviderClass(getEasyopsIcons)
@@ -26,3 +31,8 @@ customElements.define(
   "icons.get-antd-icons",
   createProviderClass(getAntdIcons)
 );
+
+customElements.define(
+  "icons.get-lucide-icons",
+  createProviderClass(getLucideIcons)
+);

bricks/icons/src/data-providers/get-libs.spec.ts

@@ -29,6 +29,14 @@ describe("getLibs", () => {
             }),
           ]),
         }),
+        expect.objectContaining({
+          lib: "lucide",
+          icons: expect.arrayContaining([
+            expect.objectContaining({
+              title: "activity",
+            }),
+          ]),
+        }),
       ])
     );
   });