https://github.com/tlinhart/html-webpack-inline-icon-plugin

Embed icons as data URLs in the output HTML file
https://github.com/tlinhart/html-webpack-inline-icon-plugin

html-webpack-plugin plugin webpack

Last synced: 18 days ago
JSON representation

Embed icons as data URLs in the output HTML file

• Host: GitHub
• URL: https://github.com/tlinhart/html-webpack-inline-icon-plugin
• Owner: tlinhart
• License: mit
• Created: 2022-09-15T08:22:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T17:48:40.000Z (3 months ago)
• Last Synced: 2024-10-29T19:02:44.441Z (3 months ago)
• Topics: html-webpack-plugin, plugin, webpack
• Language: JavaScript
• Homepage:
• Size: 158 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Inline Icon Extension for HTML Webpack Plugin

[![CI workflow status][badge]][actions]

[badge]: https://github.com/tlinhart/html-webpack-inline-icon-plugin/actions/workflows/ci.yml/badge.svg

[actions]: https://github.com/tlinhart/html-webpack-inline-icon-plugin/actions

Extension to [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin)

which embeds icons as data URLs in the output HTML file. Inspired by

[`InlineChunkHtmlPlugin`](https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/InlineChunkHtmlPlugin.js)

from [react-dev-utils](https://github.com/facebook/create-react-app/tree/main/packages/react-dev-utils)

package.

## Installation

```sh

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

```

## Usage

```js

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/]),

    // ...

  ],

  // ...

};

```