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.

!sigil intro image

Basic Usage

$3

``js
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

$3

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

$3

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

$3

npm run test`

$3

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

$3

There are two main dependencies.
- transformation-matrix
- svgson

And React for the reactRenderer function.
- react

$3

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

$3

- ~ridlur-figbud

$3

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

!sigil outro image