Base64 string imports

SVGs may be imported as base64 strings. This is done by appending ?base64 to the import:

import imageUrl from "./image.svg?base64";

A line width of an image may be preserved by adding a preserve-line-width parameter to the import query:

import imageUrl from "./image.svg?base64&preserve-line-width";

Other transformations may be applied via configuration.

Rendered demo

Demo's source code

src

assets

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.73 3.51001L15.49 7.03001C15.73 7.52002 16.37 7.99001 16.91 8.08001L20.1 8.61001C22.14 8.95001 22.62 10.43 21.15 11.89L18.67 14.37C18.25 14.79 18.02 15.6 18.15 16.18L18.86 19.25C19.42 21.68 18.13 22.62 15.98 21.35L12.99 19.58C12.45 19.26 11.56 19.26 11.01 19.58L8.01997 21.35C5.87997 22.62 4.57997 21.67 5.13997 19.25L5.84997 16.18C5.97997 15.6 5.74997 14.79 5.32997 14.37L2.84997 11.89C1.38997 10.43 1.85997 8.95001 3.89997 8.61001L7.08997 8.08001C7.61997 7.99001 8.25997 7.52002 8.49997 7.03001L10.26 3.51001C11.22 1.60001 12.78 1.60001 13.73 3.51001Z" stroke="green" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

import imgBase64 from "@/assets/star.svg?base64";

export function main() {
  document.getElementById("app")!.innerHTML += `
    <code
      class="mono"
      role="figure"
      aria-label="Base64 representation of an image"
    >
      ${imgBase64}
    </code>
  `;
}

/// <reference types="vite/client" />

// Link some of the import configs. Unfortunately, it's impossible to fully type it. Use plugin configuration instead.
// Use import config when you really need it to avoid @ts-ignore before every import.
/// <reference types="vite-awesome-svg-loader" />

// Internal types
/// <reference types="vite-file-tree-builder" />

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1"
    />
  </head>
  <body>
    <div id="app"></div>

    <script type="module">
      import { main } from "./src/main.ts";
      main();
    </script>
  </body>
</html>

{
  "name": "vanilla-base64-imports",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npm run build -- --watch",
    "build": "npm run type-check && npm run build-only",
    "build-only": "vite build --config vite.config.lib.ts",
    "type-check": "tsc --noEmit",
    "lint": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
    "vite-awesome-svg-loader": "*",
    "vite-file-tree-builder": "*",
    "vite-astro-entry-generator": "*"
  }
}

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";

// Import vite-awesome-svg-loader
import { viteAwesomeSvgLoader } from "vite-awesome-svg-loader";

export default defineConfig({
  plugins: [viteAwesomeSvgLoader({ urlImportsInLibraryMode: "emit-files" })],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Please open file to view its content