Vanilla JS awesome SVG loader demo

This project demonstrates vite-awesome-svg-loader capabilities, and how it works with different SVG images.

As an example, actual icons, oversize lineart and actual lineart images are present.

Basic functionality and configuration via import URL

Imports used in this section can be configured using regexes in plugin config. Later we'll demonstrate how this configuration works.

Original files

Preserve line width

Note that some images have too thick lines, and some are cropped. Please make sure that line width is proportional to the image size, and images have a bit of safe spacing.

Original files in SvgImage component

This component will render SVG source code into a SVG symbol, so you'll have more freedom to manipulate it.

Preserve line width and use SvgImage component

Preserve line width, replace colors with currentColor and use SvgIcon component

Basically this example shows how to use icons.

Animate color and use SvgIcon component

The example above but we'll animate colors using CSS.

Reuse same SVG in multiple symbols

This example demonstrates that one SVG is being reused in multiple SvgImage and SvgIcon components.

You can verify that images are reused by finding <symbol> element with the same ID as href attribute of the <use> elements. There should be only one <symbol> element with that ID.

SvgImage

SvgIcon

Plugin config demo

All images transformations are configured at vite.config.ts file. All files in each entry are actually different files in different directories: one directory for each section.

Each directory also contains following files:

  1. skip-transforms.svg - configured to be skipped while transforming. This is the last file in each entry.
  2. skip-loading.svg - configured to not be loaded by vite-awesome-svg-loader. We'll show how it works in the last section.

Preserve line width

Replace color

Every transform: preserve line width and replace color

Skip loading entirely

These files are configured to be skipped by vite-awesome-svg-loader entirely. This is useful, for example, when you want to use other loader.

Since we're not using any other loader, we'll just get file path.

Here's the list of these files:

    Named async icons example

    This is just an example, you should implement your own component

    Put SVG into the DOM

    This is what essentially all UI frameworks do. However, this approach is recommended only when you need full control over SVGs. For other purposes, use other loading methods such as URL or symbols.

    Less common loading types

    So far we've demonstrated two loading types: URL and source code that's being reused as a symbol.

    SVGs can be loaded as a Data URI and displayed by setting <img src="data:image/svg+xml;..."> or background-image: url("data:image/svg+xml;...") .

    vite-awesome-svg-loader supports source code and base64 Data URIs. It also can load raw base64.

    Source code data URI, original files

    Base64 data URI, original files

    Base64, original file