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.
<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>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"
]
},
...
}
*/import { AnticlockwiseBalancingLoop } from 'p44'Anticlockwise Balancing Loop: Anticlockwise balancing loop symbol used in causal loop diagrams.
Keywords: loop, arrow, balancing, causal loop diagram
import { AnticlockwiseReinforcingLoop } from 'p44'Anticlockwise Reinforcing Loop: Anticlockwise reinforcing loop symbol used in causal loop diagrams.
Keywords: loop, arrow, reinforcing, causal loop diagram
import { Asterisk } from 'p44'Asterisk
Keywords: maths, multiply, asterisk, star, snow, snowflake
import { Chart } from 'p44'Chart: Represents a data chart, graph, plot, or data analytics.
Keywords: chart, graph, plot, data, analytics, analysis
import { Chopsticks } from 'p44'Chopsticks: Two lines crossing to form an image of chopsticks.
Keywords: chopsticks, crossing lines
import { Circle } from 'p44'Circle
Keywords: geometry, circle, dot, round
Props:
- radius from the center, defaults to 7
import { Clock } from 'p44'Clock: A clock set to approximately ten past ten.
Keywords: clock, time
import { ClockwiseBalancingLoop } from 'p44'Clockwise Balancing Loop: Clockwise balancing loop symbol used in causal loop diagrams.
Keywords: loop, arrow, balancing, causal loop diagram
import { ClockwiseReinforcingLoop } from 'p44'Clockwise Reinforcing Loop: Clockwise reinforcing loop symbol used in causal loop diagrams.
Keywords: loop, arrow, reinforcing, causal loop diagram
import { ColouredChart } from 'p44'Coloured Chart: Represents a coloured data chart, graph, plot, or data analytics.
Keywords: chart, graph, plot, data, analytics, analysis
import { ConicalFlask } from 'p44'Conical Flask: Conical flask like those used in chemistry.
Keywords: conical flask, erlenmeyer flask, science, chemistry
import { Copy } from 'p44'Copy: Indicates clipboard copyable content.
Keywords: copy, clipboard, files
import { Crucifix } from 'p44'Crucifix
Keywords: crucifix, cross, religion
import { CurlyBraces } from 'p44'Curly Braces: Pair of curly braces used in maths and programming.
Keywords: maths, programming, braces, brackets, object
import { DivergingLines } from 'p44'Diverging Lines: Two diverging or converging lines; dependent on your perspective.
Keywords: lines, converging, diverging
import { Divide } from 'p44'Divide
Keywords: maths, divide, percentage
import { EdgedDiamond } from 'p44'Edged Diamond: Diamond shape without curves.
Keywords: geometry, polygon, diamond, edged
import { EdgedHeart } from 'p44'Edged Heart: Heart shape without curves.
Keywords: geometry, polygon, heart, edged
import { Equal } from 'p44'Equal
Keywords: maths, equals
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'
import { Hexagram } from 'p44'Hexagram
Keywords: hexagram, star of david
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
import { HorseShoe } from 'p44'Horseshoe: Horseshoe curve using a single line.
Keywords: horseshoe, curve, line
import { Kite } from 'p44'Kite: Kite shape using a single polygon.
Keywords: geometry, polygon, kite, quadrilateral
import { LogoNPM } from 'p44'Node Package Manager (NPM) Logo
Keywords: logo, npm, node, javascript, programming
import { MediaControlEject } from 'p44'Media Control Eject: Eject icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, eject
import { MediaControlPause } from 'p44'Media Control Pause: Pause icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, pause
import { MediaControlPlay } from 'p44'Media Control Play: Play icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, play
import { MediaControlRecord } from 'p44'Media Control Record: Record icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, record
import { MediaControlRepeat } from 'p44'Media Control Repeat: Repeat icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, repeat
import { MediaControlReplay } from 'p44'Media Control Replay: Replay icon.
Keywords: media control, video, audio, replay
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
import { MediaControlShuffle } from 'p44'Media Control Shuffle: Shuffle icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, shuffle
import { MediaControlSkip } from 'p44'Media Control Skip: Skip icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, skip
import { MediaControlStop } from 'p44'Media Control Stop: Stop icon as defined by ISO 7000 / IEC 60417.
Keywords: media control, iso, video, audio, stop
import { Minus } from 'p44'Minus
Keywords: maths, minus, subtraction, pipe
import { NegativeBubble } from 'p44'Negative Bubble: Minus symbol within a bubble.
Keywords: minus, bubble, negative, causal loop diagram
import { P44 } from 'p44'P44: Logo of the P44 icon library.
Keywords: logo, p44
import { P45 } from 'p44'P45: Logo of the P45 icon creation library.
Keywords: logo, p45
import { P69 } from 'p44'P69: Logo of the P69 CSS compile time token library.
Keywords: logo, p69
import { Parabola } from 'p44'Parabola
Keywords: geometry, line, curve, parabola
import { Parabola2 } from 'p44'Parabola2
Keywords: geometry, line, curve, parabola
import { Parallelogram } from 'p44'Parallelogram
Keywords: geometry, polygon, parallelogram, quadrilateral
Props:
- slope is the angle in degrees, negative for left leaning, defaults to 15
import { Parenthesis } from 'p44'Parenthesis
Keywords: maths, parenthesis, round brackets
import { Plus } from 'p44'Plus
Keywords: maths, cross, plus, addition
import { PositiveBubble } from 'p44'Positive Bubble: Plus symbol within a bubble.
Keywords: plus, bubble, positive, causal loop diagram
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
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
import { RightTriangle } from 'p44'Right Angle Triangle
Keywords: geometry, polygon, triangle, parabola
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'
import { SQL } from 'p44'SQL: Custom SQL logo.
Keywords: sql, database, db, query, data
import { Smiley } from 'p44'Smiley
Keywords: smiley, face, smile, frown
Props:
- type must be one of [bigsmile, smile, neutral, frown, bigfrown]
import { Spreadsheet } from 'p44'Spreadsheet: Represents a spreadsheet or table based statistics.
Keywords: spreadsheet, excel, table, grid
import { SquareBrackets } from 'p44'Square Brackets: Pair of square brackets used in maths and programming.
Keywords: maths, programming, square brackets, array
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
import { TiPi } from 'p44'TiPi
Keywords: tipi, teepee, triangle