Svelte library for programmatically crafting grid based SVG icons.
Requires Svelte version 4.
Fork, pillage, and plunder! Do whatever as long as you adhere to the project's permissive MIT license.
The core class supplied to P45 components. It provides the context for P45 components such as grid size and certain named nodes.
It also provides functions for parsing command and transformation lists used by components such as <Shape> and <Transform>.
class P45 {
// Accepts size of the grid used as the unscaled width and height in pixels.
// Size must be between 8 and 64.
// Size must be divisible by 2.
constructor(size=24) {
this.size = size
this.center // '12' for default size
this.centerNode // 'M12' for default size
this.topLeftNode
this.topCenterNode
this.topRightNode
this.centerLeftNode
this.centerCenterNode
this.centerRightNode
this.bottomLeftNode
this.bottomCenterNode
this.bottomRightNode
}
// Parses nodes such as `M12` into coordinates such as `{ x: 12, y: 12 }`.
parseNode(node);
// Converts coordinates such as `x=12` and `y=12` into nodes such as `M12`.
nodeOf(x, y);
// Converts the number `n` into it's base 26 alphabetic representation.
numberToAlpha(n);
// Parses a string or array of strings representing
// draw commands for a single shape and returns a
// string used in SVG paths like this `<path d={result} />`.
parseDrawCommands(commands);
// Parses a string or array of strings representing
// transform commands for a single element and returns a
// string used for the SVG transform attribute like this
// `<path transform={result} />` or `<g transform={result} />`.
parseTransformCommands(commands);
}<script>
import { P45, Icon, Shape } from 'p45'
const p45 = new P45()
</script>
<Icon {p45} width="300" height="300">
<!-- Simple triangle -->
<Shape
draw="
move to E20
line to U20
line to M4
close
" />
</Icon>Illustration of the above drawing but with some minor modifications so it's visible on GitHub and other platforms.
move to <node>
- move to D3 =>
M 3 3 - move to M8 =>
M 12 8
line to <node>
- line to D3 =>
L 3 3 - line to M8 =>
L 12 8
[cubic] curve to <node> control with <node> [and <node>]
- curve to M8 control with D3 =>
S 3 3 12 8 - curve to M8 control with D3 and F6 =>
C 3 3 6 6 12 8
(quad|quadratic) curve to <node> [control with <node>]
- (quad | quadratic) curve to M8 =>
T 12 8 - (quad | quadratic) curve to M8 control with D3 =>
Q 3 3 12 8
arc to <node> with radius <number> and <number> [and rotation <number>] [and is large] [and is sweeping]
- arc to M8 with radius 6 and 10 =>
A 6 10 0 0 0 12 8 - arc to M8 with radius 6 and 10 and rotation 45 =>
A 6 10 45 0 0 12 8 - arc to M8 with radius 6 and 10 and is large =>
A 6 10 0 1 0 12 8 - arc to M8 with radius 6 and 10 and is sweeping =>
A 6 10 0 0 1 12 8 - arc to M8 with radius 6 and 10 and rotation 45 and is large and is sweeping =>
A 6 10 45 1 1 12 8
close (connects the ends of the shape together)
- close =>
z
move by <number>
- move by D3 =>
translate(3 3) - move by M8 =>
translate(12 8)
move <direction> by <number>
- move up by 3 =>
translate(0 -3) - move down by 3 =>
translate(0 3) - move left by 3 =>
translate(-3 0) - move right by 3 =>
translate(3 0)
rotate by <number> [around <node>]
- rotate by 45_ =>
rotate(45) - rotate by 45 around M8_ =>
rotate(45, 12, 8)
scale [x|y] by <number>
- scale by 2 =>
scale(2 2) - scale x by 2 =>
scale(2 0) - scale y by 2 =>
scale(0 2)
scale [x|y|width|height|horizontally|vertically] by <number>
- scale by 2 =>
scale(2 2) - scale x by 2 =>
scale(2 1) - scale y by 2 =>
scale(1 2)
flip [x|y|width|height|horizontally|vertically]
- flip =>
scale(-1 -1) - flip x =>
scale(-1 1) - flip y =>
scale(1 -1)
skew [x|y|width|height|horizontally|vertically] by <number>
- skew by 20 =>
skewX(20) skewY(20) - skew x by 20 =>
skewX(20) - skew y by 20 =>
skewY(20)
Creates a circle from a center origin and radius.
<script>
// P45 instance to use as grid and context.
export let p45 = getContext('p45')
// Circle center point.
export let origin = p45.centerNode
// Circle radius.
export let radius = p45.center - 1
</script>
<!-- Any elements allowable within a `<circle>`. -->
<slot /><Circle
p45={getContext('p45')}
origin={p45.centerNode}
radius={p45.center - 1}
>
<div />
</Circle>Container for slotted shapes that form an Icon.
It's represented by an svg element sized by the passed P45 instance. Raw svg child elements maybe slotted in too.
<script>
// An instance of the P45 class.
export let p45 = getContext('p45')
// 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 = ""
// P45 instance used to size the icon and parse nodes.
setContext("p45", ...)
</script>
<!-- SVG elments and components that form the icon. -->
<slot /><Icon
p45={getContext('p45')}
title=""
description=""
>
<div />
</Icon>Creates a referencable mask for cutting holes in other shapes.
<script>
// P45 instance to use as grid and context.
export let p45 = getContext('p45')
// Unique ID to reference the mask.
export let id
</script>
<!-- Elments and components that form the hole in the referencing shape. -->
<slot /><Mask
p45={getContext('p45')}
id
>
<div />
</Mask>Creates a regular polygon from an origin center point, number of edges, and radius to a vertex.
<script>
// P45 instance to use as grid and context.
export let p45 = getContext('p45')
// Origin to use for transforms.
export let origin = p45.centerNode
// Number of sides.
export let sides = 6
// Circle radius.
export let radius = p45.center - 1
// Amount to rotate counter clockwise in degrees, may be negative.
export let rotate = 0
</script>
<!-- Any elements allowable within a `<polygon>`. -->
<slot /><RegularPolygon
p45={getContext('p45')}
origin={p45.centerNode}
sides={6}
radius={p45.center - 1}
rotate={0}
>
<div />
</RegularPolygon>Creates a shape from three or more points.
<script>
// P45 instance to use as grid and context.
export let p45 = getContext('p45')
// Either an array off commands or a line separated list of commands.
export let commands = /* Simple Wallace & Gromit rocket drawing */
// ID of a mask cut out.
export let mask = ""
// Either an array off commands or a line separated list of commands.
export let transforms = ""
// Origin to use for transforms.
export let origin = p45.centerNode
</script>
<!-- Any elements allowable within a `<path>`. -->
<slot /><Shape
p45={getContext('p45')}
commands={/* Simple Wallace & Gromit rocket drawing */}
mask=""
transforms=""
origin={p45.centerNode}
>
<div />
</Shape>Creates a group for simple transformations.
<script>
// P45 instance to use as grid and context.
export let p45 = getContext('p45')
// Either an array off commands or a line separated list of commands.
export let transforms = ""
// Origin to use for transforms.
export let origin = p45.centerNode
</script>
<!-- Components and elements to transform within a `<g>`. -->
<slot /><Transform
p45={getContext('p45')}
transforms=""
origin={p45.centerNode}
>
<div />
</Transform>