rollup-plugin-mdi-fontmin

🍕 A Rollup plugin to subset Material Design Icons (MDI) font files.

Requirements

This plugin requires Node.js v14.16.1+ (LTS recommended).

Install

npm install rollup-plugin-mdi-fontmin @mdi/font fontmin --save-dev

If you want to use fontmin 1.x.x version

npm install rollup-plugin-mdi-fontmin @mdi/font fontmin@1 --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import mdiFontmin from 'rollup-plugin-mdi-fontmin';

export default {
  // ...
  plugins: [
    // ...
    mdiFontmin({
      names: ['home', 'account', 'settings'], // List of icons to include (required)
    }),
  ],
};

Full configuration example:

import mdiFontmin from 'rollup-plugin-mdi-fontmin';

export default {
  // ...
  plugins: [
    // ...
    mdiFontmin({
      names: ['home', 'account', 'settings'], // List of icons to include (required)
      output: 'public/fonts/mdi', // Output directory
      silent: false, // Whether to suppress console output
      logPrefix: '[mdi]', // Custom log prefix
    }),
  ],
};

Then call rollup either via the CLI or the API.

Options

names

Type: Array<string>
Required: Yes

A list of Material Design Icons (MDI) names to include in the subset.
These correspond to css class names without the mdi- prefix.

output

Type: string
Default: 'public/fonts/mdi'

The output directory for the subsetted font files.

silent

Type: boolean
Default: false

Whether to suppress console output.

logPrefix

Type: string
Default: '[mdi-fontmin]'

Prefix for console output.

How it works

The plugin will check if the font files already exist in the output directory. If they do, it will skip the generation step. Otherwise, it will:

1. Read the Material Design Icons CSS file.
2. Parse and extract the glyphs corresponding to the specified icon names.
3. Generate the subsetted font files (.ttf, .eot, .woff, .woff2).
4. Modify the CSS file to only include the necessary icons and save it to the output directory.

Meta

LICENSE (MIT)