From 403e33e7958768f168b5cce8491ba37bfee24b89 Mon Sep 17 00:00:00 2001 From: LitoMore Date: Sat, 4 Jan 2025 21:45:06 +0800 Subject: [PATCH 1/2] Add support for custom builds --- README.md | 32 ++++++++++++++++++++++++++++++++ scripts/build-testpage.js | 16 +++++++++++----- scripts/build.js | 21 +++++++++++++++------ 3 files changed, 58 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a71f7ba..383d328 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,38 @@ Where `[ICON NAME]` is replaced by the icon name, for example: In this example we use the `` tag, but any inline HTML tag should work as you expect. +## Custom Builds + +You can specify which icons need to be build for a smaller file size. + +1. Clone and install dependencies: + +```shell +git clone git@github.com: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 +``` + +Next environment variables are available to customize the 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 diff --git a/scripts/build-testpage.js b/scripts/build-testpage.js index b067356..bd71360 100644 --- a/scripts/build-testpage.js +++ b/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) { diff --git a/scripts/build.js b/scripts/build.js index 8960eb1..b11c1a7 100644 --- a/scripts/build.js +++ b/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,11 +48,11 @@ 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(',').filter(Boolean)); +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 = []; @@ -59,7 +60,15 @@ const buildSimpleIconsSvgFontFile = async () => { let startUnicode = 0xea01; let glyphsContent = ''; - for (const key of iconKeys) { + for (const iconData of icons) { + const iconSlug = getIconSlug(iconData); + const key = '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++), ); From f51a83099af8e431f8f719ad82bedabfa35b5436 Mon Sep 17 00:00:00 2001 From: LitoMore Date: Thu, 9 Jan 2025 15:44:44 +0800 Subject: [PATCH 2/2] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Álvaro Mondéjar Rubio --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 383d328..e1d5c5f 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ cd simple-icons-font npm install ``` -2. Use environment variable `SI_FONT_SLUGS_FILTER` to filter icons to include: +2. Use the environment variable `SI_FONT_SLUGS_FILTER` to filter icons to include: ```shell SI_FONT_SLUGS_FILTER=github,simpleicons npm run build