SVG Icon

The Svg component allows you to easily add SVG icons to your project. It acts as a wrapper for SVG elements and can replace the standard svg tag. You can include any path or other SVG elements within it.

About

The Svg component wraps an icon's <path> elements in an <svg> with the size, the fill and the viewBox already set. Put the paths inside it and give the size in rem.

Example

Start by importing the Svg component from the theui-svelte library.

You can embed any SVG elements, such as paths, circles, or groups, within the Svg component. Here's a simple example:

Svelte 
<script>
  import { Svg } from "theui-svelte";
</script>

<Svg>
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
</Svg>

This will render a circle outline icon that uses the current text color.

Icon Size

The size prop sets the icon's width and height in rem, so it is relative to the root font size. For example, a value of 1 renders the icon at 1rem. You can adjust this value to scale the icon larger or smaller.

Default: 1 (1rem)

Svelte 
<Svg>
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
</Svg>
<Svg size={1.5}>
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
</Svg>
<Svg size={2}>
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
</Svg>

Modify viewBox

The viewBox prop defines the coordinate system and dimensions of the SVG canvas. You can modify this value to adjust the visible area of the SVG content.

Default: "0 0 16 16"

Svelte 
<Svg viewBox="0 -960 960 960">
  <path d="M200-120q-33 ... 56.5T760-120H200Zm0-80h560v-560H200v560Z"/>
</Svg>

Stroke Icon

When the stroke attribute is passed to the Svg component, it changes the icon's styling from filled to stroked. This allows you to easily render stroke-based icons.

Svelte 
<Svg stroke>
  <circle cx="8" cy="8" r="4" />
</Svg>

Customization

For customization, you can add your own classes to customize the styles:

Svelte 
<Svg class="fill-brand-500">
  <path d="M8 15A7 7 ... 0 0 16"/>
</Svg>

Accessibility

The SVG component is built for flexible, accessible icons.

  • Decorative by default: Uses aria-hidden="true" and focusable="false" to skip screen readers and keyboard navigation. Set focusable={true} to expose the icon to assistive technologies.
  • Custom size and viewbox: Easily adjust using size and viewBox props.
  • Dynamic styling: Use stroke prop or class for visual customization.

Configuration