Allow custom builds filtering by icons

mondeja · Jul 30, 2023 · dc2bda4 · dc2bda4
1 parent 20adb5c
commit dc2bda4
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 51 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -38,7 +38,7 @@ jobs:
         run: npm install
       - name: Build library
         if: steps.get-releases.outputs.lib != steps.get-releases.outputs.si
-        run: npm run build
+        run: ./build.js > simple-icons.xml
       - name: Commit
         if: steps.get-releases.outputs.lib != steps.get-releases.outputs.si
         run: |
@@ -47,8 +47,8 @@ jobs:
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
           git config --global user.name "github-actions[bot]"
           # Create a version bump commit
-          git add simple-icons.xml package.json build.js README.md .editorconfig .gitignore images .github
-          git commit -m "Version bump"
+          git add .
+          git commit -m "Update simple-icons to v${{ steps.get-releases.outputs.si }}"
           # Merge develop into master
           git checkout master
           git merge develop -m "Release ${{ steps.get-releases.outputs.si }}"

diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
 /node_modules
-package-lock.json
+package-lock.json
+*.xml
+!simple-icons.xml
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Load all [simple-icons] brands directly to [drawio].
 ## Usage
 
 Inside a [drawio] project, go to `File` -> `Open library from` -> `URL` and
-paste the next URL:
+paste the next [URL](https://github.com/mondeja/simple-icons-drawio/releases/download/9.7.0/simple-icons.xml):
 
 ```
 https://github.com/mondeja/simple-icons-drawio/releases/download/9.7.0/simple-icons.xml
@@ -30,6 +30,36 @@ Individual icons can be located using the shapes search tool:
   <img src="https://github.com/mondeja/simple-icons-drawio/raw/develop/images/search-icon.png" "Simple Icons in drawio">
 </p>
 
+## Custom builds
+
+Better library load times can be achieved customizing your build for a subset of icons.
+
+1. Clone the repository and move inside it:
+
+```sh
+git clone ssh://github.com/mondeja/simple-icons-drawio
+cd simple-icons-drawio
+```
+
+2. Redirect the output of the _./build.js_ script to a new XML file:
+
+```sh
+./build.js > simple-icons.xml
+```
+
+Use the next optional environment variables to filter the icons to include:
+
+- `SI_DRAWIO_SLUGS_FILTER`: Comma separated string of slugs to include in the build. See [all slugs](https://github.com/simple-icons/simple-icons/blob/9.7.0/slugs.md).
+- `SI_DRAWIO_ALPHABET_FILTER`: Comma separated string of letters of the alphabet. All the slugs starting with one of these letters will be included.
+
+For example, next command will include the brands Deno, [diagrams.net] and Node.js:
+
+```sh
+SI_DRAWIO_SLUGS_FILTER=diagramsdotnet,simpleicons,deno,nodedotjs SI_DRAWIO_ALPHABET_FILTER=n,d ./build.js > simple-icons-subset.xml
+```
+
+3. Inside a [drawio] project, go to `File` -> `Open library from` -> `Device` and select the created file.
+
 [diagrams.net]: https://www.diagrams.net/
 [drawio]: https://github.com/jgraph/drawio
 [simple-icons]: https://simpleicons.org/
diff --git a/build.js b/build.js
@@ -4,13 +4,10 @@
  * Creates a drawio library with all simple-icons icons.
  */
 
-import fs from "node:fs";
 import zlib from "node:zlib";
 import * as icons from "simple-icons/icons";
 
-const SVG_TITLE_EXPR = /<title>([^<]+)</;
-
-const extractHtmlEncodedIconTitle = (svg) => svg.match(SVG_TITLE_EXPR)[1];
+const ICONS = Object.values(icons);
 
 const simplifyHexIfPossible = (hex) => {
   if (hex[0] === hex[1] && hex[2] === hex[3] && hex[4] == hex[5]) {
@@ -19,51 +16,92 @@ const simplifyHexIfPossible = (hex) => {
   return hex;
 };
 
-const mxGraph = (svg) => {
-  return (
+const encodedMxGraph = (path, hex) => {
+  return encodeURIComponent(
     `<mxGraphModel>` +
-    `<root>` +
-    `<mxCell id="0" />` +
-    `<mxCell id="1" parent="0" />` +
-    `<mxCell` +
-    ` id="2"` +
-    ` style="` +
-    `shape=image;` +
-    `editableCssRules=.*;` +
-    `image=data:image/svg+xml,${new Buffer.from(svg).toString("base64")};` +
-    `"` +
-    ` vertex="1"` +
-    ` parent="1"` +
-    `>` +
-    `<mxGeometry width="144" height="144" as="geometry" />` +
-    `</mxCell>` +
-    `</root>` +
-    `</mxGraphModel>`
-  );
+      `<root>` +
+      `<mxCell id="0" />` +
+      `<mxCell id="1" parent="0" />` +
+      `<mxCell` +
+      ` id="2"` +
+      ` style="` +
+      `shape=image;` +
+      `editableCssRules=.*;` +
+      `image=data:image/svg+xml,${new Buffer.from(
+        `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">` +
+          `<style>*{fill:#${simplifyHexIfPossible(hex)}}</style>` +
+          `<path d="${path}"/>` +
+          `</svg>`
+      ).toString("base64")};` +
+      `"` +
+      ` vertex="1"` +
+      ` parent="1"` +
+      `>` +
+      `<mxGeometry width="144" height="144" as="geometry" />` +
+      `</mxCell>` +
+      `</root>` +
+      `</mxGraphModel>`
+  ).replace("*", "%2A");
 };
 
-const encodeMxGraph = (xml) => encodeURIComponent(xml).replace("*", "%2A");
-
-const buildLibrary = () =>
-  Object.values(icons).map((icon) => {
-    const styledSvg =
-      `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">` +
-      `<style>*{fill:#${simplifyHexIfPossible(icon.hex)}}</style>` +
-      `<path d="${icon.path}"/>` +
-      `</svg>`;
-
-    const buffer = zlib.deflateSync(encodeMxGraph(mxGraph(styledSvg)));
-    return {
+const buildLibrary = function* (slugs = []) {
+  for (const icon of ICONS) {
+    if (slugs.length && !slugs.includes(icon.slug)) {
+      continue;
+    }
+    const buffer = zlib.deflateSync(encodedMxGraph(icon.path, icon.hex));
+    yield {
       xml: buffer.slice(2, buffer.length - 4).toString("base64"),
       h: 144,
       w: 144,
-      title: extractHtmlEncodedIconTitle(icon.svg),
+      title: icon.svg.split(">")[2].split("<")[0],
     };
-  });
+  }
+};
+
+const determineSlugs = () => {
+  const allSlugs = ICONS.map((icon) => icon.slug);
+  let slugs = [];
+
+  if (process.env.SI_DRAWIO_SLUGS_FILTER) {
+    slugs = process.env.SI_DRAWIO_SLUGS_FILTER.split(",");
+
+    const validSlugs = [];
+    for (const slug of slugs) {
+      if (!allSlugs.includes(slug)) {
+        process.stderr.write(
+          `[ERROR]: Invalid slug "${slug}" selected to build simple-icons-drawio library\n`
+        );
+      } else {
+        validSlugs.push(slug);
+      }
+    }
+    if (slugs.length !== validSlugs.length) {
+      process.stderr.write("INTERRUPTED\n");
+      process.exit(1);
+    }
+  }
+
+  if (slugs.length === 0) {
+    slugs = allSlugs;
+  }
+
+  if (process.env.SI_DRAWIO_ALPHABET_FILTER) {
+    const regex = new RegExp(
+      "^(" +
+        process.env.SI_DRAWIO_ALPHABET_FILTER.split(",")
+          .map((c) => c.toLowerCase())
+          .join("|") +
+        ")"
+    );
+    slugs = slugs.filter((slug) => slug.match(regex));
+  }
+
+  return slugs;
+};
 
-fs.writeFileSync(
-  "simple-icons.xml",
-  `<mxlibrary title="Simple Icons">${JSON.stringify(
-    buildLibrary()
-  )}</mxlibrary>`
+process.stdout.write(
+  `<mxlibrary title="Simple Icons">` +
+    JSON.stringify(Array.from(buildLibrary(determineSlugs()))) +
+    `</mxlibrary>`
 );
diff --git a/package.json b/package.json
@@ -1,9 +1,6 @@
 {
   "name": "simple-icons-drawio",
   "version": "9.7.0",
-  "scripts": {
-    "build": "node build.js"
-  },
   "keywords": [],
   "author": {
     "name": "Álvaro Mondéjar Rubio",