neetoIcons

The neetoIcons and neetoIconsRN library are a collection of SVG React component icons that drives the experience in the neeto products built at BigBinary.

Contents

• Installation
• Usage
• How it works
• Instructions for publishing

Installation

Web:

yarn add @bigbinary/neeto-icons

React Native:

yarn add @bigbinary/neeto-icons-rn

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Usage

Web:

import { Clock } from "@bigbinary/neeto-icons";

React Native:

import { Clock } from "@bigbinary/neeto-icons-rn";

Anywhere in your React file

<Clock color="#1e1e20" size={24} />

Product logos

import { Neeto } from "@bigbinary/neeto-icons/logos";

App icons

import { NeetoSite } from "@bigbinary/neeto-icons/app-icons";

Misc icons

import { Google } from "@bigbinary/neeto-icons/misc";

Props

| Name | Type | Default | Description | | :-------- | :------------- | :----------- | :------------------------------------------------------------ | | color | string | currentColor | CSS color value for the icon. | | size | string, number | 24 | Value supplied to height and width attributes of SVG element. | | className | string | | Classes supplied to the SVG element. |

Typeface logos

import { Neeto } from "@bigbinary/neeto-icons/typeface-logos";

Anywhere in your React file

<Neeto height={24} width={48} />

| Name | Type | Default | Description | | :-------- | :------------- | :------ | :------------------------------------------------- | | height | string, number | 20 | Value supplied to height attribute of SVG element. | | width | string, number | 100% | Value supplied to width attribute of SVG element. | | className | string | | Classes supplied to the SVG element. |

How it works

• We use a custom rollup plugin (which can be found in build/index.mjs) to take all the .svg files from the source folder and convert them to React components that render the respective SVG icon.

• The plugin accepts a configuration object as an argument which can contain the following keys:

  | Name | Type | Description | | ----------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------ | | options | object | Options passed to the transform function from react-svgr. (See full opions list) | | additionTransformations | function | Additional string transformation that can be applied to the generated React code. | | source | string | Path to the folder where the SVG files are located | | destination | string | Path to the folder to place the generated react code |

• For each icon, a React icon file will be generated in generate/icons folder.

• From there babel through rollup takes the wheel and generates the bundles.

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.