Skip to content

v4.19.1

Latest
Compare
Choose a tag to compare
@webdiscus webdiscus released this 29 Mar 21:59
· 18 commits to master since this release
b0f3db8

Cumulative Release v4.19.0 - v4.19.1

🔥 CHANGES (inlining SVG)

  • Inline <img src="icon.svg">:
    • OLD: replaces <img> with <svg> tag
    • NEW: inline SVG as base64-encoded data URL. Use new svg.inline.embed = true option to keep old behavior.
  • Encoding of data URL:
    • OLD: defaults, escaped URL (#% chars only), e.g. data:image/svg+xml,<svg>...</svg>
    • NEW:
      • defaults, base64 encoded, e.g. data:image/svg+xml;base64,iVBO...
      • full escaped URL, e.g. data:image/svg+xml,%3Csvg%20... regards generator.dataUrl.encoding option.

✨ Features

  • Added support the ?inline URL query to force inline an image as dataURL in HTML, JS and CSS.
    The encoding can be specified using a query value (base64 or escape):

    <img src="./icon.svg?inline"/>        --> src as data URL regards configured encoding, defaults base64
    <img src="./icon.svg?inline=base64"/> --> <img src="data:image/svg+xml;base64,PHN2Zy..."/>
    <img src="./icon.svg?inline=escape"/> --> <img src="data:image/svg+xml,%3Csvg%20...%2F%3E"/>
  • Added support the ?embed URL query to replace <img> with <svg> tag kipping img attributes:

    <img class="icon" src="./icon.svg?embed"/>

    Result:

    <svg class="icon" ...>...</svg>
  • When inlining SVG as a data URL, consider Webpack's generator.dataUrl() and generator.dataUrl.encoding options.

  • Display a warning when used ?embed URL query for SVG files in JS or CSS.

  • New svg plugin option:

    type SvgOptions = {
      enabled?: boolean;
      // RegEx to match SVG files.
      // Defaults `/\.svg/i`.
      test?: RegExp;
      inline?: {
        // Enable inline SVG by replacing <img> with <svg>, only in HTML.
        // Equivalent to query: `?inline=embed` | `?embed`.
        // Defaults `false`.
        embed?: boolean;
        // Data URL encoding, overrides `generator.dataUrl.encoding` option.
        // Equivalent to query: `?inline=base64` | `?inline=escape`.
        // Defaults the `generator.dataUrl.encoding` option, if undefined then `base64`.
        encoding?: 'base64' | false;
      };
    };

Bug Fixes

  • The option js.chunkFilename should default to js.filename when js.filename is specified as a string, #164.