@arena-im/icons

📦 Package: @arena-im/icons

The @arena-im/icons is npm package used to provide icons for arena applications.

This project get figma resources and download only svg files to transform in react components.

What is area?

Arena is a market-leading communication platform for communities to engage and connect in a digital world. Businesses of every size—from new startups to public companies—use our software to connect in a group conversation, direct messages and engage with each other. You can read more about us here.

This package built in Typescript and uses Node.js 18 runtime with babel to tranform svg to react components.

🔍 Requirements

This repository uses:

Dependencies	Description	Docs
	Javascript Runtime	📚

🔨 Project setup

1. To clone repository you need to have git installed:

git clone [e-mail]:stationfy/arena-icons.git

2. To install dependencies you need to have NodeJS installed:

npm install

3. To build you need to have NodeJS installed:

npm run build:scripts

This will transform typescript files to javascript.

4. Declare necessary environments:

To Unix:

set FIGMA_TOKEN_1="<YOU CAN GET TOKEN FOLLOWING THE LINK BELLOW>"

To windows:

$Env:FIGMA_TOKEN_1="<YOU CAN GET TOKEN FOLLOWING THE LINK BELLOW>"

To get figma token read this documentaion

▶️ Run project

1. (optional) You can run build scripts to transpile .ts files to .js in watch mode files to this you need to have NodeJS installed and runned 🔨 Project setup:

npm run build:scripts -- --watch

Now when you update .ts files you dont need run build again.

2. To get icons you need to have NodeJS installed and runned 🔨 Project setup or using **watch mode**:

npm run import:icons

This command will get svg files and put to ./icons folder

3. To optimize icons you need to have NodeJS installed and executed **get icons**:

npm run optimize

This command will clear ./optimized folder and will optimize icons from ./icons folder.

⬆️ Publish

1. To to publish you need to have executed 🔨 Project setup and ▶️ Run project:

npm run release

This command will be create a basic resources to save your stack learn more here

🪄 Adding or Updating icons

To add new icons you need only run an action on_dispatch in this repository you can find it using this link:

⚠️ Remember always run using the main branch

1. You will need choose what kind of change it will be for example major (X.0.0), minor (0.X.0), or patch (0.0.X)

⚠️ Remember: use semantic version to choose it.

2. And you need pass you personal figma token as input. You can find it here:

It will build and generate a new packge version at npm.

To update an icon

Is just make a commit deleting the icon and run the pipeline again.

⚠️ Remember: when you do it, the version should be an major.

📂 Software

This project contains all code for all archeteture, at the following folders:

• ./scripts has logic code with necessary scripts to get icons and transform into react components
• ./icons has icons as svg files

💪 Dev Team

This project exists thanks to all these people.