vite-awesome-svg-loader

vite-awesome-svg-loader

A framework-agnostic Vite plugin that:

1. Can import SVGs as:
   1. Source code (default import type).
   2. URL to a static asset.
   3. Source code data URI.
   4. Source code base64.
   5. Source code base64 data URI.
2. Can improve performance of your website by using an alternative SVG loading method.
3. Can preserve line width. Images will retain line width regardless of the size.
4. Can replace colors with currentColor or a custom color.
5. Will automatically minimize your SVGs using SVGO.
6. Allows you to create SVG sprites using optional integrations.

A quick glance

Basic inline imports

Set import type in import query:

import image from "./image.svg?url";
import image from "./image.svg?source";
import image from "./image.svg?source-data-uri";
import image from "./image.svg?base64";
import image from "./image.svg?base64-data-uri";

Basic inline transformations

Apply transformations in import query:

import image from "./image.svg?preserve-line-width";
import image from "./image.svg?set-current-color";
import image from "./image.svg?skip-transforms";
import image from "./image.svg?skip-awesome-svg-loader";

Combined inline imports

Combine import type with multiple transformations:

import image from "./image.svg?url&preserve-line-width&set-current-color";

Configuration (recommended)

To avoid repeating import queries for each image, configure default transformations and use inline import queries only to override configuration:

// vite.config.ts

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

export default defineConfig({
  plugins: [
    viteAwesomeSvgLoader({
      preserveLineWidthList: [/preserve-line-width\//, /all\//],
      replaceColorsList: [/set-current-color\//, /all\//],
      urlImportsInLibraryMode: "emit-files",
    }),
  ],
});

SVG symbols

This is how to display SVG images and icons with SVG symbols:

import image from "./image.svg";
import icon from "./image.svg";

import { SvgImage, SvgIcon } from "vite-awesome-svg-loader/react-integration";

export default function App() {
  return (
    <Fragment>
      <SvgImage src={image} />
      <SvgIcon src={icon} size="48px" color="red" />
    <Fragment>
  )
}

<template>
  <SvgImage :src="image" />
  <SvgIcon :src="icon" size="48px" color="red" />
</template>

<script lang="ts" setup>
import image from "./image.svg";
import icon from "./image.svg";

import { SvgImage, SvgIcon } from "vite-awesome-svg-loader/vue-integration";
</script>

import image from "./image.svg";
import icon from "./image.svg";

import esc from "escape-html";
import { SvgImage, SvgIcon } from "vite-awesome-svg-loader/web-components-integration";

SvgImage.define();
SvgIcon.define();

document.getElementById("app")!.innerHTML += `
  <svg-image src="${esc(image)}"></svg-image>
  <svg-icon src="${esc(icon)}" size="48px" color="red"></svg-icon>
`

import image from "./image.svg";
import icon from "./image.svg";

import { SvgImage, SvgIcon } from "vite-awesome-svg-loader/vanilla-integration";

new SvgImage(image, "#app");
new SvgIcon(image, "#app").setSize("48px").setColor("red");

Installation

1. Run:

   npm i vite-awesome-svg-loader
   

2. Update vite.config.ts:

   import { viteAwesomeSvgLoader } from "vite-awesome-svg-loader";
   
   export default defineConfig({
     plugins: [
       viteAwesomeSvgLoader(),
       // Other plugins...
     ],
     // Other configuration options...
   });
   

Documentation

The documentation website is the central knowledge base for vite-awesome-svg-loader.

Quick links

Loader

• Home
• Getting started
• Configuration

Examples and demos

• React
• Vue
• Web components (custom elements)
• Vanilla JS
• Other frameworks