urbit / Sigil Js
Programming Languages
sigil-js
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'],
})
}
</>
)
}
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.
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.
And React for the reactRenderer function.
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
