Neutral, Plus or Minus

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    fantasticon-loader

    0.0.10 • Public • Published

    ⚠️ Deprecated in favour of its complete re-write - please use fantasticon-webpack-plugin instead

    fantasticon-loader

    npm npm license

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

    fantasticon-loader uses the @ramirezcgn/fantasticon 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 fantasticon-loader --save-dev
    

    Usage

    Webpack rule

    Add this rule to your Webpack config:

    {
      test: /\.fantasticonrc\.js/,
      use: [
        {
          loader: 'fantasticon-loader',
          options: {
            runOnComplete: false
          }
        },
      ]
    }

    runOnComplete: runs "onComplete" callback if it was added as option.

    Then you have to require the configuration file:

    // entry.js
    require('.fantasticonrc.js');

    Configuration file

    Here's an example .fantasticonrc.js:

    module.exports = {
      inputDir: './icons', // (required)
      outputDir: './dist', // (required)
      fontTypes: ['ttf', 'woff', 'woff2'],
      assetTypes: ['ts', 'css', 'json', 'html'],
      fontsUrl: '/static/fonts',
      formatOptions: {
        // Pass options directly to `svgicons2svgfont`
        woff: {
          // Woff Extended Metadata Block - see https://www.w3.org/TR/WOFF/#Metadata
          metadata: '...'
        },
        json: {
          // render the JSON human readable with two spaces indentation (default is none, so minified)
          indent: 2
        },
        ts: {
          // select what kind of types you want to generate (default `['enum', 'constant', 'literalId', 'literalKey']`)
          types: ['constant', 'literalId'],
          // render the types with `'` instead of `"` (default is `"`)
          singleQuotes: true
        }
      },
      // Use a custom Handlebars template
      templates: {
        css: './my-custom-tp.css.hbs'
      },
      pathOptions: {
        ts: './src/types/icon-types.ts',
        json: './misc/icon-codepoints.json'
      },
      codepoints: {
        'chevron-left': 57344, // decimal representation of 0xe000
        'chevron-right': 57345,
        'thumbs-up': 57358,
        'thumbs-down': 57359
      },
      // Customize generated icon IDs (unavailable with `.json` config file)
      getIconId: ({
        basename, // `string` - Example: 'foo';
        relativeDirPath, // `string` - Example: 'sub/dir/foo.svg'
        absoluteFilePath, // `string` - Example: '/var/icons/sub/dir/foo.svg'
        relativeFilePath, // `string` - Example: 'foo.svg'
        index // `number` - Example: `0`
      }) => [index, basename].join('_'), // '0_foo'
      onComplete: (fontConfig) => console.log('complete: ', fontConfig),
    };

    The loader will then generate:

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

    Configuration options

    See fantasticon#configuration-file

    License

    Copyright (c) 2021 Nicolas Ramirez - Released under the MIT license

    Install

    npm i fantasticon-loader

    DownloadsWeekly Downloads

    123

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    8.74 kB

    Total Files

    7

    Last publish

    Collaborators

    • ramirezcgn