{"id":26601100,"url":"https://github.com/gilbertotomasone/webpack-multifonts-loader","last_synced_at":"2026-04-11T03:05:24.095Z","repository":{"id":42922135,"uuid":"244933446","full_name":"GilbertoTomasone/webpack-multifonts-loader","owner":"GilbertoTomasone","description":"Generate all your fontfaces and iconfonts in one go.","archived":false,"fork":false,"pushed_at":"2023-01-07T15:39:00.000Z","size":3134,"stargazers_count":1,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T17:45:04.290Z","etag":null,"topics":["eot","font-face","fonts","icon-font","iconfont","icons","javascript","loader","svg","ttf","webfont","webpack","webpack-loader","woff","woff2"],"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/GilbertoTomasone.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-03-04T15:19:26.000Z","updated_at":"2024-05-31T08:06:02.000Z","dependencies_parsed_at":"2023-02-07T13:31:50.538Z","dependency_job_id":null,"html_url":"https://github.com/GilbertoTomasone/webpack-multifonts-loader","commit_stats":null,"previous_names":["gilbertotomasone/webpack-fonts-loader"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GilbertoTomasone%2Fwebpack-multifonts-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GilbertoTomasone%2Fwebpack-multifonts-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GilbertoTomasone%2Fwebpack-multifonts-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GilbertoTomasone%2Fwebpack-multifonts-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GilbertoTomasone","download_url":"https://codeload.github.com/GilbertoTomasone/webpack-multifonts-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245152481,"owners_count":20569393,"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-face","fonts","icon-font","iconfont","icons","javascript","loader","svg","ttf","webfont","webpack","webpack-loader","woff","woff2"],"created_at":"2025-03-23T18:36:49.063Z","updated_at":"2025-12-30T21:07:25.707Z","avatar_url":"https://github.com/GilbertoTomasone.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm][npm-version]][npm-url]\n[![npm][npm-download]][npm-url]\n[![Travis][travis-build]][travis-url]\n[![license][license]][license-url]\n\n[npm-version]: https://img.shields.io/npm/v/multifonts-loader.svg?style=flat-square\n[npm-download]: https://img.shields.io/npm/dm/multifonts-loader.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/multifonts-loader\n[travis-build]: https://img.shields.io/travis/gilbertotomasone/webpack-multifonts-loader.svg?style=flat-square\n[travis-url]: https://travis-ci.org/gilbertotomasone/webpack-multifonts-loader\n[license]: https://img.shields.io/github/license/gilbertotomasone/webpack-multifonts-loader.svg?style=flat-square\n[license-url]: https://github.com/GilbertoTomasone/webpack-multifonts-loader/blob/master/LICENSE\n[size]: https://packagephobia.now.sh/badge?p=multifonts-loader\n[size-url]: https://packagephobia.now.sh/result?p=multifonts-loader\n\n# Webpack Multifonts Loader\n\nLoader for webpack to generate **fontfaces** from font families and **iconfonts** from svgs using \u003ca href=\"https://github.com/vusion/webfonts-generator\"\u003ewebfonts-generator\u003c/a\u003e.\n\n## Installation\n\n```\n$ npm install multifonts-loader\n```\n\n# Use Cases\n\n## Set `fonts` and `icons` into the MARKUP\n\n![button](images/button-click.png)\n\n```html\n\u003cbutton \n  class=\"\n    icon \n    icon-pig \n    icon-arrow-after \n    font-Roboto-BoldItalic\"\n\u003e\n\u0026nbsp;Click Me\u0026nbsp;\n\u003c/button\u003e\n```\n\n## Set `fonts` and `icons` with SASS\n\n![button](images/button-follow.png)\n\n```sass\n@import 'fonts/fonts'\n@import 'iconfont/iconfont'\n  \nbutton\n  @include webfont('Roboto-BoldItalic')\n  @include webfont-icon('chicken')\n  @include webfont-icon('arrow', 'after')\n```\n\n## Customize `fonts` and `icons` with SASS\n\n![login](images/login-custom.png)\n\n```sass\nh1\n  @include webfont('Arial', 'bold', 'italic')\n  @include webfont-icon('lock-close', 'before', 'baseline', '80%')\n  \u0026:before\n    margin-right: 0.25em\n\nlabel\n  @include webfont('Helvetica-Bold')\n  \u0026[for=\"email\"]\n    @include webfont-icon('email')\n  \u0026[for=\"password\"]\n    @include webfont-icon('key')\n  \u0026:before\n    margin-right: 0.25em\n\ninput\n  @include webfont('Roboto-LightItalic')\n\nbutton\n  @include webfont('Roboto-BoldItalic')\n  @include webfont-icon('lock', 'after', 'baseline', '16px', 'bold', 'normal')\n  \u0026:after\n    margin-left: 0.25em\n```\n\n# Syntax\n\n## Set `fonts` and `icons` into the MARKUP\n\n#### `*.html`\n\n```html\n\u003cspan class=\"[FONT_CLASS_PREFIX]-[FONT_FILE_NAME]\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"[ICON_BASE_SELECTOR] [ICON_CLASS_PREFIX]-[SVG_FILE_NAME]\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"[ICON_BASE_SELECTOR] [ICON_CLASS_PREFIX]-[SVG_FILE_NAME]-after\"\u003e\u003c/span\u003e\n```\n\n`NOTE:` You can specify the position of the icon by appending the word `'-after'`\nto its default selector.\nBy default the icon will be added `before`.\n\n*Example:*\n\n```html\n\u003cspan class=\"font-Roboto-ThinItalic\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"icon icon-arrow\"\u003e\u003c/span\u003e\n\n\u003cspan class=\"icon icon-arrow-after\"\u003e\u003c/span\u003e\n```\n\n#### Options\n\n| Name                                      | Required | Default | Description                              |\n|-------------------------------------------|----------|---------|------------------------------------------|\n| **[`FONT_CLASS_PREFIX`](#classprefix)**   | `true`   | font-   | Specifies the class prefix for the font  |\n| **`FONT_FILE_NAME`**                      | `true`   | ''      | Specifies the font-family name           |\n| **[`ICON_BASE_SELECTOR`](#baseselector)** | `true`   | icon    | Specifies the base selector for the icon |\n| **[`ICON_CLASS_PREFIX`](#classprefix-1)** | `true`   | icon-   | Specifies the class prefix for the icon  |\n| **`SVG_FILE_NAME`**                       | `true`   | ''      | Specifies the icon name                  |\n\n\n## Set `fonts` and `icons` with SASS\n\n#### Mixin: `webfont`\n\n```sass\n@include webfont('FONT_FILE_NAME', 'FONT_WEIGHT', 'FONT_STYLE')\n```\n\n*Example:*\n\n```sass\n@import 'fonts/fonts'\n\ndiv\n  @include webfont('Arial', 'bold', 'italic')\n  \np\n  @include webfont('Roboto-ThinItalic')\n```\n\n##### Options\n\n| Name                 | Required | Default  | Type           | Description                                                                                                          |\n|----------------------|----------|----------|----------------|----------------------------------------------------------------------------------------------------------------------|\n| **`FONT_FILE_NAME`** | `true`   | `''`     | `{String}`     | Specifies the name of the font-family to use. For generated fonts the font-family is derived from the font filename. |\n| **`FONT_WEIGHT`**    | `false`  | `normal` | `css standard` | Sets how thick or thin characters in text should be displayed                                                        |\n| **`FONT_STYLE`**     | `false`  | `normal` | `css standard` | Specifies the font style for a text                                                                                  |\n\n\n#### Mixin: `webfont-icon`\n\n```sass\n@include webfont-icon('SVG_FILE_NAME', 'ICON_POSITION', 'ICON_ALIGN', 'ICON_SIZE', 'ICON_WEIGHT', 'ICON_STYLE')\n```\n\n*Example:*\n\n```sass\n@import 'iconfont/iconfont'\n\nspan\n  @include webfont-icon('calendar', 'before', 'middle', '16px', 'bold', 'italic')\n  @include webfont-icon('arrow', 'after')\n```\n\n##### Options\n\n| Name                | Required | Default   | Type              | Description                                                                |\n|---------------------|----------|-----------|-------------------|----------------------------------------------------------------------------|\n| **`SVG_FILE_NAME`** | `true`   | `''`      | `{String}`        | Specifies the name of the icon to use. It is derived from the svg filename |\n| **`ICON_POSITION`** | `false`  | `before`  | `[before,after]`  | The position of the icon relative to the current element                   |\n| **`ICON_ALIGN`**    | `false`  | `top`     | `css standard`    | Specifies the alignment of the icon                                        |\n| **`ICON_SIZE`**     | `false`  | `inherit` | `css standard`    | Specifies the size of the icon                                             |\n| **`ICON_WEIGHT`**   | `false`  | `normal`  | `css standard`    | Sets how thick or thin characters in text should be displayed              |\n| **`ICON_STYLE`**    | `false`  | `normal`  | `css standard`    | Specifies the font style for the icon                                      |\n\n\n# Loader Configuration\n\nCreate one or multiple configuration files for your fonts and iconfonts.\n\n***`multifonts.loader.js`***\n\n```javascript\nconst path = require('path');\n\nmodule.exports = {\n  fonts: {\n    files: [\n      // '**/*.+(woff|woff2|eot|ttf|otf|svg)',\n      '**/*.woff',\n      '**/*.woff2',\n      '**/*.eot',\n      '**/*.ttf',\n      '**/*.otf',\n      '**/*.svg'\n    ],\n    inputPath: path.resolve(__dirname, 'assets/fonts'),\n    outputPath: 'fonts',\n    publicPath: '/',\n    fontFilename: '[fontname].[chunkhash].[ext]?[hash]',\n    cssDest: path.resolve(__dirname, 'styles/fonts'),\n    cssFilename: 'fonts',\n    scssDest: path.resolve(__dirname, 'styles/fonts'),\n    scssFilename: 'fonts',\n    templateOptions: {\n      classPrefix: 'font-',\n      mixinName: 'webfont'\n    }\n  },\n  icons: {\n    files: [\n      '**/*.svg',\n      'arrow2.svg',\n      'subdirectory/animal1.svg',\n      'subdirectory/animal2.svg',\n      'subdirectory/animal200.svg',\n      'subfolder',\n      'subdirectory',\n      path.resolve(__dirname, '../Icons/svg', 'arrow.svg'),\n      path.resolve(__dirname, '../Icons/svg/subdirectory', 'animal1.svg')\n    ],\n    inputPath: path.resolve(__dirname, 'assets/icons/svg'),\n    outputPath: 'iconfont',\n    types: ['eot', 'woff', 'woff2', 'ttf', 'svg'],\n    order: ['eot', 'woff', 'woff2', 'ttf', 'svg'],\n    publicPath: '/',\n    fontName: 'IconFont',\n    fontFilename: '[fontname].[chunkhash].[ext]?[hash]',\n    cssDest: path.resolve(__dirname, 'styles/iconfont'),\n    cssFilename: 'iconfont',\n    scssDest: path.resolve(__dirname, 'styles/iconfont'),\n    scssFilename: 'iconfont',\n    templateOptions: {\n      baseSelector: 'icon',\n      classPrefix: 'icon-',\n      mixinName: 'webfont-icon'\n    }\n  }\n};\n```\n\nSee below [webpack-multifonts-loader#options](#options)\n\nThe configuration file defines two main sections: \n\n#### `fonts`\n\nResponsible to locate and process the font families \n   to generate the respective fontfaces.\n \nOptionally, you can decide to generate the fontfaces CSS and/or the SCSS \nfiles to a specified location for you to include in your application.\n   \n#### `icons`\n\nResponsible to locate and process the svg files to generate the \nrespective iconfonts.\n    \nOptionally, you can decide to generate the iconfont CSS and/or the SCSS \nfiles to a specified location for you to include in your application. \n\n# Webpack Setup\n\n### Webpack Rule\n\n```javascript\n{\n  test: /multifonts\\.loader\\.js/, // This is the name of the loader configuration file\n  use: [\n    MiniCssExtractPlugin.loader,\n    'css-loader',\n    'multifonts-loader'\n  ]\n}\n```\n\nChain the \n***multifonts-loader*** \nwith the \n[css-loader](https://www.npmjs.com/package/css-loader)\nand \n[MiniCssExtractPlugin.loader](https://www.npmjs.com/package/mini-css-extract-plugin)\nto generate the CSS style \ndirectly into the Webpack default output path.\n\nOptionally you can also generate the css and scss files to include directly\ninto your application.\n\nSee below [fonts webpack-multifonts-loader#cssdest](#cssdest)\n\nSee below [fonts webpack-multifonts-loader#scssdest](#scssdest)\n\nSee below [icons webpack-multifonts-loader#cssdest](#cssdest-1)\n\nSee below [icons webpack-multifonts-loader#scssdest](#scssdest-1)\n\n### Loader Options\n\nExtend the loader configuration by including all the available options\ndirectly into the rule definition.\n\nSee below [webpack-multifonts-loader#options](#options)\n\n*Example:*\n\nYou can override the fontFilename depending on the environment.\n\n```javascript\n{\n  test: /multifonts\\.loader\\.js/,\n  use: [\n    MiniCssExtractPlugin.loader,\n    'css-loader',\n    {\n      loader: 'multifonts-loader',\n      options: {\n          fonts: {\n            fontFilename: isDevelopment\n              ? '[fontname].[chunkhash].[ext]?[hash]'\n              : '[chunkhash].[ext]?[hash]'\n             // ...\n             // Add any other available option\n          },\n          icons: {\n            fontFilename: isDevelopment\n              ? '[fontname].[chunkhash].[ext]?[hash]'\n              : '[chunkhash].[ext]?[hash]'\n             // ...\n             // Add any other available option\n          }\n      }\n    }\n  ]\n}\n```\n\nSee below [fonts webpack-multifonts-loader#fontfilename](#fontfilename)\n\nSee below [icons webpack-multifonts-loader#fontfilename](#fontfilename-1)\n\n# Integration\n\nInclude the configuration file into your app.\n\n`app.js`\n\n```javascript\nrequire('multifonts.loader');\n```\n\n# APPENDIX\n\n## Options\n\n### `fonts`\n\n```javascript\nfonts: {\n    files: [\n      // '**/*.+(woff|woff2|eot|ttf|otf|svg)',\n      '**/*.woff',\n      '**/*.woff2',\n      '**/*.eot',\n      '**/*.ttf',\n      '**/*.otf',\n      '**/*.svg'\n    ],\n    inputPath: path.resolve(__dirname, 'assets/fonts'),\n    outputPath: 'fonts',\n    publicPath: '/',\n    fontFilename: '[fontname].[chunkhash].[ext]?[hash]',\n    cssDest: path.resolve(__dirname, 'styles/fonts'),\n    cssFilename: 'fonts',\n    scssDest: path.resolve(__dirname, 'styles/fonts'),\n    scssFilename: 'fonts',\n    templateOptions: {\n      classPrefix: 'font-',\n      mixinName: 'webfont'\n    }\n}\n```\n\n#### Options\n\n| Name                                                | Type       | Required | Default                          |\n|-----------------------------------------------------|------------|----------|----------------------------------|\n| **[`files`](#files)**                               | `{Array}`  | `true`   | `undefined`                      |\n| **[`inputPath`](#inputpath)**                       | `{String}` | `true`   | `undefined`                      |\n| **[`outputPath`](#outputpath)**                     | `{String}` | `false`  | `iconfont/`                      |\n| **[`publicPath`](#publicpath)**                     | `{String}` | `false`  | `/`                              |\n| **[`fontFilename`](#fontfilename)**                 | `{String}` | `false`  | `[fontname].[hash].[ext]`        |\n| **[`cssDest`](#cssDest)**                           | `{String}` | `false`  | `false`                          |\n| **[`cssFilename`](#cssfilename)**                   | `{String}` | `false`  | `iconfont`                       |\n| **[`scssDest`](#scssdest)**                         | `{String}` | `false`  | `false`                          |\n| **[`scssFilename`](#scssfilename)**                 | `{String}` | `false`  | `iconfont`                       |\n| **[`fontfaceTemplateCSS`](#fontfacetemplatecss)**   | `{String}` | `false`  | `../templates/fontface-css.hbs`  |\n| **[`fontfaceTemplateSCSS`](#fontfacetemplatescss)** | `{String}` | `false`  | `../templates/fontface-scss.hbs` |\n| **[`templateOptions`](#templateoptions)**           | `{Object}` | `false`  | `{}`                             |\n| **[`templateOptions.classPrefix`](#classprefix)**   | `{String}` | `false`  | `font-`                          |\n| **[`templateOptions.mixinName`](#mixinname)**       | `{String}` | `false`  | `webfont`                        |\n\n#### `files`\n\nRequired: `true`\n\nType: `Array`\n\nDefault: `undefined`\n\n\nThe \u003ca href=\"https://www.npmjs.com/package/glob\"\u003eGlob\u003c/a\u003e pattern to use to find\nthe font files to process.\n\n#### `inputPath`\n\nRequired: `true`\n\nType: `String`\n\nDefault: `undefined`\n\nThe context for the \u003ca href=\"https://www.npmjs.com/package/glob\"\u003eGlob\u003c/a\u003e pattern.\n\n#### `outputPath`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `iconfont/`\n\nThe path relative to the default Webpack output folder where to save \nthe fonts files.\n\n#### `publicPath`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `/`\n\nThis is the URL prefix for the generated font url \n(e.g. /static/ or https://cdn.project.net/). \nShould typically match Webpack's config.output.publicPath.\n\n#### `fontFilename`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `[fontname].[hash].[ext]`\n\nSee [webfonts-loader#filename-string](https://github.com/jeerbl/webfonts-loader#filename-string)\n\nThe generated font file names. These elements can be used:\n\n* `[fontname]`: the name of the font file being generated\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#### `cssDest`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `false`\n\nThe absolute path to use to save a copy of the CSS file being generated.\n\nIf set the CSS file will be generated at the specified destination.\n\n#### `cssFilename`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `iconfont`\n\nThe name CSS file being generated.\n\n#### `scssDest`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `false`\n\nThe absolute path to use to save a copy of the SCSS file being generated.\n\nIf set the SCSS file will be generated at the specified destination.\n\n#### `scssFilename`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `iconfont`\n\nThe name SCSS file being generated.\n\n#### `fontfaceTemplateCSS`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `../templates/fontface-css.hbs`\n\nThe template to use to generate the css.\n\n#### `fontfaceTemplateSCSS`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `../templates/fontface-scss.hbs`\n\nThe template to use to generate the scss.\n\n#### `templateOptions`\n\nOptions passed to the fontfaceTemplateCSS and fontfaceTemplateSCSS.\n\nIt can be extended to include any custom variables you would like \nto render in your custom templates.\n\n```javascript\ntemplateOptions: {\n  classPrefix: 'font-',\n  mixinName: 'webfont',\n  // This options will be passed to the template for you to render\n  customOption: 'customValue'\n}\n```\n\n##### `classPrefix`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `font-`\n\nThe prefix to use for the font classes being generated.\n\n##### `mixinName`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `webfont`\n\nThe name of the scss mixin to call when including the font.\n\n### `icons`\n\n```javascript\nicons: {\n    files: [\n      '**/*.svg',\n      'arrow2.svg',\n      'subdirectory/animal1.svg',\n      'subdirectory/animal2.svg',\n      'subdirectory/animal200.svg',\n      'subfolder',\n      'subdirectory',\n      path.resolve(__dirname, '../Icons/svg', 'arrow.svg'),\n      path.resolve(__dirname, '../Icons/svg/subdirectory', 'animal1.svg')\n    ],\n    inputPath: path.resolve(__dirname, 'assets/icons/svg'),\n    outputPath: 'iconfont',\n    types: ['eot', 'woff', 'woff2', 'ttf', 'svg'],\n    order: ['eot', 'woff', 'woff2', 'ttf', 'svg'],\n    publicPath: '/',\n    fontName: 'IconFont',\n    fontFilename: '[fontname].[chunkhash].[ext]?[hash]',\n    cssDest: path.resolve(__dirname, 'styles/iconfont'),\n    cssFilename: 'iconfont',\n    scssDest: path.resolve(__dirname, 'styles/iconfont'),\n    scssFilename: 'iconfont',\n    templateOptions: {\n      baseSelector: 'icon',\n      classPrefix: 'icon-',\n      mixinName: 'webfont-icon'\n    }\n}\n```\n\n#### Options\n\n| Name                                                  | Type       | Required | Default                                  |\n|-------------------------------------------------------|------------|----------|------------------------------------------|\n| **[`files`](#files-1)**                               | `{Array}`  | `true`   | `undefined`                              |\n| **[`inputPath`](#inputpath-1)**                       | `{String}` | `true`   | `undefined`                              |\n| **[`outputPath`](#outputpath-1)**                     | `{String}` | `false`  | `fonts/`                                 |\n| **[`types`](#types)**                                 | `{Array}`  | `false`  | `['eot', 'woff', 'woff2', 'ttf', 'svg']` |\n| **[`order`](#order)**                                 | `{Array}`  | `false`  | `['eot', 'woff', 'woff2', 'ttf', 'svg']` |\n| **[`publicPath`](#publicpath-1)**                       | `{String}` | `false`  | `/`                                      |\n| **[`fontName`](#fontname)**                           | `{String}` | `false`  | `IconFont`                               |\n| **[`fontFilename`](#fontfilename-1)**                 | `{String}` | `false`  | `[fontname].[hash].[ext]`                |\n| **[`cssDest`](#cssDest-1)**                           | `{String}` | `false`  | `false`                                  |\n| **[`cssFilename`](#cssfilename-1)**                   | `{String}` | `false`  | `iconfont`                               |\n| **[`scssDest`](#scssdest-1)**                         | `{String}` | `false`  | `false`                                  |\n| **[`scssFilename`](#scssfilename-1)**                 | `{String}` | `false`  | `fonts`                                  |\n| **[`cssTemplate`](#csstemplate)**                     | `{String}` | `false`  | `../templates/css.hbs`                   |\n| **[`scssTemplate`](#scsstemplate)**                   | `{String}` | `false`  | `../templates/scss.hbs`                  |\n| **[`templateOptions`](#templateoptions-1)**           | `{Object}` | `false`  | `{}`                                     |\n| **[`templateOptions.baseSelector`](#baseselector)**   | `{String}` | `false`  | `icon`                                   |\n| **[`templateOptions.classPrefix`](#classprefix-1)**   | `{String}` | `false`  | `icon-`                                  |\n| **[`templateOptions.mixinName`](#mixinname-1)**       | `{String}` | `false`  | `webfont-icon`                           |\n\n#### `files`\n\nRequired: `true`\n\nType: `Array`\n\nDefault: `undefined`\n\nThe \u003ca href=\"https://www.npmjs.com/package/glob\"\u003eGlob\u003c/a\u003e pattern to use to find\nthe svg files to process.\n\n#### `inputPath`\n\nRequired: `true`\n\nType: `String`\n\nDefault: `undefined`\n\nThe context for the \u003ca href=\"https://www.npmjs.com/package/glob\"\u003eGlob\u003c/a\u003e pattern.\n\n#### `outputPath`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `fonts/`\n\nThe path relative to the default Webpack output folder where to save \nthe svg iconfont files.\n\n#### `types`\n\nRequired: `false`\n\nType: `Array`\n\nDefault: `['eot', 'woff', 'woff2', 'ttf', 'svg']`\n\nSee [webfonts-generator#types](https://github.com/vusion/webfonts-generator/#types)\n\n#### `order`\n\nRequired: `false`\n\nType: `Array`\n\nDefault: `['eot', 'woff', 'woff2', 'ttf', 'svg']`\n\nSee [webfonts-generator#order](https://github.com/vusion/webfonts-generator/#order)\n\n#### `publicPath`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `/`\n\nSee [webfonts-loader#publicpath-string](https://github.com/jeerbl/webfonts-loader#publicpath-string)\n\n#### `fontName`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `IconFont`\n\nSee [webfonts-generator#fontname](https://github.com/vusion/webfonts-generator#fontname)\n\n#### `fontFilename`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `[fontname].[hash].[ext]`\n\nSee [webfonts-loader#filename-string](https://github.com/jeerbl/webfonts-loader#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#### `cssDest`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `false`\n\nThe absolute path to use to save a copy of the CSS file being generated.\n\nIf set the CSS file will be generated at the specified destination.\n\n#### `cssFilename`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `fonts`\n\nThe name CSS file being generated.\n\n#### `scssDest`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `false`\n\nThe absolute path to use to save a copy of the SCSS file being generated.\n\nIf set the SCSS file will be generated at the specified destination.\n\n#### `scssFilename`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `fonts`\n\nThe name SCSS file being generated.\n\n#### `cssTemplate`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `../templates/css.hbs`\n\nThe template to use to generate the css.\n\n#### `scssTemplate`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `../templates/scss.hbs`\n\nThe template to use to generate the scss.\n\n#### `templateOptions`\n\nOptions passed to the cssTemplate and scssTemplate.\n\nIt can be extended to include any custom variables you would like \nto render in your custom templates.\n\n```javascript\ntemplateOptions: {\n  baseSelector: 'icon',\n  classPrefix: 'icon-',\n  mixinName: 'webfont-icon',\n  // This options will be passed to the template for you to render\n  customOption: 'customValue'\n}\n```\n\n##### `baseSelector`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `icon`\n\nThe class name for the css being generated.\n\nSee [webfonts-generator#templateoptions](https://github.com/vusion/webfonts-generator#templateoptions)\n\n##### `classPrefix`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `icon-`\n\nThe css class prefix for the css being generated.\n\nSee [webfonts-generator#templateoptions](https://github.com/vusion/webfonts-generator#templateoptions)\n\n##### `mixinName`\n\nRequired: `false`\n\nType: `String`\n\nDefault: `webfont-icon`\n\nThe name of the scss mixin to call when including the icons.\n\n# Tests\n\n```\n$ npm run test-build\n$ npm run test-dev\n```\n\n# Thanks\n\n* Inpired by [webfonts-loader](https://github.com/jeerbl/webfonts-loader)\n* Made possible by [webfonts-generator](https://github.com/vusion/webfonts-generator)\n\n# Licence\n\nPublic domain, see the `LICENCE` file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbertotomasone%2Fwebpack-multifonts-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbertotomasone%2Fwebpack-multifonts-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbertotomasone%2Fwebpack-multifonts-loader/lists"}