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

@loadsmart/icons

v0.110.0

Published

Icons by Loadsmart

Downloads

567

Readme

CircleCI npm version bundlephobia

Table of Contents

About The Project

A library for using icons at Loadsmart.

Usage

You can get it via yarn.

yarn add @loadsmart/icons

Examples

Basic usage

You can use Loadsmart icons in your React projects as simple as this:

import { IconAccessorialAirport } from "@loadsmart/icons";

class App extends React.Component {
    render() {
        return <div> This is an <IconAccessorialAirport /></div>
    }
}

Typescript usage

TBD

Contributing

Icons Library

  1. Clone the project
  2. Create a new branch based off of master
  3. Make all the changes needed
  4. Run this to build the necessary .js files
    yarn prepublish
  5. Commit all the changes to your new branch
  6. Make sure you also log the changes under the Unreleased section of the CHANGELOG.md and commit it
  7. Open a PR to merge on master

Deployment and Publishing process to NPM

The release of loadsmart icons is based on tag

:relaxed: we use Rollbot for release. It will generate a release by bumping the version on the CHANGELOG.md and creating a new tag.

Steps to make a release via Rollbot:

  1. As Rollbot won’t update the version in package.json , so we still need to bump the version manually
$ yarn bump

It will ask you to put the specific release version, please follow our tag pattern /^\d+\.\d+\.\d+$/ (x.xx.x)

  1. Commit the change in package.json and create a pr [Release] x.xxx.x, once it merges:

  2. Using the /release command in #eng-frontend channel, /release @loadsmart/icons major or /release @loadsmart/icons minor or /release @loadsmart/icons patch

  3. If Rollbot creates the tag successfully, it will send a message saying “tag x.xxx.x created”

  4. Please check CircleCI if all checks of deploy pass, then publish the release in GitHub :beers:

:shipit:If Rollbot doesn't work, please follow these steps as an alternative:

  1. Checkout a new branch from the latest master branch (Usually named as: release/x.xx.x)
  2. Update CHANGELOG.md (follow version pattern /^\d+\.\d+\.\d+$/ - x.xx.x)
  3. Bump the version using the command below:
$ yarn bump

It will ask you to put the specific release version, please follow our tag pattern /^\d+\.\d+\.\d+$/ (x.xx.x)

  1. git add the updated package.json and CHANGELOG.md files and commit the changes with a message following the standard:

[Release] x.xx.x

This commit message is necessary for our bot to automatically approve and merge the release PR. Please note the brackets enclosing the word "Release" and keep the version in the same pattern used elsewhere.

  1. Push your branch to origin and open a PR to master (With the same title as your commit: [Release] x.xx.x)

:+1: When the CI passes :white_check_mark:, it will automatically merge your PR into master.

  1. Checkout master locally again and pull latest changes

  2. Create a tag, please follow our tag pattern /^\d+\.\d+\.\d+$/ (x.xx.x)

$ git tag <new_tag>
  1. Push the tag.
$ git push origin <new_tag>

The Circle CI workflows can be checked here

Circle CI will start a deploy to production :rocket:

  1. :memo: Create a new release in GitHub referencing the tag you just created:

GitHub Release example

For release title, follow the exact same pattern used in the tag version, and for description you can simply insert the respective CHANGELOG.md section.

This last step is what triggers some automated side-effects such as the slackbot that broadcasts new production releases along with their changelog, so don't skip it!

Then you are all set :balloon:

Tip: Always keep semver in mind.

Demo Deployment

  • Once a new versions is published on NPM, circleci will deploy the new demo page to Github Pages, thus making it available on https://loadsmart.github.io/icons-showcase/#/.

Development

Setup the project

Before starting, keep this in mind about our branches:

  • master is where the library code resides, all the icons SVG and JS files are here. Code enters here through PRs.

To get a local copy up and running follow these simple steps.

  1. Install Yarn:

    $ brew install yarn
  2. Clone the project:

    $ git clone [email protected]:loadsmart/icons.git
  3. Install local dependencies:

    $ yarn

Adding a new icon

  1. Add your SVG to /src/assets/icons.

    $ grunt server
  2. Clean up your SVG file, a good example you can see below.

    <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
    	<path
    		d="M19.8 19.8V3h8.4v16.8H45v8.4H28.2V45h-8.4V28.2H3v-8.4h16.8z" 			fill="currentColor"
    		fill-rule="evenodd"/>
    </svg>
  • Make sure that you are using fill="currentColor".
  • Remove all references to width and height in your SVG file
  1. Run $ yarn generate

This command will create a React component for your SVG file, and also will include this component to the library.

  1. Submit a pull request