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 urbitme-sigil-js

Note: this is a temporary published version. The official package is at urbit/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

npm run build

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