@benepass/icons package

Icons library supported for mobile and web. NPM Package

Setup

# Install all dependencies
> bun install
# Generate icons
> bun run --filter @benepass/icons generate

Installation

Install the package from npm:

> yarn add @benepass/icons

Note: for web since we're using a monorepo you can use this directly importing from source code

Using react Native

For react-native there's some extra steps you'll need to follow:

• Add @benepass/icons fonts folder

"assets": ["./path/to/lib/assets/fonts/"]

# Example
"assets": ["./node_modules/@benepass/icons/assets/fonts/"]

• Link new benepass-font-icon font family

> npx react-native link # or just react-native link

Usage

For Mobile and Web the library will work, since react-native doesn't render SVG directly, there's a file (Icon.native.js) that will help and will render it.

:warning: Warning The import will change once we've the build process (now we're installing it directly from the source code, but in a future a "dist" folder will exist or something similar so the import will change.

From NPM

import { ArrowLeft } from '@benepass/icons'

const BestComponent = () => (
  <div>
	<ArrowLeft color="red" size="200px" />
  </div>
)

From workspace

import { ArrowLeft } from 'icons/src/components/Icon'

const BestComponent = () => (
  <div>
	<ArrowLeft color="red" size="200px" />
  </div>
)

Generate

Inside the scripts folder the generate-system.mjs file is the one in charge of generating the icons system this will generate everything for Mobile and Web.

To execute that file you can just run:

> bun run --filter @benepass/icons generate

This will map every icon inside the /assets/icons folder and create the font family for mobile and the icons-map file for web.

Publish

To publish a new version of the NPM package there's a github action that will run on a new tag creation if the new tag has this format: [email protected] (example: [email protected]). Don't forget to update the package.json version to match the new version before deploying, otherwise the script will break.

Design-Development

The main idea of this icon system is to have a single source of truth for both platforms (web and mobile) and to reduce design-development gap.

Flow

1. Design Team publish new version on Figma
2. Development Team export SVG from Figma
3. Development Team upload SVGs into /assets folder
4. New release on Github
5. Upgrade @benepass/icons package on client

To Do

• [ ] Create build script
  • [ ] Update github action
  • [ ] Update documentation
  • [ ] Import from build folder
• [ ] Separate generate scripts (for mobile and web)
  • [ ] Create separated scripts