Quick Start

@thulite/inline-svg is a package that enables seamless integration of SVG icons and graphics into your Thulite projects. It allows you to inline SVG content directly into your HTML, making it easy to style and manipulate SVG elements with CSS.

Installation#

npm install @thulite/inline-svg

pnpm install @thulite/inline-svg

yarn install @thulite/inline-svg

bun install @thulite/inline-svg

Basic Usage#

Using the Partial#

The simplest way to include an SVG is by using the partial:

{{< partial "inline-svg" "path/to/icon" >}}

Where path/to/icon is the path to your SVG file relative to the assets directory (without the .svg extension).

Using the Shortcode#

For content files, you can use the shortcode:

{{< inline-svg "path/to/icon" >}}

Or with named parameters:

{{< inline-svg src="path/to/icon" class="custom-class" >}}

Advanced Usage#

Passing Parameters#

You can pass additional parameters to customize the SVG:

{{ partial "inline-svg" (dict
  "src" "path/to/icon"
  "class" "icon-large primary-color"
  "width" "24"
  "height" "24"
) }}

Available Parameters#

Using Page Resources#

You can also reference SVGs from your page resources:

{{ $svg := .Resources.GetMatch "icon.svg" }}
{{ partial "inline-svg" (dict "src" $svg) }}

Icon Sets#

The package supports using icon sets. If an SVG isn’t found in the specified path, it will look for it in the icon set directory.

Configure the icon set directory in your site parameters:

# Inline SVG (@thulite/inline-svg)
[inline_svg]
  iconSetDir = "tabler-icons" # "tabler-icons" (default)

Then use icons from the set:

{{ partial "inline-svg" "icon-name" }}

This will look for the SVG in assets/svgs/tabler-icons/icon-name.svg.

Accessibility Features#

The package automatically enhances SVGs for accessibility:

• Adds proper ARIA attributes
• Supports adding title and description elements
• Sets appropriate ARIA roles

Example with accessibility features:

{{ partial "inline-svg" (dict
  "src" "check-circle"
  "title" "Success"
  "desc" "Operation completed successfully"
  "role" "img"
) }}

CSS Styling#

All inlined SVGs receive the svg-inline class by default, making it easy to style them with CSS:

.svg-inline {
  fill: currentColor;
}

.svg-inline.large {
  width: 2em;
  height: 2em;
}

Examples#

Basic Icon#

{{ partial "inline-svg" "check" }}

Styled Icon with Title#

{{ partial "inline-svg" (dict
  "src" "alert-triangle"
  "class" "warning-icon"
  "title" "Warning"
  "width" "24"
  "height" "24"
  "stroke" "orange"
) }}

Using in Navigation#

<nav>
  <a href="/">
    {{ partial "inline-svg" (dict "src" "home" "class" "nav-icon") }}
    Home
  </a>
</nav>

Troubleshooting#

If your SVG doesn’t appear, check:

1. The path is correct relative to the assets directory
2. The SVG file exists and is valid
3. You’ve removed the .svg extension in the path

License#

This package is licensed under the MIT License. See the LICENSE file for details.