{"id":13451861,"url":"https://github.com/jeerbl/webfonts-loader","last_synced_at":"2025-06-26T01:02:08.400Z","repository":{"id":16848368,"uuid":"80743133","full_name":"jeerbl/webfonts-loader","owner":"jeerbl","description":"Make an icon font from SVGs!","archived":false,"fork":false,"pushed_at":"2025-06-05T14:05:46.000Z","size":3587,"stargazers_count":193,"open_issues_count":9,"forks_count":56,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-16T21:04:09.162Z","etag":null,"topics":["eot","font-icons","icon-font","svg","svg-icons","ttf","webpack-loader","woff","woff2"],"latest_commit_sha":null,"homepage":"https://npm.im/webfonts-loader","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/jeerbl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jeerbl"}},"created_at":"2017-02-02T16:18:29.000Z","updated_at":"2025-06-09T23:24:08.000Z","dependencies_parsed_at":"2024-01-16T03:46:10.044Z","dependency_job_id":"b0f88908-2633-49a4-8366-2d64419fd7ae","html_url":"https://github.com/jeerbl/webfonts-loader","commit_stats":null,"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"purl":"pkg:github/jeerbl/webfonts-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeerbl%2Fwebfonts-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeerbl%2Fwebfonts-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeerbl%2Fwebfonts-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeerbl%2Fwebfonts-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeerbl","download_url":"https://codeload.github.com/jeerbl/webfonts-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeerbl%2Fwebfonts-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260499360,"owners_count":23018292,"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":["eot","font-icons","icon-font","svg","svg-icons","ttf","webpack-loader","woff","woff2"],"created_at":"2024-07-31T07:01:05.046Z","updated_at":"2025-06-26T01:02:08.146Z","avatar_url":"https://github.com/jeerbl.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jeerbl"],"categories":["JavaScript"],"sub_categories":[],"readme":"# webfonts-loader\n\n[![npm](https://img.shields.io/npm/v/webfonts-loader.svg)](https://www.npmjs.com/package/webfonts-loader)\n[![npm](https://img.shields.io/npm/dm/webfonts-loader.svg)](https://www.npmjs.com/package/webfonts-loader)\n[![GitHub Action](https://img.shields.io/github/actions/workflow/status/jeerbl/webfonts-loader/nodejs-test.yml)](https://github.com/jeerbl/webfonts-loader/actions/workflows/nodejs-test.yml)\n[![license](https://img.shields.io/github/license/jeerbl/webfonts-loader.svg)](https://github.com/jeerbl/webfonts-loader/blob/master/LICENSE)\n\nA Webpack loader that generates fonts from your SVG icons and allows you to use your icons in your HTML.\n\n`webfonts-loader` uses the [`webfonts-generator`](https://github.com/vusion/webfonts-generator) plugin to create fonts in any format. It also generates CSS files so that you can use your icons directly in your HTML, using CSS classes.\n\n## Installation\n\n```\nnpm install webfonts-loader\n```\n\n## Usage\n\nAn example of usage can be found in the `test/` directory of this repository.\n\n### Webpack rule\n\nAdd this rule to your Webpack config:\n\n```javascript\n{\n  test: /\\.font\\.js/,\n  use: [\n    MiniCssExtractPlugin.loader,\n    {\n      loader: 'css-loader',\n      options: {\n        url: false\n      }\n    },\n    'webfonts-loader'\n  ]\n}\n```\n\nSo that each font configuration file will be loaded using this rule.\n\n#### Loader options\n\nYou can provide `options` objects to configure the loader behaviour:\n\n```javascript\n{\n  test: /\\.font\\.js/,\n  use: [\n    MiniCssExtractPlugin.loader,\n    {\n      loader: 'css-loader',\n      options: {\n        url: false\n      }\n    },\n    {\n      loader: 'webfonts-loader',\n      options: { ... }\n    }\n  ]\n}\n```\n\nAvailable options are:\n\n##### `publicPath`, String\n\nThis is the URL prefix for generated links (e.g. `/static/` or `https://cdn.project.net/`). Should typically match Webpack's `config.output.publicPath`.\n\n##### Any font config option\n\nIf you pass `types`, `fileName` or any other font config option, it will be used as a default (unless overriden in font config file).\n\n### The font configuration file\n\n#### Description\n\nThe config file allows you to specify parameters for the loader to use. Here is an example configuration file:\n\n```javascript\n// myfont.font.js\nmodule.exports = {\n  'files': [\n    './myfont/*.svg'\n  ],\n  'fontName': 'myfonticons',\n  'classPrefix': 'myfonticon-',\n  'baseSelector': '.myfonticon',\n  'types': ['eot', 'woff2', 'woff', 'ttf', 'svg'],\n  'fileName': 'app.[fontname].[hash].[ext]'\n};\n```\n\nThen you have to require the configuration file:\n\n```javascript\n// entry.js\nrequire('./myfont.font');\n```\n\nThe loader will then generate:\n\n* CSS with the base and class prefix\n* Font files for the SVG icons\n\n#### All font configuration options\n\n##### `baseSelector`, String\n\nThe base CSS selector, under which each icon class is to be created.\nSee [webfonts-generator#templateOptions](https://github.com/vusion/webfonts-generator#templateoptions)\n\n##### `classPrefix`, String\n\nThe prefix to be used with each icon class.\nSee [webfonts-generator#templateOptions](https://github.com/vusion/webfonts-generator#templateoptions)\n\n##### `cssContext`, Function\n\nAdd parameters or helpers to your template.\nSee [webfonts-generator#cssContext](https://github.com/vusion/webfonts-generator#cssContext)\n\n##### `htmlContext`, Function\n\nAdd parameters or helpers to your template.\nSee [webfonts-generator#htmlContext](https://github.com/vusion/webfonts-generator#htmlContext)\n\n##### `cssTemplate`, String\n\nSee [webfonts-generator#cssTemplate](https://github.com/vusion/webfonts-generator#csstemplate)\n\n##### `cssDest`, String\n\nSee [webfonts-generator#cssDest](https://github.com/vusion/webfonts-generator#csstemplate)\n\n##### `embed`, Boolean\n\nIf true the font is encoded in base64 and embedded inside the `@font-face` declaration, otherwise font files are written to disk.\nDefault: `false`\n\n##### `scssFile`, Boolean\n\nIf true, the build process will export a .scss file in the same path as the .css file.\nDefault: `false`\n\n##### `hashLength`, Number\n\nOptional. The length of hash in `fileName`.\nMin: 8\nMax: 32\nDefault: 20\n\n##### `fileName`, String\n\nThe generated font file names. These elements can be used:\n\n* `[fontname]`: the value of the `fontName` parameter\n* `[ext]`: the extension of the font file being generated (`eot`, ...)\n* `[hash]`: the hash of the current compilation\n* `[chunkhash]`: the hash of the SVG files\n\nThis option can be also configured globally in the webpack loader options.\n\n##### `emitCodepoints`, Array (with shorthand versions of Boolean, String and Object)\n\nOptional. The generated codepoints file names.\n\nExamples:\n\n* `emitCodepoints: true`: emits a javascript file named `[fontname].codepoints.js` in the `web` (default) format\n* `emitCodepoints: '[fontname].codepoints.fonts.js'`: emits a javascript file named `[fontname].codepoints.fonts.js` in the `commonjs` format\n* `emitCodepoints: { fileName: '[fontname].codepoints.json', type: 'json'] }`: emits a file named `[fontname].codepoints.json` in the `json` format\n* `emitCodepoints: [{ fileName: '[fontname].codepoints.json', type: 'json'] }, { fileName: '[fontname].codepoints.js', type: 'web'] }, { fileName: '[fontname].codepoints.inc.js', type: 'web'] }]`: emits three files with their respective names and types\n\nThese are the existing formats:\n\n* `web`: (default): generates a file containing the array of codepoints in a format suitable for inclusion in html pages.\n\nExample (for a font named myfonticons):\n```javascript\nif (typeof webfontIconCodepoints === 'undefined') {\n  webfontIconCodepoints = {};\n}\nwebfontIconCodepoints[\"myfonticons\"] = {\"alert\":61697,\"arrow-down\":61698,\"arrow-left\":61699};\n```\n\n* `commonjs`: generates a file containing the array of codepoints in the commonjs format, for use with `require`.\n```javascript\nmodule.exports = {\"alert\":61697,\"arrow-down\":61698,\"arrow-left\":61699}\n```\n\n* `json`: generates a file containing the array of codepoints in the JSON format.\n```javascript\n{\"alert\":61697,\"arrow-down\":61698,\"arrow-left\":61699,\"arrow-right\":61700,\"arrow-small-down\":61701}\n```\n\nThese elements can be used in the filename:\n\n* `[fontname]`: the value of the `fontName` parameter\n* `[chunkhash]`: the hash of the SVG files\n\nThis option can be also configured globally in the webpack loader options.\n\n##### `files`, Array\n\nSee [webfonts-generator#files](https://github.com/vusion/webfonts-generator#files)\n\n##### `fontName`, String\n\nSee [webfonts-generator#fontname](https://github.com/vusion/webfonts-generator#fontname)\n\n##### `formatOptions`, Object\n\nSee [webfonts-generator#formatoptions](https://github.com/vusion/webfonts-generator#formatoptions)\n\n##### `rename`, Function\n\nSee [webfonts-generator#rename](https://github.com/vusion/webfonts-generator#rename)\n\n##### `types`, Array\u003cString\u003e\n\nSee [webfonts-generator#types](https://github.com/vusion/webfonts-generator#types)\n\n##### `dest`, String\n\nSee [webfonts-generator#dest](https://github.com/vusion/webfonts-generator#dest)\n\n##### `html`, Boolean\n\nSee [webfonts-generator#html](https://github.com/vusion/webfonts-generator#html)\n\n##### `htmlDest`, String\n\nSee [webfonts-generator#htmldest](https://github.com/vusion/webfonts-generator#htmldest)\n\n##### `ligature`, Boolean\n\nSee [webfonts-generator#ligature](https://github.com/vusion/webfonts-generator#ligature)\n\n##### `cssFontsUrl`, String (before cssFontsPath)\n\nSee [webfonts-generator#cssfontspath](https://github.com/vusion/webfonts-generator#cssfontspath)\n\n##### `htmlTemplate`, String\n#### Example\n```\n...\nhtmlTemplate: path.resolve(__dirname, 'src/html.hbs'),\n...\n```\n\nSee [webfonts-generator#htmltemplate](https://github.com/vusion/webfonts-generator#htmltemplate)\n\n##### `startCodepoint`, Number\n\nSee [webfonts-generator#startcodepoint](https://github.com/vusion/webfonts-generator#startcodepoint)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeerbl%2Fwebfonts-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeerbl%2Fwebfonts-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeerbl%2Fwebfonts-loader/lists"}