Add support for custom builds

README.md

@@ -22,13 +22,13 @@ The font can be served from a CDN such as [JSDelivr][jsdelivr-link] or [Unpkg][u
 #### JSDelivr
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons-font@v14/font/simple-icons.min.css" type="text/css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-icons-font@v13/font/simple-icons.min.css" type="text/css">
 ```
 
 #### Unpkg
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/simple-icons-font@v14/font/simple-icons.min.css" type="text/css">
+<link rel="stylesheet" href="https://unpkg.com/simple-icons-font@v13/font/simple-icons.min.css" type="text/css">
 ```
 
 These examples use the latest major version. This means you won't receive any updates following the next major release. You can use `@latest` instead to receive updates indefinitely. However this may cause an icon to disappear if it has been removed in the latest version.
@@ -79,6 +79,38 @@ Where `[ICON NAME]` is replaced by the icon name, for example:
 
 In this example we use the `<i>` tag, but any inline HTML tag should work as you expect.
 
+## Custom Builds
+
+You can specify which icons need to be build for a better file size.
+
+1. Clone and install dependencies:
+
+```shell
+git clone [email protected]:simple-icons/simple-icons-font.git
+cd simple-icons-font
+npm install
+```
+
+2. Use environment variable `SI_FONT_SLUGS_FILTER` to filter icons to include:
+
+```shell
+SI_FONT_SLUGS_FILTER=github,simpleicons npm run build
+```
+
+Here are some available environment variables for custom build:
+
+- `SI_FONT_SLUGS_FILTER`: Comma separated string of slugs to include in the build. See [all slugs].
+- `SI_FONT_PRESERVE_UNICODES`: By default, the build will retain the same unicode of an icon as the full build. You can set it to `false` to disable this.
+
+For example, if you set `SI_FONT_PRESERVE_UNICODES` to `false`, the unicode will still start at `0xea01` and keep increasing even you skipped some icons:
+
+```shell
+SI_FONT_SLUGS_FILTER=github,simpleicons SI_FONT_PRESERVE_UNICODES=false npm run build
+#=> github      \u{EA01}
+#=> simpleicons \u{EA02}
+```
+
 [latest-release]: https://github.com/simple-icons/simple-icons-font/releases/latest
 [jsdelivr-link]: https://www.jsdelivr.com/package/npm/simple-icons-font/
 [unpkg-link]: https://unpkg.com/browse/simple-icons-font/
+[all slugs]: https://github.com/simple-icons/simple-icons/blob/develop/slugs.md

scripts/build-testpage.js

@@ -6,8 +6,9 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
+import process from 'node:process';
 import pug from 'pug';
-import { getIconsData, titleToSlug } from 'simple-icons/sdk';
+import { getIconsData, getIconSlug } from 'simple-icons/sdk';
 import { fileURLToPath } from 'node:url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -16,11 +17,16 @@ const ROOT_DIR = path.resolve(__dirname, '..');
 const INPUT_FILE = path.join(ROOT_DIR, 'preview', 'html', 'testpage.pug');
 const OUTPUT_FILE = path.join(ROOT_DIR, 'preview', 'testpage.html');
 
+const { SI_FONT_SLUGS_FILTER = '' } = process.env;
+const siFontSlugs = new Set(SI_FONT_SLUGS_FILTER.split(','));
+
 const iconsData = await getIconsData();
-const icons = iconsData.map((icon) => ({
-  title: icon.title,
-  slug: icon.slug || titleToSlug(icon.title),
-}));
+const icons = iconsData
+  .map((icon) => ({
+    title: icon.title,
+    slug: getIconSlug(icon),
+  }))
+  .filter((icon) => siFontSlugs.size === 0 || siFontSlugs.has(icon.slug));
 
 pug.renderFile(INPUT_FILE, { icons }, (renderError, html) => {
   if (renderError) {

scripts/build.js

@@ -8,9 +8,10 @@
 import CleanCSS from 'clean-css';
 import fsSync, { promises as fs } from 'node:fs';
 import path from 'node:path';
+import process from 'node:process';
 import punycode from 'punycode/punycode.js';
 import * as simpleIcons from 'simple-icons/icons';
-import { getIconsData, titleToSlug } from 'simple-icons/sdk';
+import { getIconsData, getIconSlug } from 'simple-icons/sdk';
 import svg2ttf from 'svg2ttf';
 import SVGPath from 'svgpath';
 import ttf2eot from 'ttf2eot';
@@ -47,19 +48,27 @@ const cssDecodeUnicode = (value) => {
   return value.replace('&#x', '\\').replace(';', '').toLowerCase();
 };
 
+const { SI_FONT_SLUGS_FILTER = '', SI_FONT_PRESERVE_UNICODES } = process.env;
+const siFontSlugs = new Set(SI_FONT_SLUGS_FILTER.split(','));
+const siFontPreseveUnicodes = SI_FONT_PRESERVE_UNICODES !== 'false';
+
 const icons = await getIconsData();
-const iconKeys = icons.map((icon) => {
-  const slug = icon.slug || titleToSlug(icon.title);
-  return 'si' + slug.at(0).toUpperCase() + slug.slice(1);
-});
 
 const buildSimpleIconsSvgFontFile = async () => {
   const usedUnicodes = [];
   const unicodeHexBySlug = [];
   let startUnicode = 0xea01;
   let glyphsContent = '';
 
-  for (const key of iconKeys) {
+  for (const iconData of icons) {
+    const iconSlug = getIconSlug(iconData);
+    const iconKey = 'si' + iconSlug.at(0).toUpperCase() + iconSlug.slice(1);
+
+    if (siFontSlugs.size && !siFontSlugs.has(iconSlug)) {
+      if (siFontPreseveUnicodes) startUnicode++;
+      continue;
+    }
+
     const nextUnicode = punycode.ucs2.decode(
       String.fromCodePoint(startUnicode++),
     );
@@ -70,7 +79,7 @@ const buildSimpleIconsSvgFontFile = async () => {
       throw Error(`Unicodes must be unique. Found '${unicodeString}' repeated`);
     }
 
-    const icon = simpleIcons[key];
+    const icon = simpleIcons[iconKey];
     const verticalTransformedPath = SVGPath(icon.path)
       .translate(0, -24)
       .scale(50, -50)