@tfoxy/webfonts-loader
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    webfonts-loader

    npm npm Travis license

    A Webpack loader that generates fonts from your SVG icons and allows you to use your icons in your HTML.

    webfonts-loader uses the 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.

    Installation

    npm install webfonts-loader
    

    Usage

    An example of usage can be found in the test/ directory of this repository.

    Webpack rule

    Add this rule to your Webpack config:

    {
      test: /\.font\.js/,
      loader: ExtractTextPlugin.extract({
        use: [
          'style-loader',
          'css-loader',
          'webfonts-loader'
        ]
      })
    }

    So that each font configuration file will be loaded using this rule.

    Loader options

    You can provide options objects to configure the loader behaviour:

    {
      test: /\.font\.js/,
      loader: ExtractTextPlugin.extract({
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'webfonts-loader',
            options: { ... }
          }
        ]
      })
    }

    Available options are:

    publicPath, String

    This is the URL prefix for generated links (e.g. /static/ or https://cdn.project.net/). Should typically match Webpack's config.output.publicPath.

    Any font config option

    If you pass types, fileName or any other font config option, it will be used as a default (unless overriden in font config file).

    The font configuration file

    Description

    The config file allows you to specify parameters for the loader to use. Here is an example configuration file:

    // myfont.font.js
    module.exports = {
      'files': [
        './myfont/*.svg'
      ],
      'fontName': 'myfonticons',
      'classPrefix': 'myfonticon-',
      'baseSelector': '.myfonticon',
      'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
      'fileName': 'app.[fontname].[hash].[ext]'
    };

    Then you have to require the configuration file:

    // entry.js
    require('./myfont.font');

    The loader will then generate:

    • CSS with the base and class prefix
    • Font files for the SVG icons

    All font configuration options

    baseSelector, String

    The base CSS selector, under which each icon class is to be created. See webfonts-generator#templateoptions

    classPrefix, String

    The prefix to be used with each icon class. See webfonts-generator#templateoptions

    cssTemplate, String

    See webfonts-generator#csstemplate

    embed, Boolean

    If true the font is encoded in base64 and embedded inside the @font-face declaration, otherwise font files are written to disk. Default: false

    hashLength, Number

    Optional. The length of hash in fileName. Min: 8 Max: 32 Default: 20

    fileName, String

    The generated font file names. These elements can be used:

    • [fontname]: the value of the fontName parameter
    • [ext]: the extension of the font file being generated (eot, ...)
    • [hash]: the hash of the current compilation
    • [chunkhash]: the hash of the SVG files

    This option can be also configured globally in the webpack loader options.

    files, Array

    See webfonts-generator#files

    fontName, String

    See webfonts-generator#fontname

    formatOptions, Object

    See webfonts-generator#formatoptions

    rename, Function

    See webfonts-generator#rename

    types, Array

    See webfonts-generator#types

    Install

    npm i @tfoxy/webfonts-loader

    DownloadsWeekly Downloads

    2

    Version

    5.0.0

    License

    Unlicense

    Unpacked Size

    94.1 MB

    Total Files

    23218

    Last publish

    Collaborators

    • avatar