The neetoIcons and neetoIconsRN library are a collection of SVG React component icons that drives the experience in the neeto products built at BigBinary.
Web:
yarn add @bigbinary/neeto-iconsReact Native:
yarn add @bigbinary/neeto-icons-rnCheck the Frontend package development guide for step-by-step instructions to develop the frontend package.
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} />import { Neeto } from "@bigbinary/neeto-icons/logos";import { NeetoSite } from "@bigbinary/neeto-icons/app-icons";import { Google } from "@bigbinary/neeto-icons/misc";| 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. |
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. |
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.
Consult the building and releasing packages guide for details on how to publish.