omacranger / fontawesome-subset

Creates subsets of FontAwesome fonts for optimized use on the web.
GNU General Public License v3.0
65 stars 15 forks source link

Auto Subsetting #37

Open samjonesigd opened 11 months ago

samjonesigd commented 11 months ago

Could you add a way to make the src directories or files instead of manually adding your icon names?

On a big project this is quite difficult to maintain currently

omacranger commented 11 months ago

It's been asked before and I'm hesitant to bake something like this in as I would prefer to keep dependencies & bloat to a minimum. I'll look into some options and see what it may take. I think another package that handles that functionality in the form of a script or Webpack plugin (or both in that package) that parses source files via globs and simply passes them to this package would be preferred.

callaginn commented 5 months ago

@samjonesigd I actually took a stab at that a few years ago for our websites. Here's what I came up with: https://github.com/cremadesign/fontawesome-scraper

It's pretty simple in concept. Basically, it scans target directories for code that references font awesome files and builds out a config for "fontawesome-subset" by pairing egrep with a regular expression: 'fa[A-z]{0,1},? .?fa-[A-z-]+'.

Config basically looks like this:

// Import fontawesome-scraper
import iconScraper from '@cremadesign/fontawesome-scraper';

// Grab icons asynchronously from a list of folders
var icons = await iconScraper({
    folders: [
        'www'
    ]
});

// Do something with the final results!
console.log(icons);

And it'll export a "icons.json" file that "fontawesome-subset" can work with:

{
    "solid": [
        "arrow-right",
        "asterisk",
        "ban",
        "exclamation-circle",
        "sync",
        "tools"
    ],
    "brands": [
        "github"
    ],
    "regular": [
        "arrow-left",
        "home",
        "sync"
    ]
}