omacranger / fontawesome-subset

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

Task manager? #4

Closed fabswt closed 4 years ago

fabswt commented 4 years ago

Hi, Could you please provide an example for "Run via your favorite task manager" ?

I'm new to this and I'm not even sure if you mean Webpack or Grunt or something else.

An example you're using would be welcome.

Thanks!

omacranger commented 4 years ago

@fabswt Correct, I mean Webpack, Grunt, Gulp, etc. I suppose "Task Runner" might be the more appropriate term here. While it could also be ran independently I'd recommend setting it up via a task runner so anyone else who were to check out your code - or if you came back later to modify it - would be able to pickup where you left off.

The Creating tasks page on the Grunt site helps a bit with getting things setup, but I'll try to give an example below. Provided you have the dependencies installed (grunt, fontawesome-subset), something like below is a very minimal setup but should run as expected:

Gruntfile.js

const fontawesomeSubset = require('fontawesome-subset');

module.exports = function (grunt) {
    grunt.registerTask('export-icons', function () {
        fontawesomeSubset(
            {
                regular: ['check', 'square', 'caret-up'],
                solid: ['plus', 'minus']
            },
            'sass/webfonts',
            {
                package: 'pro'
            }
        );
    });
};

Run the above registered task via the command line: grunt export-icons

fabswt commented 4 years ago

Thank you! You've saved my day, and it works like a charm (super fast.)

pableu commented 3 years ago

Sorry for bumping a year later. Do you have an example of how to do it with plain webpack?

omacranger commented 3 years ago

@pableu I have not setup a project under Webpack using this tool. Depending on your project, you could probably use Webpack along with FontAwesome's tree shaking guide and have Webpack handle it automatically for you. If you're using the webfont version (with inline or the <i> elements with fa classes), then you'll probably need to use something like this webpack plugin to setup a pre-build step to compile the required fonts then include them using a font loader. That should be enough direction to get started, but if you still need assistance I'd ask that you open up a separate issue instead of pinging others that may not want the extra notifications 🙂