@urbit/sigil-js

sigil-js

→ Github

Each of the ~4.2 billion points on Azimuth is unique. Each one has a pronounceable, easily memorized name, something like ~ravmel-ropdyl. Sigils visualize these names – there are as many unique Sigils as there are Azimuth points. @tlon/sigil-js is a javascript library that converts one of these names into its corresponding Sigil.

Basic Usage

React

import { sigil, reactRenderer } from '@tlon/sigil-js'

const Sigil = props => {
 return (
   <>
   {
     sigil({
       patp: props.patp,
       renderer: reactRenderer,
       size: props.size,
       colors: ['black', 'white'],
     })
   }
   </>
 )
}

More examples...

Install

npm install @tlon/sigil-js

API

Param	Explanation	Type	Optional?
patp	Any valid urbit @p	string	No, and can only accept galaxies, stars and planets.
renderer	A recursive function that controls the DOM output. See stringRenderer() and reactRenderer() for examples. Both are exported via sigil-js.	function	Yes. If left undefined, sigil() will return an SVG AST
size	Width and height of desired SVG output	integer	No
width	Width of desired SVG output	integer	No
height	Height of desired SVG output	integer	No
colors	A background (first value) and foreground color (second value) with which to paint the sigil	array like [#4330FC, #FFFFFF]	Yes, default is ['#000', '#fff']
margin	Should the layout use margin or not?	boolean	Yes
class	CSS class to add to the outer SVG tag	string	Yes
attributes	Adds DOM tag attributes to the outer SVG element, like width and height	object	Yes

About the renderer param

As mentioned about, the renderer param expects a recursive function that transform the SVG AST that is generated by sigils.js into DOM elements. Two renders are exported by Sigil.js.

• SVG Plaintext
• React DOM nodes
• Inline background image on React node

Build

Commands	Description
gulp or npm run build	Build the library from source

Tests

npm run test

Toolkit

The toolkit is comprised of helper node scripts, test scripts and a preview webapp. It will remain undocumented for the time being.

Package Dependencies

There are two main dependencies.

• transformation-matrix
• svgson

And React for the reactRenderer function.

• react

Contributing

Please read CONTRIBUTING.md for details on the process for submitting pull requests to us.

Authors

• ~ridlur-figbud

License

This project is licensed under the MIT License - see the LICENSE.txt file for details