FAQ

Can this loader inline SVGs in the DOM like other loaders?

Yes, by loading an image as a source code and inserting it into the DOM like shown in the demos. Quick example:

import image from "./image.svg?source";

document.getElementById("image")!.innerHTML = image

Should I always import all images and pass them down like shown in the examples?

Use import.meta.glob() to import images in bulk, then map them to the distinct names. See “Named icons” example for your framework.

Such components are provided out of the box because:

1. Variable interpolation is not supported in glob imports.
2. Glob imports can get highly project-specific. vite-awesome-svg-loader avoids such specificity.

For more detail on glob import, see: https://vitejs.dev/guide/features#glob-import

What browsers are supported?

Short answer: ES5-capable browsers.

Long answer:

vite-awesome-svg-loader uses latest ES features advantage of modern environments, minimize bundle size, and achieve better performance when bundled for evergreen browsers.

However, vite-awesome-svg-loader can be transpiled to support older browsers.

Vite transpiles all dependencies (including vite-awesome-svg-loader) to the target environment when app is built for production.

While Vite’s minimum target is ES6, you can support ES5 environments by using @vitejs/plugin-legacy package:

vite.config.ts

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";

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

export default defineConfig({
  plugins: [
    // Frameworks...
    viteAwesomeSvgLoader(), // vite-awesome-svg-loader
    // Other plugins...

    // Add legacy browsers support
    legacy({
      targets: [
        "chrome >= 51",
        "and_chr >= 51",
        "edge >= 15",
        "safari >= 10",
        "firefox >= 54",
        "opera >= 38",
        "android >= 4.4",
        "op_mob >= 73",
        "ios_saf >= 10",
        "and_qq >= 13.1",
        "baidu >= 13.18",
        "kaios >= 3.1",
      ],
    }),
  ],
});

URL imports are causing issues in library mode

First of all, please report these issues.

Then set urlImportsInLibraryMode option to source-data-uri (recommended) or base64-data-uri and see if it helps.

How can I help?

1. Create an integration with your favorite framework.
2. Add new functionality to the loader itself.
3. Report bugs.
4. Create feature requests by creating an issue.

If you want to participate in the development, start by reading the guide for contributors.

Thank you for considering supporting this project!