VTEX Phosphor Icons

Reach us on #admin-ui channel on Slack | Tag us with @dev-team-admin on Slack

Icons library based on phosphor-icons React library.

Usage

1yarn add @vtex/phosphor-icons

Development

1. Clone the repository.
2. Install the project dependencies by running yarn
3. Generate the icons by running yarn generate

Add/edit or remove an icon.

All of the vtex.phosphor-icons are auto-generated so, every time you want to change some asset of the library you must change directly under the /assets folder. Be careful to maintain the same code style.

Add/edit or remove functionalities.

If you want to add a behavioral change to the project, you probably will need to apply changes to a file under the /lib folder or under the /bin folder.

The /lib is where you find everything related to the "IconBase" used to generate the icons.

The /bin is where you find everything related to the script that generates the React files.

Generating icons

Every time you make changes to the /bin or the /assets folder, you must generate the icons. To this, you must run yarn generate

Checking your changes live.

We use Storybook as a canvas to check the changes applied. To do this, you only need to run yarn storybook

Publishing new version

To make a publish/release, you must follow these steps:

1. Run yarn generate to generate the icons with the latest version of your local changes.
2. Run yarn build.
3. Run yarn standard-version -- --release-as minor whether is a minor or yarn standard-version -- --release-as patch whether is a patch.

Why forking Phosphor repository?

Forking the original repository allows us to start to build our icons lib on top of the existing ones. It also gives us the flexibility to add/remove or edit anything we want on the codebase.