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_50)" />

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

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

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

With gradients
#

Define gradients on the data with gradients and reference them by id from a fill or stroke:

const logo_fuz_gradient = {
	label: 'a friendly green-to-blue gradient spider facing you',
	fill: 'url(#logo_fuz_gradient)',
	paths: logo_fuz.paths,
	gradients: [
		{
			type: 'linear',
			id: 'logo_fuz_gradient',
			stops: [
				{offset: '0%', color: '#3db33d'},
				{offset: '100%', color: '#6199d1'},
			],
		},
	],
} satisfies SvgData;

<Svg data={logo_fuz_gradient} />