Svg #

import Svg from '@fuzdev/fuz_ui/Svg.svelte'; <Svg data={logo_fuz} />

Fills available space by default:

With custom size
#

Set size: (see the Fuz CSS typography docs)

<Svg data={logo_fuz} size="var(--icon_size_xl)" />

<Svg data={logo_fuz} size="var(--icon_size_sm)" />

Set --font_size on the component or a parent:

<span style:--font_size="var(--icon_size_xl)"><Svg data={logo_fuz} /></span>

With custom color
#

Set fill: (see the Fuz CSS colors docs)

<Svg data={logo_fuz} fill="var(--color_d_5)" />

<Svg data={logo_fuz} fill="var(--color_b_5)" />

Set --text_color on the component or a parent, for svgs that have no default fill:

<span style:--text_color="var(--color_i_5)"><Svg data={logo_github} /></span>