svg.ts

view source

Declarations
#

3 declarations

SvgData
#

svg.ts view source

SvgData import type {SvgData} from '@fuzdev/fuz_ui/svg.js';

A structured icon definition rendered by Svg.svelte. Rendering is purely structural - typed fields, never raw markup - so untrusted data cannot introduce script execution or navigation. See Svg.svelte for the full security notes, including the residual style url(...) caveat.

paths?

List of svg path attribute objects, spread onto each path element. The d attribute is required; a per-path fill overrides the resolved fill.

type Array<{d: string} & SvelteHTMLElements['path']> | null

style?

Inline style applied to the root svg element, merged with any style passed as a component prop. Travels with the icon definition - per-instance svg attributes belong on the Svg component itself.

type string | null

fill?

Default fill for every path, falling back to var(--text_color, #000). Overridden by the component's fill prop, and per-path by a path's own fill.

type string | null

label?

Accessible name, applied as aria-label. Overridden by the component's label prop.

type string | null

viewBox?

Defaults to "0 0 100 100".

type string | null

gradients?

Gradient definitions rendered into the svg's <defs> block. This is the structured replacement for raw markup - reference a gradient from a path/shape fill or stroke with url(#id). Most svgs need only paths.

type Array<SvgGradient> | null

SvgGradient
#

svg.ts view source

SvgGradient import type {SvgGradient} from '@fuzdev/fuz_ui/svg.js';

A gradient definition rendered into the svg's <defs> block. Reference it from a path/shape fill or stroke with url(#id).

type

Whether to render a linearGradient or radialGradient element.

type 'linear' | 'radial'

id

The id referenced by a fill/stroke like url(#id). Inline svgs share the document's id namespace, so pick a value unique to the icon - icons with colliding ids all resolve to whichever element renders first.

type string

stops

The gradient's color stops.

type Array<SvgGradientStop>

attrs?

Additional attributes on the gradient element, e.g. gradientUnits, gradientTransform, cx/cy/r (radial), or x1/y1/x2/y2 (linear).

type (SvelteHTMLElements['radialGradient'] & SvelteHTMLElements['linearGradient']) | null

SvgGradientStop
#

svg.ts view source

SvgGradientStop import type {SvgGradientStop} from '@fuzdev/fuz_ui/svg.js';

A single color stop of an SvgGradient.

offset

The stop's position along the gradient, e.g. 0.5 or "50%".

type string | number

color

The stop's color, applied as the stop-color attribute.

type string

opacity?

The stop's opacity, applied as the stop-opacity attribute.

type string | number | null

Imported by
#