Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for custom builds #224

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 smaller 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 the 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
16 changes: 11 additions & 5 deletions scripts/build-testpage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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) {
Expand Down
21 changes: 15 additions & 6 deletions scripts/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(',').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 = [];
const unicodeHexBySlug = [];
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++),
);
Expand Down
Loading