Svelte library for programmatically crafting grid based SVG icons.
Requires Svelte version 4.
Do whatever as long as you adhere to the permissive MIT license found within.
Creates a circle from a center origin and radius.
<script>
// Circle center point.
export let origin = Grid.centerNode
// Circle radius.
export let radius = Grid.center-1
</script>
<Circle
origin={Grid.centerNode}
radius={Grid.center-1}
/>
Container for slotted shapes that form an Icon.
It's represented by an svg element sized by the passed grid. This means
raw svg child elements maybe slotted in too.
<script>
// An instance of the Grid class.
export let grid = getContext('p45-grid')
// The icon's title applied using the SVG title tag.
export let title = ""
// Description of the icon applied using the SVG description tag.
export let description = ""
// Grid used to size the icon and parse nodes.
setContext("p45-grid", ...)
</script>
<!-- SVG elments and components that form the icon. -->
<slot />
<Icon
grid={getContext('p45-grid')}
title=""
description=""
>
<div />
</Icon>
Creates a line from two or more points.
<script>
// Comma separated list of points from first to last that represent a line.
export let points = Grid.nodeOf(1, 1) + "," + Grid.nodeOf(Grid.size-1, Grid.size-1)
</script>
<Line
points={Grid.nodeOf(1, 1) + "," + Grid.nodeOf(Grid.size-1, Grid.size-1)}
/>
Creates a polygon from a set of points.
<script>
// Comma separated list of nodes.
export let points = [
Grid.nodeOf(1, 1),
Grid.nodeOf(Grid.size-1, 1),
Grid.nodeOf(Grid.size-1, Grid.size-1),
Grid.nodeOf(1, Grid.size-1),
].join(',')
</script>
<Polygon
points={[
Grid.nodeOf(1, 1),
Grid.nodeOf(Grid.size-1, 1),
Grid.nodeOf(Grid.size-1, Grid.size-1),
Grid.nodeOf(1, Grid.size-1),
].join(',')}
/>
Creates a regular polygon from an origin center point, number of edges, and radius to a vertex.
<RegularPolygon />
Creates a shape from three or more points.
<script>
// Comma separated list of points from first to last that represent a shape.
// The shape will complete itself with a straight line.
export let points = "E1,H4,G7,E5,C7,B4"
</script>
<Shape
points="E1,H4,G7,E5,C7,B4"
/>
Renders text.
<script>
// Node to render the text at.
export let point = "E4"
</script>
<!-- Text and associated SVG text elements. -->
<slot />
<Text
point="E4"
>
<div />
</Text>
Creates group with simple transformations.
<script>
// Point to perform transformations around.
export let origin = Grid.centerNode
// True to flip along the x-axis.
export let flipX = false
// True to flip along the y-axis.
export let flipY = false
// Amount to translate along the x-axis.
export let translateX = 0
// Amount to translate along the y-axis.
export let translateY = 0
// How much to scale along the x-axis.
export let scaleX = 0
// How much to scale along the y-axis.
export let scaleY = 0
// How much to skew along the x-axis.
export let skewX = 0
// How much to skew along the y-axis.
export let skewY = 0
// Clockwise rotation in degrees.
export let rotate = 0
</script>
<!-- Components and elements to transform. -->
<slot />
<Transform
origin={Grid.centerNode}
flipX={false}
flipY={false}
translateX={0}
translateY={0}
scaleX={0}
scaleY={0}
skewX={0}
skewY={0}
rotate={0}
>
<div />
</Transform>