@manychat/icons

ManyChat Icons bundle

Usage no npm install needed!

<script type="module">
  import manychatIcons from 'https://cdn.skypack.dev/@manychat/icons';
</script>

README

ManyChat Icons Pack Generator Build Status

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