Skip to content

fix(webfont): bring back all, outlined variant of webfont #1511

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.

Sign up for GitHub

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

Open
kakkokari-gtyih wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(webfont): bring back all, outlined variant of webfont #1511

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d03fb52
fix(webfont): bring back `all`, `outlined` variant of webfont
kakkokari-gtyih Apr 24, 2026
9d3e40e
Merge branch 'main' into fix-1452
kakkokari-gtyih May 13, 2026
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
13 changes: 7 additions & 6 deletions packages/icons-webfont/.build/build-webfont.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,15 @@ const DIR = getPackageDir('icons-webfont')
const outlineFiles = getAllIcons(true).outline;
const filledFiles = getAllIcons(true).filled;

// Generate filled icons
const filledDirname = path.join(DIR, 'icons-filled');
await processIcons(filledFiles, filledDirname, 'filled', DIR);
await generateFont('filled', 'filled', DIR);
Comment on lines +10 to +13
Copy link
Copy Markdown
Author

@kakkokari-gtyih kakkokari-gtyih Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the filled variant is required to generate the all variant, I've changed the code to build the filled first.


// Generate outline icons
for await (const [strokeName, strokeWidth] of Object.entries(strokes)) {
const dirname = path.join(DIR, 'icons-outlined', strokeName);

await processIcons(
outlineFiles,
dirname,
Expand All @@ -28,9 +33,5 @@ for await (const [strokeName, strokeWidth] of Object.entries(strokes)) {
);

await generateFont(strokeName, 'outline', DIR);
await generateFont(strokeName, 'all', DIR);
}

// Generate filled icons
const filledDirname = path.join(DIR, 'icons-filled');
await processIcons(filledFiles, filledDirname, 'filled', DIR);
await generateFont('filled', 'filled', DIR);
27 changes: 19 additions & 8 deletions packages/icons-webfont/.build/utilities.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import ttf2woff from "ttf2woff";
import wawoff2 from "wawoff2";

// Create Eta instance
const eta = new Eta({
const eta = new Eta({
autoEscape: false
});

Expand Down Expand Up @@ -271,14 +271,25 @@ export function calculateHash(content) {

export async function generateFont(strokeName, type, DIR) {

console.log(`Generating font for ${type === 'outline' ? `outline/${strokeName}` : `filled`}`);
const svgFiles = await loadSvgFiles(path.join(DIR, `icons-${type === 'outline' ? `outlined/${strokeName}` : 'filled'}`));
console.log(`Generating font for ${type !== 'filled' ? `${type}/${strokeName}` : 'filled'}`);
let svgFiles;
if (type === 'all') {
svgFiles = [
...((await loadSvgFiles(path.join(DIR, 'icons-filled'))).map(f => {
f.metadata.name = `${f.metadata.name}-filled`;
return f;
})),
...(await loadSvgFiles(path.join(DIR, `icons-outlined/${strokeName}`)))
]
} else {
svgFiles = await loadSvgFiles(path.join(DIR, `icons-${type === 'outline' ? `outlined/${strokeName}` : 'filled'}`));
}
const svgFontFileSource = await buildSvgFont(svgFiles);
const ttfFile = Buffer.from(svg2ttf(svgFontFileSource).buffer);
const woffFile = Buffer.from(ttf2woff(ttfFile).buffer);
const woff2File = await wawoff2.compress(ttfFile);

const fileName = `tabler-icons${type === 'outline' ? (strokeName !== "400" ? `-${strokeName}` : '') : `-${type}`}`;
const fileName = `tabler-icons${type !== 'filled' ? (strokeName !== "400" ? `-${strokeName}` : '') : ''}${type !== 'all' ? `-${type}` : ''}`;

// Ensure dist/fonts directory exists
mkdirSync(path.join(DIR, 'dist/fonts'), { recursive: true });
Expand All @@ -290,8 +301,8 @@ export async function generateFont(strokeName, type, DIR) {

const glyphs = svgFiles.map(f => ({
...f.metadata,
unicodeHex: f.metadata.unicode && f.metadata.unicode[0]
? f.metadata.unicode[0].codePointAt(0).toString(16)
unicodeHex: f.metadata.unicode && f.metadata.unicode[0]
? f.metadata.unicode[0].codePointAt(0).toString(16)
: ''
}))
.sort(function (a, b) {
Expand All @@ -302,7 +313,7 @@ export async function generateFont(strokeName, type, DIR) {
const aliasesArray = aliases[type] ? Object.entries(aliases[type]).map(([from, to]) => ({ from, to })) : []

const options = {
name: `Tabler Icons ${type.charAt(0).toUpperCase() + type.slice(1)}`,
name: `Tabler Icons ${type !== 'all' ? type.charAt(0).toUpperCase() + type.slice(1) : ''}`,
fileName,
glyphs,
v: packageJson.version,
Expand Down Expand Up @@ -377,7 +388,7 @@ export async function processIcons(files, dirname, type, DIR, strokeName = null,
}

// Remove old files
const globPattern = strokeName
const globPattern = strokeName
? path.join(DIR, `icons-outlined/${strokeName}/*.svg`)
: path.join(DIR, `icons-filled/*.svg`);
const existedFiles = (globSync(globPattern)).map(file => path.basename(file));
Expand Down
16 changes: 6 additions & 10 deletions packages/icons-webfont/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"build": "pnpm run copy && pnpm run build:prepare && pnpm run build:webfont && pnpm run build:css",
"build:prepare": "mkdir -p icons-outlined dist && rm -fdr dist/*",
"build:webfont": "rm -fd dist/fonts/* && node .build/build-webfont.mjs",
"build:css": "pnpm run build:css:outline && pnpm run build:css:filled",
"build:css": "pnpm run build:css:outline && pnpm run build:css:filled && pnpm run build:css:all",
Copy link
Copy Markdown
Author

@kakkokari-gtyih kakkokari-gtyih Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added the CSS generation for the all variant, as it was missing (but presented as an independent build script).

"build:css:filled": "sass dist/tabler-icons-filled.scss dist/tabler-icons-filled.css --style expanded && sass dist/tabler-icons-filled.scss dist/tabler-icons-filled.min.css --style compressed",
"build:css:outline": "sass dist/tabler-icons.scss dist/tabler-icons.css --style expanded --no-source-map && sass dist/tabler-icons.scss dist/tabler-icons.min.css --style compressed --no-source-map && sass dist/tabler-icons-200.scss dist/tabler-icons-200.css --style expanded --no-source-map && sass dist/tabler-icons-200.scss dist/tabler-icons-200.min.css --style compressed --no-source-map && sass dist/tabler-icons-300.scss dist/tabler-icons-300.css --style expanded --no-source-map && sass dist/tabler-icons-300.scss dist/tabler-icons-300.min.css --style compressed --no-source-map",
"build:css:all": "sass dist/tabler-icons.scss dist/tabler-icons.css --style expanded --no-source-map && sass dist/tabler-icons.scss dist/tabler-icons.min.css --style compressed --no-source-map && sass dist/tabler-icons-200.scss dist/tabler-icons-200.css --style expanded --no-source-map && sass dist/tabler-icons-200.scss dist/tabler-icons-200.min.css --style compressed --no-source-map && sass dist/tabler-icons-300.scss dist/tabler-icons-300.css --style expanded --no-source-map && sass dist/tabler-icons-300.scss dist/tabler-icons-300.min.css --style compressed --no-source-map",
Expand All @@ -42,23 +42,19 @@
"front-end",
"web"
],
"dependencies": {
"@tabler/icons": "workspace:",
"svg-path-commander": "^2.1.11",
"svgtofont": "^6.5.0"
},
Comment on lines -45 to -49
Copy link
Copy Markdown
Author

@kakkokari-gtyih kakkokari-gtyih Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These dependencies are only needed at build time, so I moved them to devDependencies.

"devDependencies": {
"@napi-rs/canvas": "^0.1.88",
"canvas": "^3.2.0",
"eta": "^3.4.0",
"glob": "^13.0.0",
"paper-jsdom": "^0.12.18",
"sass": "^1.97.3",
"svg-path-commander": "^2.1.11",
"svg-path-outline": "^1.0.1",
"svg2ttf": "^6.0.3",
"svgicons2svgfont": "^15.0.1",
"svgtofont": "^6.5.0",
"ttf2woff": "^3.0.0",
"wawoff2": "^2.0.1"
},
"peerDependencies": {},
"optionalDependencies": {}
}
}
}
43 changes: 21 additions & 22 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading