P45

Svelte library for programmatically crafting grid based SVG icons.

Requires Svelte version 4.

Made to be Plundered

Fork, pillage, and plunder! Do whatever as long as you adhere to the project's permissive MIT license.

Classes

P45

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.

Draw Commands

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

Transform Commands

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)

Components

{{PLACEHOLDER}}