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 is a versatile wrapper for incorporating SVG icons into your project. It simplifies the process of adding custom SVG elements, offering a convenient alternative to the standard <svg> tag.

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 red circle with a black border and a blue diagonal line within the same SVG canvas.

Icon Size

The size prop acts as a multiplier for the current font size, determining the icon's dimensions. For example, a value of 1 renders the icon at the same size as the surrounding text (1em). You can adjust this value to scale the icon larger or smaller relative to the text.

Default: 1 (1em)

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-primary-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 tabindex="-1" to skip screen readers and keyboard navigation.
  • Custom size and viewbox: Easily adjust using size and viewBox props.
  • Dynamic styling: Use stroke prop or class for visual customization.

Configuration