🌩 @cloudnouns/kit
The best way to build with Nouns and Lil Nouns. ⌐◨-◨
@cloudnouns/kit is a JavaScript library, written in TypeScript, that makes creating Nouns dead simple.
🔥 Create *any* Noun or Lil Noun.- 👩🏽🔬 Choose all, some, or no traits. Or make Nouns with invisible traits.
🟩 Customize background colors💝 Compatible with any frontend framework (like React, Vue, and Svelte) or vanilla JS.
Note: Check out the Cloud API for a hosted, URL-based version of this library. Perfect for designers and no-code based workflows. Learn more
↗️ .
Quick start
Install with your favorite package manager...
npm install @cloudnouns/kit
# or
yarn add @cloudnouns/kit... import into your project...
import { NounFactory, LilNounFactory } from '@cloudnouns/kit';... initialize...
// random Noun
const noun = NounFactory.createRandom();
const lilnoun = LilNounFactory.createRandom();... and use generously.
<img src={noun.svg} alt="noun" />
<img src={lilnoun.svg} alt="noun" />Noun Properties
| property | type | |
|---|---|---|
background |
string | background color string |
body |
string | name of body trait |
accessory |
string | name of accessory trait |
head |
string | name of head trait |
glasses |
string | name of glasses trait |
seed |
object | |
svg |
string | base64-encoded svg string |
url |
string | url for a hosted image with same properties |
Example
const noun = NounFactory.createFromId(429); // Noun 429
/** example properties
noun.background = '#d5d7e1'
noun.body = 'foggrey'
noun.accessory = 'id'
noun.head = 'paperclip'
noun.glasses = 'smoke'
noun.svg = 'data:image/svg+xml;base64,...'
noun.seed = {
background: 0,
body: 8,
accessory: 59,
head: 147,
glasses: 16
};
noun.url = 'https://api.cloudnouns.com/v2/nouns/pfp?seed=0,8,59,147,16'
*/