vite-plugin-icon-font-reducer

A Vite plugin that automatically reduces icon font files during production builds using icon-font-reducer.

The plugin scans your application source code, detects the icon classes being used, generates subsetted font files, and replaces the original font assets in the final Vite bundle.

Features

• Automatically reduces icon font files during Vite builds
• Replaces original bundled font assets with optimized subsets
• Supports inline config, config files, and library presets
• Built on top of the core icon-font-reducer CLI/library

1. Installation
2. Usage
   1. Using a preset
   2. Using a config file
   3. Using inline configuration
3. Options
4. Supported Libraries
5. Related Project
6. License

Installation

npm install vite-plugin-icon-font-reducer

Usage

Using a preset

You can use any of the icon libraries supported by icon-font-reducer. Check out the available libraries here.

import { defineConfig } from 'vite';
import iconFontReducer from 'vite-plugin-icon-font-reducer';

export default defineConfig({
  plugins: [
    iconFontReducer({
      config: 'materialdesign',
    }),
  ],
});

Using a config file

You can use a configuration file from icon-font-reducer. Check out the configuration here.

import { defineConfig } from 'vite';
import iconFontReducer from 'vite-plugin-icon-font-reducer';

export default defineConfig({
  plugins: [
    iconFontReducer({
      config: './icon-font-reducer.config.js',
    }),
  ],
});

Using inline configuration

You can use a valid configuration from icon-font-reducer. Check out the configuration here.

import { defineConfig } from 'vite';
import iconFontReducer from 'vite-plugin-icon-font-reducer';

export default defineConfig({
  plugins: [
    iconFontReducer({
      config: {
        origin: {
          css: './node_modules/@mdi/font/css/materialdesignicons.css',
          fonts: './node_modules/@mdi/font/fonts',
        },

        expression: {
          classes: /mdi-[a-z0-9-]+/g,
          files: /\.(woff2?|ttf|eot|svg)$/i,
        },

        selector: '.mdi::before',
        property: 'content',
      },

      debug: true,
    }),
  ],
});

You can configure other libraries not supported by icon-font-reducer; see how to work with custom libraries here.

Options

| Option | Type | Description | | -------- | ------------------------- | --------------------------------------------------------- | | config | string \| IconFontReducerConfig | Library preset, config file path, or inline configuration | | debug | boolean | Logs font replacement actions during build |

Supported Libraries

Library support is provided by the core icon-font-reducer project.

Supported libraries and presets may include:

| Name | Lib ID | |----------|-----------| | Material Design Icons | materialdesign | | Bootstrap Icons | bootstrap | | Remix Icons | remix | | CoreUI Icons | coreui-linear \| coreui-brand | | FontAwesome (Free) | font-awesome-free | | LineAwesome | line-aswesome | | Lineicons | line-icons | | Lucide (Static) | lucide-static |

See the official compatibility list and preset configuration examples in:

• Supported Libraries Documentation
• Configuration Guide

Related Project

Core library and CLI:

icon-font-reducer

License

MIT