Skip to content

Embed icons as data URLs in the output HTML file

License

Notifications You must be signed in to change notification settings

tlinhart/html-webpack-inline-icon-plugin

Repository files navigation

Inline Icon Extension for HTML Webpack Plugin

CI workflow status

Extension to HtmlWebpackPlugin which embeds icons as data URLs in the output HTML file. Inspired by InlineChunkHtmlPlugin from react-dev-utils package.

Installation

npm install --save-dev html-webpack-inline-icon-plugin

Usage

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const InlineIconHtmlPlugin = require("html-webpack-inline-icon-plugin");

module.exports = {
  // ...
  plugins: [
    // Generate `index.html` with favicon injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, "public/index.html"),
      favicon: path.resolve(__dirname, "public/favicon.png"),
    }),
    // Inline icons with `favicon` in the name.
    new InlineIconHtmlPlugin(HtmlWebpackPlugin, [/favicon/]),
    // ...
  ],
  // ...
};