Replace <i> tag for <svg> with icon name replaced for @mdi/js path string in Webpack

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlReplaceWebpackPlugin = require('html-replace-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new HtmlWebpackPlugin({
            title: "Webpack",
        }),
        new HtmlReplaceWebpackPlugin([
            {
                pattern: /<i>(.+?)<\/i>/g,
                replacement: function(match, icon) {
                    const mdiJS = require('@mdi/js')
                    const _ = require('lodash');

                    return `<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="${mdiJS[_.camelCase(icon)]}"></path></svg>`
                }
            }
        ])
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    }
}