npm package: @loadsmart/icons
Description: Icons by Loadsmart
Author: Loadsmart Inc.
Latest version: 0.110.0


[![CircleCI](https://circleci.com/gh/loadsmart/icons/tree/master.svg?style=svg&circle-token=ee196db723087dec52b8ae00ba6f9545fd8fd6fa)](https://circleci.com/gh/loadsmart/icons/tree/master)
[![npm version](https://badge.fury.io/js/%40loadsmart%2Ficons.svg)](https://www.npmjs.com/package/@loadsmart/icons)
![bundlephobia](https://img.shields.io/bundlephobia/min/@loadsmart/icons)

<br />
<p align="center">
  <a href="https://github.com/loadsmart/icons">
    <img src="https://user-images.githubusercontent.com/381179/75585389-00707c00-5a40-11ea-96f6-8e83e9f3523e.png">
  </a>

  <p align="center">
    <a href="https://loadsmart.github.io/icons-showcase/#/">View Demo</a>
    ·
    <a href="https://github.com/loadsmart/icons/issues">Report Bug</a>
    ·
    <a href="https://github.com/loadsmart/icons/issues">Request Feature</a>
  </p>
</p>



<!-- TABLE OF CONTENTS -->
## Table of Contents

- [Table of Contents](#table-of-contents)
- [About The Project](#about-the-project)
- [Usage](#usage)
- [Examples](#examples)
  - [Basic usage](#basic-usage)
  - [Typescript usage](#typescript-usage)
- [Contributing](#contributing)
  - [Icons Library](#icons-library)
- [Deployment and Publishing process to NPM](#deployment-and-publishing-process-to-npm)
  - [Demo Deployment](#demo-deployment)
- [Development](#development)
  - [Setup the project](#setup-the-project)
  - [Adding a new icon](#adding-a-new-icon)



<!-- ABOUT THE PROJECT -->
## About The Project

>A library for using icons at Loadsmart.


<!-- USAGE -->
## 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:


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

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

### Typescript usage

TBD


<!-- CONTRIBUTING -->
## 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
    ```sh
    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](https://github.com/loadsmart/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
```bash
$ yarn bump
```
It will ask you to put the specific release version, please follow our tag pattern ` /^\d+\.\d+\.\d+$/` (x.xx.x)  
  
2. Commit the change in `package.json` and create a pr `[Release] x.xxx.x`, once it merges:  
  
3. Using the `/release` command in #eng-frontend channel, `/release @loadsmart/icons major` or `/release @loadsmart/icons minor` or `/release @loadsmart/icons patch`  
  
4. If Rollbot creates the tag successfully, it will send a message saying “tag x.xxx.x created”  
  
5. 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:

```bash
$ yarn bump
```

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

4. `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.

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

6. Checkout master locally again and pull latest changes

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

```bash
$ git tag <new_tag>
```

8. Push the tag.

```bash
$ git push origin <new_tag>
```
The Circle CI workflows can be checked [here](https://circleci.com/gh/loadsmart/workflows/icons)

Circle CI will start a deploy to production :rocket:

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

![GitHub Release example](https://i.imgur.com/Tnoduom.jpg "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](https://semver.org/) 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](https://yarnpkg.com/lang/en/docs/install/#mac-stable):

    ```sh
    $ brew install yarn
    ```

2. Clone the project:

    ```sh
    $ git clone git@github.com:loadsmart/icons.git
    ```

2. Install local dependencies:

    ```sh
    $ yarn
    ```

### Adding a new icon


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

    ```sh
    $ grunt server
    ```

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

    ```sh
    <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

3. Run `$ yarn generate`
> This command will create a React component for your SVG file, and also will include this component to the library.

4. Submit a pull request