@manychat/icons

ManyChat Icons Pack Generator

Generator import icons as SVG files from a corresponding Figma screen with ManyChat Icons and converts them as ready to use React components.

Generated icons pack is hosted on NPM: https://www.npmjs.com/package/@manychat/icons

Quick Start

Detailed instructions are available in Contribution Guide and Usage Guide

Publishing

1. Install a Figma plugin for publishing a new version: https://www.figma.com/c/plugin/739395588962138807/figma-icon-automation
2. Open ManyChat Icons Figma screen: https://www.figma.com/file/S7TzzdQzTkNTBejt43w2wHwN/MC-Icons
3. Run installed plugin
4. Navigate to the Settings tab:
   • Put https://github.com/manychat/icons into GitHub Repository URL field
   • Value of a Github Token for a corresponding field can be found in Contribution Guide
5. Navigate to the Publish tab:
   • Copy value of current version into The new version field and increment last number of it by one
   • Write what was changed in a new version to What has been changed field
   • Press push to Github button
6. Navigate to https://github.com/manychat/icons/pulls:
   • Open pull request with a new version
   • Press Merge button if you have sufficient permissions to do it or ask someone from @frontend-community in Slack to do it instead

Usage in the app

You can install a specific version of an icons pack by running env version=x.x.x npm run icons:install where x.x.x is the value of a target version. This command will install the corresponding package version, update package.json and package-lock.json and will create Git commit for these changes.

Icon components can be used as:

import { Icon, palettes } from '@manychat/manyui'

const Star = () => <Icon.Star color={palettes.semantic.accent} size={32} />

Visual testing

The latest published version can be viewed in https://design.manychat.com/components/icon

The current icon set can be exported from Figma and previewed locally:

1. Clone this repository and navigate to the cloned directory
2. Run npm ci to install dependencies
3. Get Figma API Token: https://www.figma.com/developers/api#access-tokens
4. Run env FIGMA_TOKEN=your_generated_figma_token npm run export:preview
5. Navigate to http://localhost:10001

To preview icons locally in the app:

1. Clone this repository and navigate to the cloned directory
2. Run npm ci to install dependencies
3. Get Figma API Token: https://www.figma.com/developers/api#access-tokens
4. Run env FIGMA_TOKEN=your_generated_figma_token npm run export:pack
5. Link current directory to global npm scope by running npm link
6. Navigate to an app directory and link global scoped icons directory to an app directory: npm unlink --save @manychat/icons && npm link @manychat/icons
7. Build an app and navigate to http://localhost:8080