{"id":13464047,"url":"https://github.com/patrickhulce/fontmin-webpack","last_synced_at":"2025-04-07T16:18:52.353Z","repository":{"id":17571113,"uuid":"82259377","full_name":"patrickhulce/fontmin-webpack","owner":"patrickhulce","description":"Minifies icon fonts to just the used glyphs.","archived":false,"fork":false,"pushed_at":"2022-06-16T08:15:00.000Z","size":540,"stargazers_count":139,"open_issues_count":10,"forks_count":19,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-19T00:51:28.465Z","etag":null,"topics":["font","fontmin","minification","minifies-icon-fonts","unused","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrickhulce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-17T05:08:15.000Z","updated_at":"2024-08-15T03:55:06.000Z","dependencies_parsed_at":"2022-08-30T00:11:31.213Z","dependency_job_id":null,"html_url":"https://github.com/patrickhulce/fontmin-webpack","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickhulce%2Ffontmin-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickhulce%2Ffontmin-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickhulce%2Ffontmin-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickhulce%2Ffontmin-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickhulce","download_url":"https://codeload.github.com/patrickhulce/fontmin-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685628,"owners_count":20979085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font","fontmin","minification","minifies-icon-fonts","unused","webpack"],"created_at":"2024-07-31T14:00:32.798Z","updated_at":"2025-04-07T16:18:52.326Z","avatar_url":"https://github.com/patrickhulce.png","language":"JavaScript","funding_links":[],"categories":["Ralated"],"sub_categories":[],"readme":"# fontmin-webpack\n\n[![NPM Package](https://badge.fury.io/js/fontmin-webpack.svg)](https://www.npmjs.com/package/fontmin-webpack)\n[![Build Status](https://travis-ci.org/patrickhulce/fontmin-webpack.svg?branch=master)](https://travis-ci.org/patrickhulce/fontmin-webpack)\n[![Coverage Status](https://coveralls.io/repos/github/patrickhulce/fontmin-webpack/badge.svg?branch=master)](https://coveralls.io/github/patrickhulce/fontmin-webpack?branch=master)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Dependencies](https://david-dm.org/patrickhulce/fontmin-webpack.svg)](https://david-dm.org/patrickhulce/fontmin-webpack)\n\nMinifies icon fonts to just what is used.\n\n```bash\n# for webpack 5\nnpm install --save-dev fontmin-webpack\n# for webpack 4\nnpm install --save-dev fontmin-webpack@^2.0.1\n# for webpack \u003c=3\nnpm install --save-dev fontmin-webpack@^1.0.2\n```\n\n## How It Works\n\n- Examines your webpack output assets to identify font formats that have the same name\n- Identifies CSS rules that specify a content property and extracts unicode characters\n- Uses `fontmin` to minify the TrueType font to only the used glyphs\n- 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](http://caniuse.com/#search=woff))\n- Replaces the webpack output asset with the minified version\n\n## Usage\n\n#### Install fontmin-webpack\n\n`npm install --save-dev fontmin-webpack`\n\n#### Include Your Icon Font\n\nThe example below uses glyphs `\\uf0c7` and `\\uf0ce`\n\n```css\n@font-face {\n  font-family: 'FontAwesome';\n  src: url('fontawesome-webfont.eot') format('embedded-opentype'), url('fontawesome-webfont.woff2')\n      format('woff2'), url('fontawesome-webfont.woff') format('woff'), url('fontawesome-webfont.ttf')\n      format('ttf');\n}\n\n/**\n * Remove other unused icons from the file.\n */\n.fa-save:before,\n.fa-floppy-o:before {\n  content: '\\f0c7';\n}\n.fa-table:before {\n  content: '\\f0ce';\n}\n```\n\n#### Setup Your Webpack Configuration\n\n```js\nconst FontminPlugin = require('fontmin-webpack')\n\nmodule.exports = {\n  entry: 'my-entry.js',\n  output: {\n    // ...\n  },\n  plugins: [\n    // ...\n    new FontminPlugin({\n      autodetect: true, // automatically pull unicode characters from CSS\n      glyphs: ['\\uf0c8' /* extra glyphs to include */],\n      // note: these settings are mutually exclusive and allowedFilesRegex has priority over skippedFilesRegex\n      allowedFilesRegex: null, // RegExp to only target specific fonts by their names\n      skippedFilesRegex: null, // RegExp to skip specific fonts by their names\n      textRegex: /\\.(js|css|html)$/,  // RegExp for searching text reference\n      webpackCompilationHook: 'thisCompilation', // Webpack compilation hook (for example PurgeCss webpack plugin use 'compilation' )\n    }),\n  ],\n}\n```\n\n#### Use in Vue3\n\nIn a Vue3 project PurgeCss needs to be executed as a Webpack plugin. \nThe easiest way to add Webpack plugins is to declare them in vue.config.js\n\nThis is a sample for a project with Vue3 / Tailwindcss 3 / Fontawesome 6\n#### **`vue.config.js`**\n```js\nconst webpackPlugins = [];\nconst __DEBUG__='0'; //turn to 1 for avoiding purgecss and fontmin\n\n// **********************************\n// Purgecss unused classes\n//\nif (__DEBUG__ !== '1') {\n  const PurgecssPlugin = require('purgecss-webpack-plugin');\n  const glob = require('glob-all')\n  const purgeCssPlugin = new PurgecssPlugin({\n    paths: glob.sync(\n      [\n        path.join(__dirname, './public/*.html'),\n        path.join(__dirname, './src/**/*.vue'),\n        path.join(__dirname, './src/**/*.js')\n      ]),\n    safelist: [/^sm:/, /^md:/, /^lg:/, /^xl:/, /^2xl:/, /^focus:/, /^hover:/, /^group-hover:/, /\\[.*\\]/, /^basicLightbox/, /\\/[0-9]/, /^tns/],\n    fontFace: true\n  })\n  webpackPlugins.push(purgeCssPlugin);\n}\n\n// **********************************\n// fontminifying Fontawesome\n//\nif (__DEBUG__ !== '1') {\n  const FontMinPlugin = require('fontmin-webpack');\n  const fontMinPlugin = new FontMinPlugin({\n    autodetect: true,\n    glyphs: [],\n    allowedFilesRegex: /^fa[srltdb]*-/, // RegExp to only target specific fonts by their names\n    skippedFilesRegex: null, // RegExp to skip specific fonts by their names\n    textRegex: /\\.(js|css|html|vue)$/,  // RegExp for searching text reference\n    webpackCompilationHook: 'compilation', // Webpack compilation hook (for example PurgeCss webpack plugin use 'compilation' )\n  });\n  webpackPlugins.push(fontMinPlugin);\n}\n\nmodule.exports = {\n   runtimeCompiler: true,\n   configureWebpack: {\n    plugins: webpackPlugins,\n    devtool: false,\n    mode: 'production',\n  },\n};\n```\n\nObviously the required dependencies must be added in package.json\n#### **`package.json`**\n```json\n\"devDependencies\": {\n…\n    \"fontmin-webpack\": \"^4.0.0\",\n    \"glob-all\": \"^3.3.0\",\n    \"purgecss-webpack-plugin\": \"^4.1.3\",\n    \"webpack\": \"^5.71.0\",\n…\n}\n```\n\n#### Save Bytes\n\n**Before**\n\n```\n674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]\n912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  [big]\nb06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]\naf7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]\nfee66e712a8a08eef5805a46892932ad.woff     98 kB          [emitted]\n```\n\n**After**\n\n```\n674f50d287a8c48dc19ba404d20fe713.eot    2.82 kB          [emitted]\n912ec66d7572ff821749319396470bde.svg    2.88 kB          [emitted]\nb06871f281fee6b241d60582ae9369b9.ttf    2.64 kB          [emitted]\naf7ae505a9eed503f8b8e6982036873e.woff2  1.01 kB          [emitted]\nfee66e712a8a08eef5805a46892932ad.woff   2.72 kB          [emitted]\n```\n\n## Limitations\n\n- Fonts must be loaded with `file-loader`\n- Fonts must have the same name as the TrueType version of the font.\n- Font file names are not changed by different used glyph sets ([See #8](https://github.com/patrickhulce/fontmin-webpack/issues/8))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickhulce%2Ffontmin-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickhulce%2Ffontmin-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickhulce%2Ffontmin-webpack/lists"}