Skip to content

Latest commit

 

History

History
131 lines (91 loc) · 4.5 KB

README.md

File metadata and controls

131 lines (91 loc) · 4.5 KB
Raw

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

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

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

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.