patrickhulce / fontmin-webpack

Minifies icon fonts to just the used glyphs.
MIT License
139 stars 19 forks source link

Simpler tool - thought this might be of interest #16

Closed garygreen closed 5 years ago

garygreen commented 5 years ago

Love the idea behind this plugin, but wanted something a bit simpler and more reliable using PostCSS and just minify my fontawesome file. So I've come up with this simple little node script - main benefit over this plugin is it uses PostCSS and can output in woff2 format as well (though this library may already be able to do that? Not sure.)

Anyway thought it might be of interest/point of reference to improvements in this plugin 👍

const fs = require('fs');
const postcss = require('postcss');
const Fontmin = require('fontmin');
const wawoff2 = require('fontmin-wawoff2');

const css = fs.readFileSync('./public/dist/css/site.css');
const root = postcss.parse(css);

let unicodes = [];

root.walkRules(/^\.fa-[a-z0-9-]+:before$/i, function(rule) {
    rule.walkDecls('content', function(decl) {
        var val = decl.value.replace(/"/g,'').replace('\\F', '0xf');
        var uni = String.fromCharCode(parseInt(val, 16));
        unicodes.push(uni);
    });
});

new Fontmin()
    // Bootstrap 4, alter to support Bootstrap 5 path if needed.
    .src('./node_modules/font-awesome/fonts/fontawesome-webfont.ttf')  
    .use(Fontmin.glyph({ text: unicodes.join('') }))
    .use(Fontmin.ttf2woff({}))
    .use(wawoff2())
    .dest('./build/fonts')
    .run(function() {
    });
patrickhulce commented 5 years ago

Thanks for sharing @garygreen neat script! Indeed for just font awesome usage and a single css file that is probably a much simpler approach 👍

can output in woff2 format as well (though this library may already be able to do that? Not sure.)

This is able to handle woff2 as well FWIW :)