patrickhulce / Fontmin Webpack
Licence: mit
Minifies icon fonts to just the used glyphs.
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Fontmin Webpack
Static Html Webpack Boilerplate
🔮 modern tooling for old-school static webpage development
Stars: ✭ 226 (+143.01%)
Mutual labels: webpack, minification
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+1655.91%)
Mutual labels: webpack, minification
Minification Benchmarks
🏃♂️🏃♀️🏃 JS minification benchmarks: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler
Stars: ✭ 271 (+191.4%)
Mutual labels: webpack, minification
Webpack Tricks
Tips and tricks in using Webpack
Stars: ✭ 2,364 (+2441.94%)
Mutual labels: webpack, minification
Esbuild Loader
⚡️ Speed up your Webpack build with esbuild
Stars: ✭ 1,245 (+1238.71%)
Mutual labels: webpack, minification
Css Modules Flow Types
Creates flow type definitions from CSS Modules files using Webpack loader or CLI 👾
Stars: ✭ 92 (-1.08%)
Mutual labels: webpack
Webpack Conditional Loader
C conditionals directive for JavaScript
Stars: ✭ 93 (+0%)
Mutual labels: webpack
Epub Manga Creator
a web GUI for create japanese epub manga
Stars: ✭ 90 (-3.23%)
Mutual labels: webpack
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (+1.08%)
Mutual labels: webpack
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+1315.05%)
Mutual labels: webpack
Angular Librarian
An Angular 2+ scaffolding setup for creating libraries
Stars: ✭ 92 (-1.08%)
Mutual labels: webpack
Faux Pas
A script to highlight elements that are mismatched incorrectly to @font-face blocks, which may result in shoddy faux bold or faux italic rendering.
Stars: ✭ 93 (+0%)
Mutual labels: font
Angular2 Seed
Seed project to run angular2 out of the box, integrated with wepack and babel
Stars: ✭ 91 (-2.15%)
Mutual labels: webpack
Cloudflare Typescript Workers
Types and mocks for building a tested Typescript Cloudflare Worker, generates three NPM packages
Stars: ✭ 94 (+1.08%)
Mutual labels: webpack
Angular Webpack Starter
🌟 Angular Webpack Starter with AoT compilation, Lazy-loading, Tree-shaking, and Hot Module Reload (Updated to 4.1.0!)
Stars: ✭ 91 (-2.15%)
Mutual labels: webpack
Npm Pipeline Rails
Use npm as part of your Rails asset pipeline
Stars: ✭ 93 (+0%)
Mutual labels: webpack
Materialdesignsymbol
Icon font library for Swift. Currently supports GoogleMaterialDesignIcons
Stars: ✭ 92 (-1.08%)
Mutual labels: font
fontmin-webpack
Minifies icon fonts to just what is used.
# for webpack 5
npm install --save-dev fontmin-webpack
# for webpack 4
npm install --save-dev [email protected]^2.0.1
# for webpack <=3
npm install --save-dev [email protected]^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
, andwoff2
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 */],
}),
],
}
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)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].