Urbit-sigil-js NPM

sigil-js

Minzipped Size

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

ES2015 / React

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

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

Node

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

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.