Support inlining SVG assets

I was asked to open another issue for this.

Describe the bug

Vite doesn’t inline svg files when the documentation says it would.

Reproduction

https://bitbucket.org/andylizi/test-vite-svg-inline/

Expected behavior

• logo.svg should be inlined, as assetsInlineLimit claims to inline any static asset files under the default 4kb limit. https://github.com/vitejs/vite/blob/9904cb1a758578a508d1e45717b6293162397bb3/src/node/config.ts#L315-L320

Actual behavior

• logo.svg is not inlined.

System Info

• vite version: v1.0.0-rc.13
• Operating System: Windows 10 (64-bit)
• Node version: v14.8.0

Related code

https://github.com/vitejs/vite/blob/480367b83a5d418e76a4a6bccd004abb97413c22/src/node/build/buildPluginAsset.ts#L60-L63

Preferred solution

Adding support for svg inlining would be great. Unfortunately extra steps are required to do it properly, as #1197 mentioned: Probably Don’t Base64 SVG and Optimizing SVGs in data URIs.

Alternative solution

Document this behavior in config.ts so users wouldn’t be surprised by this.

Workaround

Rename .svg to uppercase .SVG. This isn’t ideal but it works for now.

[cslecours]

While this is in the process of getting fixed, here is my current patchy solution (leveraging webpack’s svg-inline-loader 😅 )

Add svgLoader() to your plugins array and you’re good to go!

import { getExtractedSVG } from "svg-inline-loader"
import type { Plugin } from "rollup"
import fs from "fs"

//TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
export const svgLoader: (options?: {
  classPrefix?: string
  idPrefix?: string
  removeSVGTagAttrs?: boolean
  warnTags?: boolean
  removeTags?: boolean
  warnTagAttrs?: boolean
  removingTagAttrs?: boolean
}) => Plugin = (options?: {}) => {
  return {
    name: "vite-svg-patch-plugin",
    transform: function (code, id) {
      if (
        id.endsWith(".svg")
      ) {
        const extractedSvg = fs.readFileSync(id, "utf8")
        return `export default '${getExtractedSVG(extractedSvg, options)}'`
      }
      return code
    }
  }
}

[ByteAtATime]

Any updates on this? Currently, I have a few websites that load multiple SVG images, which make them load pretty slowly.