npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fontmin-webpack

v4.0.0

Published

Minifies icon fonts to just what is used.

Downloads

1,528

Readme

fontmin-webpack

NPM Package Build Status Coverage Status Commitizen friendly Dependencies

Minifies icon fonts to just what is used.

# for webpack 5
npm install --save-dev fontmin-webpack
# for webpack 4
npm install --save-dev fontmin-webpack@^2.0.1
# for webpack <=3
npm install --save-dev fontmin-webpack@^1.0.2

How It Works

  • Examines your webpack output assets to identify font formats that have the same name
  • Identifies CSS rules that specify a content property and extracts unicode characters
  • Uses fontmin to minify the TrueType font to only the used glyphs
  • Converts the ttf back to all other formats (supports ttf, eot, svg, woff, and woff2 although you should really only need to care about woff)
  • Replaces the webpack output asset with the minified version

Usage

Install fontmin-webpack

npm install --save-dev fontmin-webpack

Include Your Icon Font

The example below uses glyphs \uf0c7 and \uf0ce

@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot') format('embedded-opentype'), url('fontawesome-webfont.woff2')
      format('woff2'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf')
      format('ttf');
}

/**
 * Remove other unused icons from the file.
 */
.fa-save:before,
.fa-floppy-o:before {
  content: '\f0c7';
}
.fa-table:before {
  content: '\f0ce';
}

Setup Your Webpack Configuration

const FontminPlugin = require('fontmin-webpack')

module.exports = {
  entry: 'my-entry.js',
  output: {
    // ...
  },
  plugins: [
    // ...
    new FontminPlugin({
      autodetect: true, // automatically pull unicode characters from CSS
      glyphs: ['\uf0c8' /* extra glyphs to include */],
      // note: these settings are mutually exclusive and allowedFilesRegex has priority over skippedFilesRegex
      allowedFilesRegex: null, // RegExp to only target specific fonts by their names
      skippedFilesRegex: null, // RegExp to skip specific fonts by their names
    }),
  ],
}

Save Bytes

Before

674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]
912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  [big]
b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
fee66e712a8a08eef5805a46892932ad.woff     98 kB          [emitted]

After

674f50d287a8c48dc19ba404d20fe713.eot    2.82 kB          [emitted]
912ec66d7572ff821749319396470bde.svg    2.88 kB          [emitted]
b06871f281fee6b241d60582ae9369b9.ttf    2.64 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  1.01 kB          [emitted]
fee66e712a8a08eef5805a46892932ad.woff   2.72 kB          [emitted]

Limitations

  • Fonts must be loaded with file-loader
  • Fonts must have the same name as the TrueType version of the font.
  • Font file names are not changed by different used glyph sets (See #8)