Wondering what’s next for npm?Check out our public roadmap! »

    @zumwald/html-webpack-inline-img-plugin

    0.3.0 • Public • Published

    Inline img extension for the HTML Webpack Plugin

    Forked and extended from Guy Campbell's work on html-webpack-inline-svg-plugin.

    Allows you to inline SVGs or PNGs that are parsed by html-webpack-plugin.

    The plugin relies on svgo to optimise SVGs. You can configure it's settings, check below for more details.

    Installation

    Install the plugin with npm:

    $ npm install --save-dev @zumwald/html-webpack-inline-img-plugin

    or yarn:

    $ yarn add @zumwald/html-webpack-inline-img-plugin --dev

    Usage

    Require the plugin in your webpack config:

    const HtmlWebpackInlineImgPlugin = require('@zumwald/html-webpack-inline-img-plugin');

    Add the plugin to your webpack config as follows:

    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlWebpackInlineImgPlugin()
    ]

    Add img tags with inline attribute and .svg or .png file as src to your template/s that the html-webpack-plugin is processing (the default is index.html).

    <!-- Works: below img tag will be removed and replaced by the content of the svg in its src -->
    <img inline src="static/icons.svg">
     
    <!-- Also works: below img tag src field will be replaced with base64 encoded string-->
    <img inline src="static/image.png">
     
    <!-- Ignored: this img will not be touched as it has no inline attribute -->
    <img src="static/foo.svg">

    Getting to your SVGs

    References to your *.svg or *.png files within the img tags src should be relative to your project root, this is usually the directory your package.json file sits in:

    my-project
    -- package.json
    -- <node_modules>
    -- <static>
    ---- icons.svg
    ---- foo.svg
    ---- ...
    

    With the above structure inlining icons.svg would look like: <img inline src="static/icons.svg">

    Config

    To configure SVGO (module used to optimise your SVGs), add an svgoConfig object to your html-webpack-plugin config:

    plugins: [
        new HtmlWebpackPlugin({
            svgoConfig: {
                removeTitle: false,
                removeViewBox: true,
            },
        }),
        new HtmlWebpackInlineSVGPlugin()
    ]

    For a full list of the SVGO config (default) params we are using check out: svgo-config.js. The config you set is merged with our defaults, it does not replace it.

    Known Issues

    • none currently

    Install

    npm i @zumwald/html-webpack-inline-img-plugin

    DownloadsWeekly Downloads

    1

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar