# 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 `` elements in an `` 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: ```html ``` 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) ```html ``` ## 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"` ```html ``` ## 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. ```html ``` ## Customization For customization, you can add your own classes to customize the styles: ```html ``` ## 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 ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `size` | number | `1` | Sets the icon's width and height in rem. A value of 1 renders the icon at 1rem. | | `viewBox` | string | `0 0 16 16` | Sets the viewBox size of the icon. | | `focusable` | boolean | `false` | Indicating whether the icon should be focusable via keyboard navigation. When false, the icon is also hidden from screen readers. | ### Dynamic props | Name | Description | | --- | --- | | `stroke` | When set, it changes the icon's styling from filled to stroked, rendering the icon as an outline. | --- Category: Components Keywords: svg-icon, icon, vector, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt