Diono
commented
1 year ago It seems that the problem comes from the forEach() which does not take into account the synchronous state of my function. It plays the 2 instances in parallel.
This shouldn't normally be a problem, but it seems that the list of icons to use in the CSS is not sandboxed.
If I change my code to a for(cons ... of ...) loop, I can play the 2 instances one after another. This temporarily solves my problem but slows down the process:
import fs from 'fs';
import path from 'path';
import svgtofont from 'svgtofont';
import type { CSSOptions } from 'svgtofont/lib/utils';
import svgoConfig from '../conf/svgo.config';
const iconsFolder = path.join(__dirname, '../www/src/icons');
const camalize = (str: string) =>
str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
const cssOptions = (fileName: string): CSSOptions => ({
cssPath: '../../fonticon/',
fileName: `_${camalize(fileName)}`,
fontSize: '1rem',
output: 'www/src/scss/fonticon'
});
const buildFont = async (fileName: string) => {
if (fileName) {
await svgtofont({
css: cssOptions(fileName),
dist: path.join(__dirname, '../www/src/fonticon'), // output path
fontName: fileName,
log: true,
src: path.join(__dirname, `../www/src/icons/${fileName}`), // svg path
svgoOptions: svgoConfig
});
console.log(`font icon "${fileName}" is generated!`);
}
};
fs.readdir(iconsFolder, async (err, files) => {
for (const file of files) {
if (file) {
await buildFont(file);
}
}
});
I created a node script (ts-node) to play the generations of several distinct font-icons.
svgtofont.ts :
My fonts are well created as well as the CSS files, if I have only one directory everything is fine.
Now, if I add a second directory, all CSS files get the code of the last generated batch.
The CSS file of the first font retrieves my files but declares the CSS classes of the 2nd batch.
The first generated CSS file: ❎ www/src/scss/fonticon/_adminFonticon.scss:
✅ INSTEAD OF
and the second generated CSS file ✅ www/src/scss/fonticon/_fonticon.scss: