sigil-js

!Minzipped Size

→ Github

→ NPM

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. sigil-js is a javascript library that converts one of these names into its corresponding Sigil.

!example images

Usage

$3

``js
import { sigil, reactRenderer } from 'urbit-sigil-js'

const Sigil = props => {
return (

{
sigil({
patp: props.patp,
renderer: reactRenderer,
size: props.size,
colors: ['black', 'white'],
})
}

)
}
`

$3

`js
const { sigil, stringRenderer } = require('urbit-sigil-js')

const svgString = sigil({
patp: 'zod',
renderer: stringRenderer,
size: 128,
colors: ['black', 'white'],
})

`




Install

SSH: npm install git+ssh://git@github.com/urbit/sigil-js

HTTPS: npm install git+https://git@github.com/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 |
|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| 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

Development

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

$3

You'll need Node installed. We use 10.0.0. To install Node on MacOS or Ubuntu, look here. Once you have Node, you'll need to clone this repository.

SSH: git@github.com:urbit/sigil-js.git

HTTPS: https://github.com/urbit/sigil-js.git

Then, cd into the repository and run npm install.

$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

!many