Skip to main content
ST FN

SVG

Automatic SVGs optimization and sprite creation.

How It Works

Place your SVG files in the src/svg/sprite-images folder. These files will then be combined into symbols within a JavaScript file. This file will inject them into your DOM after the page has loaded.

Using the sprite in your templates

To use an SVG from the created sprite, follow this method. Replace #logo-overdog in the example with the original name of the desired SVG. The name of each SVG file is used to create its ID within the sprite.

<svg class="fill-gray-500 h-12 w-12">
  <use xlink:href="#logo-overdog"></use>
</svg>

The use xlink:href will fetch the code of the symbol #logo-overdog from the sprite and display it inside the SVG tag. The xlink is deprecated in favor of just href, but Safari 11 (as of 2017) requires it. It's still recommended to keep it.

If your page does not contain any use xlink:href, the JS file for SVGs will not be loaded.

Modifying the color via your CSS

Since the SVG Sprite is in a shadow DOM, you must remove any fill= attributes from your SVG file if you want to change its color via your CSS later (this applies to both groups and paths). You can also add a class to the SVG tag, for example, fill-slate-400.

Scalable Usage (without width or height)

Responsively resizing an SVG can be quite complex. If your div has a well-defined height and width, that's great (e.g., for icons, illustrations, etc.). But if you want an SVG to fill all the available width without fixed dimensions (e.g., a divider), it's more tricky.

A tip: Take the viewbox from the symbol and apply it to your <svg> tag in your template. Then set the width or height to auto. Browsers will automatically adjust while respecting the viewbox ratio.

Older versions of Overdog (before v1.3)

If you're using a version of Overdog prior to v1.3, place your SVG files in the src/svg/sprite-images folder. In the root of your project in the terminal, run yarn svg. You will need to add the @svgPath alias before your SVG ID in your HTML. Look at the examples already in your project for guidance.