Process only svg files from meta.json

[spustlik]

Hi, I wanted to reduce font only to my used icons, so I processed my applicaiton to find all occurence of mdi-* and then to filter out meta.json to only used icons and build my own font.
But there is some problem that all .svg files are compiled into font files
file index.js, line 314:
files: 'svg/.svg',
so i tried to use this
files: metaJson.map(icon => path.join(svgFolder, u${icon.codepoint}-${icon.name}.svg)),
and it works!

so please consider to change it to this behaviour to allow same scenario to others.
Thank you.
Jan

[Templarian]

I'm wondering if there is a nice way to do this without editing the meta.json as that file is a headache to edit manually.

Something like... npx @mdi/font-build 5.6.55 --include account,account-circle,... where we can just pull down the version if it's not found and generate just the icons listed (similar with an exclude list).

We could support codepoint / name in the list. This way people could still update versions while keeping it just their icons.

[Templarian]

Maybe with a font-build.json where we inherit everything from the --version and override anything in the root where the command is ran?

{
    "fontName": "Material Design Icons Custom",
    "fontFamily": "materialdesigniconscustom",
    "include": [
        "account",
        "F0001"
    ]
}

Note: capital letters we'll assume it's a codepoint and I guess guids are easy enough to detect due to length and format.

[spustlik]

Both versions are great enough, my personal preference is the first one (command line), but I am worried about command line length limit (specially on Windows), so json file config should be probably more robust for this.

[Templarian]

This would be an amazing hacktoberfest project. I'm going to list everything that needs to be done.

• Docs: If a font-build.json is not found explain in detail the options below or how to manually run the tool.

• Ask if they would like to generate a font-build.json and populate with defaults.

• Write method to validate font-build.json for typos / invalid format.

  • Link to docs if any issues are found.

• Add 2 new args.

  • --version (note if empty just output the tooling version).
  • --npmSVG (override font-build.json npmSVG).
  • Validate that --version is X.X.X format
  • Validate that --version exists in NPM for @mdi/svg.

• Sync pull down the @mdi/svg package

• If --version x.x.x and if no font-build.json exists link to the documentation and ask if they would like to generate one.

  • This font-build.json will override anything above.

• Documentation

• Document new args

• Document all properties in font-build.json

(WIP list above)

[jose-bernard-receeve]

Maybe this helps someone, what I ended up doing was

• Installed @mdi/font-build globally
• Installed @mdi/svg as devDependency
• Created a JSON config file with the array of allowed icons
• A script that reads the array and takes the SVG files from @mdi/svg and picks only the allowed and generates a reduced meta.json and a new SVGs directory
• npm tasks to executing everything

"mdi:prepare": "node setupWebFonts.js",
"mdi:build": "font-build --dir ./dist/mdi-build --dist ./public/assets/fonts/materialdesignicons",
"mdi:generate": "npm run mdi:prepare && npm run mdi:build"

setupWebFonts.js

const { readFileSync } = require("fs");
const fs = require("fs");
const path = require("path");
const mdiIcons = readFileSync("./mdi-icons.json");
const fullMeta = readFileSync("./node_modules/@mdi/svg/meta.json");

const mdiIconArray = JSON.parse(mdiIcons);
const fullMetaObj = JSON.parse(fullMeta);

const reducedMeta = fullMetaObj.reduce((prev, curr) => {
  if (mdiIconArray.includes(curr.name)) {
    return [...prev, curr];
  }
  return prev;
}, []);

const outputDir = "./dist/mdi-build";

if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

const folders = ["svg", "scss", "css", "fonts"];
folders.forEach((folder) => {
  if (!fs.existsSync(path.join(outputDir, folder))) {
    fs.mkdirSync(path.join(outputDir, folder));
  }
});

console.log("Folders created.");

console.log(`Generating ${reducedMeta.length} custom icons bundle...`);

for (let i = 0; i < reducedMeta.length; i++) {
  const iconMeta = reducedMeta[i];
  const svgFileName = `u${iconMeta.codepoint}-${iconMeta.name}.svg`;
  fs.copyFileSync(
    `./node_modules/@mdi/svg/svg/${iconMeta.name}.svg`,
    `${outputDir}/svg/${svgFileName}`
    );
  console.log(`${iconMeta.name} was copied`);
}

fs.copyFileSync(`./node_modules/@mdi/svg/font-build.json`, `${outputDir}/font-build.json`);
console.log(`font-build was copied`);

fs.writeFileSync(`${outputDir}/meta.json`, JSON.stringify(reducedMeta));

console.log("Done.");