@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

• Install a Figma plugin for publishing a new version: https://www.figma.com/c/plugin/739395588962138807/figma-icon-automation
• Open ManyChat Icons Figma screen: https://www.figma.com/file/S7TzzdQzTkNTBejt43w2wHwN/MC-Icons
• Run installed plugin
• 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
• 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
• 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:

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

To preview icons locally in the app:

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