@nounbricks/nounbricks-vue v0.2.0-alpha.1

You can read a more user friendly version of this documentation at nounbricks.netlify.app

Getting Started

Nounbricks is a component library built to make it easy for you to add noun assets to your Javascript projects.

⚠️ Nounbricks is currently under development and is not yet ready for production use.

Installing NounBricks

With build tools

Install the nounbricks npm package

npm install @nounbricks/nounbricks-vue

Import and use the components from @nounbricks/nounbricks-vue 🎉

<template>
  <FullNoun
    body="bege-crt"
    head="ape"
    accessories="bird-side"
    glasses="square-black-rgb"
  ></FullNoun>
</template>

<script setup>
import { FullNoun } from "@nounbricks/nounbricks-vue";
</script>

Without build tools

You can try out nounbricks components directly on the browser.

<div id="app"></div>

<!-- load vue before loading nounbricks -->
<script src="https://unpkg.com/vue@3"></script>
<!-- import nounbricks from unpkg -->
<script src="https://unpkg.com/@nounbricks/nounbricks-vue"></script>
<script>
  const { FullNoun } = nounbricks;
  const { createApp } = Vue;
  const app = createApp({
    components: {
      FullNoun,
    },
    template: `<FullNoun
        body="bege-crt"
        head="bag"
        accessories="bird-side"
        glasses="square-black-rgb"
        bg-color="d5d7e1"
      ></FullNoun>`,
  });

  app.mount("#app");
</script>

Component Options

You can find more examples for the component options in respective component sections.

Render a noun with background

All the components ( FullNoun, NounHead, NounGlasses, NounBody, NounAccessory have a prop bg-color ) which lets you specify any background color ( as hex code ) for your rendered noun/noun trait.

<fullnoun ... bg-color="d5d7e1" />

Render a noun without a background

you can omit the bg-color prop to render a noun/noun trait without any backgroud.

Fit to bounds

normally nouns are rendered within a 320x320 square. mostly this leaves additional space which we might want to get rid of. in that situation you can use a fit-to-bounds prop and it should remove all the additional space.

<fullnoun ... fit-to-bounds />

Render as an IMG or SVG

you might want to render the noun as an img instead of a full svg. this helps performance when rendering a lot of nouns together. in those scenarios you can use the renderType prop.

the default value for renderType is svg

<fullnoun
    ...
    renderType="img"
/>

Components

FullNoun

Use this component to render a full noun

FullNoun with background

<FullNoun
  body="bege-crt"
  head="ape"
  accessories="bird-side"
  glasses="square-black-rgb"
  bg-color="d5d7e1"
></FullNoun>

FullNoun without background

<FullNoun
  body="bege-crt"
  head="ape"
  accessories="bird-side"
  glasses="square-black-rgb"
></FullNoun>

FullNoun Fit Bounds

<FullNoun
  body="bege-crt"
  head="ape"
  accessories="bird-side"
  glasses="square-black-rgb"
  fit-to-bounds
></FullNoun>

FullNoun, Render as an IMG instead of SVG

<FullNoun
  body="bege-crt"
  head="ape"
  accessories="bird-side"
  glasses="square-black-rgb"
  bg-color="d5d7e1"
  render-type="img"
></FullNoun>

NounHead

Use this component to render a noun head

NounHead with background

<NounHead head="bag" bg-color="d5d7e1"></NounHead>

NounHead without background

<NounHead head="bag"></NounHead>

NounHead Fit Bounds

<NounHead head="bag" fit-to-bounds></NounHead>

NounHead, Render as an IMG instead of SVG

<NounHead head="bag" bg-color="d5d7e1" render-type="img"></NounHead>

NounGlasses

Use this component to render noun glasses

NounGlasses with background

<NounGlasses body="blue-sky" bg-color="d5d7e1"></NounGlasses>

NounGlasses without background

<NounGlasses body="blue-sky"></NounGlasses>

NounGlasses Fit Bounds

<NounGlasses body="blue-sky" fit-to-bounds></NounGlasses>

NounGlasses, Render as an IMG instead of SVG

<NounGlasses glasses="grass" bg-color="d5d7e1" render-type="img"></NounGlasses>

NounBody

Use this component to render a noun body

NounBody with background

<NounBody body="blue-sky" bg-color="d5d7e1"></NounBody>

NounBody without background

<NounBody body="blue-sky"></NounBody>

NounBody Fit Bounds

<NounBody body="blue-sky" fit-to-bounds></NounBody>

NounBody, Render as an IMG instead of SVG

<NounBody body="blue-sky" bg-color="d5d7e1" render-type="img"></NounBody>

NounAccessory

Use this component to render a noun accessory

NounAccessory with background

<NounAccessory accessories="bling-anvil" bg-color="d5d7e1"></NounAccessory>

NounAccessory without background

<NounAccessory accessories="bling-anvil"></NounAccessory>

NounAccessory Fit Bounds

<NounAccessory accessories="bling-anvil" fit-to-bounds></NounAccessory>

NounAccessory, Render as an IMG instead of SVG

<NounAccessory
  accessories="bling-anvil"
  bg-color="e1d7d5"
  render-type="img"
></NounAccessory>