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.

Adding a new icon to the library

1. Add the SVG file - Place the SVG file for the new icon in the appropriate folder under the source directory. For example:

   • icons/ for normal icons
   • logos/ for product logos
   • typefaceLogos/ for product typeface logos
   • appIcons/ for app icons
   • misc/ for miscellaneous icons
   • elements/ for elements

2. Name the file appropriately - Use PascalCase for the file name (e.g., NewIcon.svg).

3. Verify the icon - Run the yarn start command to verify the React component for the new icon:

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";

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. |

Misc icons

import { Windows } from "@bigbinary/neeto-icons/misc";
<Windows  size={36} />

import { Razorpay } from "@bigbinary/neeto-icons/misc";
<Razorpay  width={100}  height={32} />
<Razorpay  width={100}  />

Props

| Name | Type | Default | Description | | :-------- | :------------- | :----------- | :------------------------------------------------------------ | | size | string, number | 24 | Value supplied to height and width attributes of SVG element. | | height | string, number | - | Value supplied to height attribute of SVG element. | | width | string, number | - | Value supplied to width attribute 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. |

Elements

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

Anywhere in your React file

<Keyboard height={80} width={41} />

| Name | Type | Default | Description | | :-------- | :------------- | :------ | :------------------------------------------------- | | height | string, number | 26 | Value supplied to height attribute of SVG element. | | width | string, number | 80 | 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.