P44

Svelte package exposing SVG icons crafted using P45.

Icons will be added, removed, and modified before the first version so keep that in mind. Apply custom styles via CSS selectors.

Requires Svelte version 4.

Usage

<script>
    import { Diamond, Star } from 'p44'
</script>

// Accepts <svg> HTML element attributes.
<Diamond width="100" height="100" class="classy" />

// Some icons accept optional props to refine their shape.
<Star leg="6" indent="0.5" class="classy2" />

<style>
    :global(.classy) {
        overflow: hidden;
        border: 1px solid goldenrod;
    }

    :global(.classy2) {
        overflow: hidden;
        border: 1px solid goldenrod;
        width: 100px;
        height: 100px;
    }
</style>

Keywords

A separate file containing icon component names mapped to their keywords is available:

import docs from 'p44/docs'

// To get icon component names.
console.log(Object.keys(docs))
/*
[
  "BrokenTriangle"
  "Chopsticks",
  "Circle",
  "Clock",
  ...
]
*/

// All metadata.
console.log(docs)
/*
{
  "BrokenTriangle": {
    "name": "Broken Triangle",
    "alt": "A simple triangle broken at the top.",
    "keywords": [
      "broken",
      "triangle",
      "musical instrument"
    ]
  },
  "Chopsticks": {
    "name": "Chopsticks",
    "alt": "Two lines crossing to form an image of chopsticks.",
    "keywords": [
      "chopsticks",
      "crossing lines"
    ]
  },
  ...
}
*/

Components

AnticlockwiseBalancingLoop

import { AnticlockwiseBalancingLoop } from 'p44'

Anticlockwise Balancing Loop: Anticlockwise balancing loop symbol used in causal loop diagrams.

Keywords: loop, arrow, balancing, causal loop diagram

AnticlockwiseReinforcingLoop

import { AnticlockwiseReinforcingLoop } from 'p44'

Anticlockwise Reinforcing Loop: Anticlockwise reinforcing loop symbol used in causal loop diagrams.

Keywords: loop, arrow, reinforcing, causal loop diagram

Asterisk

import { Asterisk } from 'p44'

Asterisk

Keywords: maths, multiply, asterisk, star, snow, snowflake

Chart

import { Chart } from 'p44'

Chart: Represents a data chart, graph, plot, or data analytics.

Keywords: chart, graph, plot, data, analytics, analysis

Chopsticks

import { Chopsticks } from 'p44'

Chopsticks: Two lines crossing to form an image of chopsticks.

Keywords: chopsticks, crossing lines

Circle

import { Circle } from 'p44'

Circle

Keywords: geometry, circle, dot, round

Props:

• radius from the center, defaults to 7

Clock

import { Clock } from 'p44'

Clock: A clock set to approximately ten past ten.

Keywords: clock, time

ClockwiseBalancingLoop

import { ClockwiseBalancingLoop } from 'p44'

Clockwise Balancing Loop: Clockwise balancing loop symbol used in causal loop diagrams.

Keywords: loop, arrow, balancing, causal loop diagram

ClockwiseReinforcingLoop

import { ClockwiseReinforcingLoop } from 'p44'

Clockwise Reinforcing Loop: Clockwise reinforcing loop symbol used in causal loop diagrams.

Keywords: loop, arrow, reinforcing, causal loop diagram

ColouredChart

import { ColouredChart } from 'p44'

Coloured Chart: Represents a coloured data chart, graph, plot, or data analytics.

Keywords: chart, graph, plot, data, analytics, analysis

ConicalFlask

import { ConicalFlask } from 'p44'

Conical Flask: Conical flask like those used in chemistry.

Keywords: conical flask, erlenmeyer flask, science, chemistry

Copy

import { Copy } from 'p44'

Copy: Indicates clipboard copyable content.

Keywords: copy, clipboard, files

Crucifix

import { Crucifix } from 'p44'

Crucifix

Keywords: crucifix, cross, religion

CurlyBraces

import { CurlyBraces } from 'p44'

Curly Braces: Pair of curly braces used in maths and programming.

Keywords: maths, programming, braces, brackets, object

DivergingLines

import { DivergingLines } from 'p44'

Diverging Lines: Two diverging or converging lines; dependent on your perspective.

Keywords: lines, converging, diverging

Divide

import { Divide } from 'p44'

Divide

Keywords: maths, divide, percentage

EdgedDiamond

import { EdgedDiamond } from 'p44'

Edged Diamond: Diamond shape without curves.

Keywords: geometry, polygon, diamond, edged

EdgedHeart

import { EdgedHeart } from 'p44'

Edged Heart: Heart shape without curves.

Keywords: geometry, polygon, heart, edged

Equal

import { Equal } from 'p44'

Equal

Keywords: maths, equals

Exponent

import { Exponent } from 'p44'

Exponent

Keywords: maths, power, exponentiation

Props:

• power is the exponent, defaults to 2
• base value the exponent is applied too, defaults to 'n'

Hexagram

import { Hexagram } from 'p44'

Hexagram

Keywords: hexagram, star of david

HiraShuriken

import { HiraShuriken } from 'p44'

Hira Shuriken: Hira Shuriken is a type of Japanese throwing star.

Keywords: geometry, polygon, hira shuriken, star, ninja, weapon, throw

Props:

• legs as any whole number 3 or above, defaults to 4
• indent is the distance up the leg to form inner corner between 0 and 1, defaults to 0.3

HorseShoe

import { HorseShoe } from 'p44'

Horseshoe: Horseshoe curve using a single line.

Keywords: horseshoe, curve, line

Kite

import { Kite } from 'p44'

Kite: Kite shape using a single polygon.

Keywords: geometry, polygon, kite, quadrilateral

LogoNPM

import { LogoNPM } from 'p44'

Node Package Manager (NPM) Logo

Keywords: logo, npm, node, javascript, programming

MediaControlEject

import { MediaControlEject } from 'p44'

Media Control Eject: Eject icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, eject

MediaControlPause

import { MediaControlPause } from 'p44'

Media Control Pause: Pause icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, pause

MediaControlPlay

import { MediaControlPlay } from 'p44'

Media Control Play: Play icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, play

MediaControlRecord

import { MediaControlRecord } from 'p44'

Media Control Record: Record icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, record

MediaControlRepeat

import { MediaControlRepeat } from 'p44'

Media Control Repeat: Repeat icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, repeat

MediaControlReplay

import { MediaControlReplay } from 'p44'

Media Control Replay: Replay icon.

Keywords: media control, video, audio, replay

MediaControlRewind

import { MediaControlRewind } from 'p44'

Media Control Rewind: Rewind icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, rewind, fast forward

MediaControlShuffle

import { MediaControlShuffle } from 'p44'

Media Control Shuffle: Shuffle icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, shuffle

MediaControlSkip

import { MediaControlSkip } from 'p44'

Media Control Skip: Skip icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, skip

MediaControlStop

import { MediaControlStop } from 'p44'

Media Control Stop: Stop icon as defined by ISO 7000 / IEC 60417.

Keywords: media control, iso, video, audio, stop

Minus

import { Minus } from 'p44'

Minus

Keywords: maths, minus, subtraction, pipe

NegativeBubble

import { NegativeBubble } from 'p44'

Negative Bubble: Minus symbol within a bubble.

Keywords: minus, bubble, negative, causal loop diagram

P44

import { P44 } from 'p44'

P44: Logo of the P44 icon library.

Keywords: logo, p44

P45

import { P45 } from 'p44'

P45: Logo of the P45 icon creation library.

Keywords: logo, p45

P69

import { P69 } from 'p44'

P69: Logo of the P69 CSS compile time token library.

Keywords: logo, p69

Parabola

import { Parabola } from 'p44'

Parabola

Keywords: geometry, line, curve, parabola

Parabola2

import { Parabola2 } from 'p44'

Parabola2

Keywords: geometry, line, curve, parabola

Parallelogram

import { Parallelogram } from 'p44'

Parallelogram

Keywords: geometry, polygon, parallelogram, quadrilateral

Props:

• slope is the angle in degrees, negative for left leaning, defaults to 15

Parenthesis

import { Parenthesis } from 'p44'

Parenthesis

Keywords: maths, parenthesis, round brackets

Plus

import { Plus } from 'p44'

Plus

Keywords: maths, cross, plus, addition

PositiveBubble

import { PositiveBubble } from 'p44'

Positive Bubble: Plus symbol within a bubble.

Keywords: plus, bubble, positive, causal loop diagram

Rectangle

import { Rectangle } from 'p44'

Rectangle

Keywords: geometry, polygon, rect, rectangle, square, quadrilateral

Props:

• wr is Width Radius (apothem), defaults to 8
• hr is Height Radius (apothem), defaults to 5

RegularPolygon

import { RegularPolygon } from 'p44'

Regular Polygon

Keywords: geometry, polygon, regular

Props:

• sides is the number of sides as positive integer greater than 2, defaults to 5

RightTriangle

import { RightTriangle } from 'p44'

Right Angle Triangle

Keywords: geometry, polygon, triangle, parabola

Root

import { Root } from 'p44'

Root

Keywords: maths, root

Props:

• power is the exponent, defaults to 2
• base value the exponent is applied too, defaults to 'n'

SQL

import { SQL } from 'p44'

SQL: Custom SQL logo.

Keywords: sql, database, db, query, data

Smiley

import { Smiley } from 'p44'

Smiley

Keywords: smiley, face, smile, frown

Props:

• type must be one of [bigsmile, smile, neutral, frown, bigfrown]

Spreadsheet

import { Spreadsheet } from 'p44'

Spreadsheet: Represents a spreadsheet or table based statistics.

Keywords: spreadsheet, excel, table, grid

SquareBrackets

import { SquareBrackets } from 'p44'

Square Brackets: Pair of square brackets used in maths and programming.

Keywords: maths, programming, square brackets, array

Star

import { Star } from 'p44'

Star: Star shape with a programmed number of legs and indent.

Keywords: geometry, polygon, star

Props:

• legs is any whole number 3 or above, defaults to 5
• indent is the distance up the leg to form inner corner between 0 and 1, defaults to 0.33

TiPi

import { TiPi } from 'p44'

TiPi

Keywords: tipi, teepee, triangle