npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vtex/phosphor-icons

v0.2.8

Published

<p align="center"> <img alt="VTEX Logo" src="./docs/assets/vtex-logo.svg" height="100" width="117" /> <h3 align="center">VTEX Phosphor Icons</h3> <p align="center">Reach us on #admin-ui channel on Slack | Tag us with @dev-team-admin on Slack</p> </p

Downloads

5,757

Readme

Icons library based on phosphor-icons React library.

Usage

yarn 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.