# @reverb-ui/icons-react

> Rock Content Design System component kit in React

Latest version **1.3.1** (published 2022-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @reverb-ui/icons-react
pnpm add @reverb-ui/icons-react
yarn add @reverb-ui/icons-react
bun add @reverb-ui/icons-react
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2022-07-29 |
| First published | 2021-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 2 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Team Reverb |
| Maintainers | felipe.oliveira, henriqueweiand, wesleycouto, rock_engineering, nataliacoelho, benitsrock, kelvin.chaves |

## Links

- npm: https://www.npmjs.com/package/@reverb-ui/icons-react
- Repository: https://github.com/rockcontent/rock-ui
- Homepage: https://github.com/rockcontent/rock-ui#readme
- Issues: https://github.com/rockcontent/rock-ui/issues
- npm.io page: https://npm.io/package/@reverb-ui/icons-react

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@reverb-ui/tokens](https://npm.io/package/@reverb-ui/tokens.md) ^2.2.0

## Recent versions

- 1.3.1 (latest) — 2022-07-29
- 1.3.0 — 2022-07-28
- 1.2.0 — 2022-06-10
- 1.1.0 — 2022-06-10
- 1.0.0 — 2021-10-25
- 0.0.0-beta7 — 2021-09-01
- 0.0.0-beta6 — 2021-08-26
- 0.0.0-beta5 — 2021-08-26
- 0.0.0-beta4 — 2021-08-26
- 0.0.0-beta3 — 2021-08-25
- 0.0.0-beta2 — 2021-08-23
- 0.0.0-beta1 — 2021-08-23
- 0.0.0 — 2021-08-23

## README

# 📦 reverb-package-icons-react

`@reverb-ui/icons-react` is a port of `@reverb-ui/icons` for React. It uses `@reverb-ui/icons` as main dependency, and builds React Components with the SVG Icons.

This library is created and maintained by Rock Content and it's Design System Team.

## 📄 Using Reverb in a react project

Just install in your project, no additional dependencies needed;

```bash
yarn add @reverb-ui/icons-react
```

or, with npm:

```bash
npm install @reverb-ui/icons-react
```

Right after installation, you can use the icons in any file:

```typescript
# MyComponent.tsx
import React from 'react'
import { ArrowDown } from '@reverb-ui/icons-react'

const MyComponent = () => <ArrowDown size="lg" variant="solid" color="blue.400" />
```

This will render the `ArrowDown` icon, with it's defaults (`outline` variant with `md` size)


## 🏗️ Getting started in Development

To start development, first retrieve the source code:

### ➕ Familiar with Git?

```bash
git clone ssh://git@gitlab.rockcontent.com:2222/reverb/package/reverb-package-icons-react.git
```

or with HTTPS:

```bash
git clone https://gitlab.rockcontent.com/reverb/package/reverb-package-icons-react.git
```

then

```bash
cd reverb-package-icons-react && npm install
```

### ➖ Not Familiar with Git?

Click [here](https://gitlab.rockcontent.com/reverb/package/reverb-package-react/-/archive/master/reverb-package-icons-react-master.zip) to download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:

```bash
npm install
```

## 👷 Developing

This project uses automated scripts to generate it's icons. Just run:

```bash
npm run build:create-icons
```

This will generate the icons and genante a build.


## 🚨 Linting

Linting is set up through [ESLint](https://eslint.org/) and configured with  [eslint-config-tsdx](https://www.npmjs.com/package/eslint-config-tsdx);

You can modify linting rules by overriding them in the `.eslintrc` file.

```bash
npm run lint
```

or (for for automatic fixing if possible)

```bash
npm run lint:fix
```

## 🚀 Publishing your library to NPM

To release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the repository url in `package.json` file is set to your repository url, then:

```bash
npm run release
```

Or you only need create a new tag and push the new tag to remote repository, the pipeline will do all the hard work here from compiling a new bundle, creating a new storybook build, publishing the new library version to NPM, and publishing the new storybook build to AWS.

According to the `.terraform` configuration;

Example create new tag:

```bash
git tag -a v1.0.1 -m “Release new component”
```

Now let's check if a tag was created and send it to the remote repository:

```bash
git show v1.0.1 && git push origin v1.0.1
```

> Learn more about our git flow, follow [this link](https://wiki.rockcontent.com/doc/gitflow-workflow-pMwl52On0C#h-flow)

## 🎨 Storybook

For custom layouts, styling, controls, addons and more information about the Storybook please refer to [React Storybook](https://storybook.js.org/docs/react/get-started/introduction) documentation.

## 📝 Scripts

- `npm run start` : Only serves the Storybook.
- `npm run build` : Builds your library  (build can be found in `dist` folder).
- `npm run build:storybook` : Builds the static Storybook in case you want to deploy it.
- `npm run test` : Runs the tests.
- `npm run test:coverage`: Runs the test and shows the coverage.
- `npm run test:watch`: Runs the test and watch the files test.
- `npm run lint` : Runs the linter, TypeScript TypeCheck and StyleLint.
- `npm run lint:fix` : Runs the linter, TypeScript TypeCheck and StyleLint and fixes automatic fixable issues.
- `npm run eslint`: Runs only the JavaScript linter.
- `npm run eslint:fix`: Runs only the JavaScript linter and fixes automatic fixable issues.
- `npm run stylelint`: Runs only the style linter.
- `npm run stylelint:fix`: Runs only the style linter and fixes automatic fixable issues.
- `npm run check-types`: Runs typescript type checker.
- `npm run release` : Publishes your Library on NPM or your private Registry (depending on your config in your `.npmrc` file).

## 🏷️ Resources

### Bundler

- [Rollup.js](https://rollupjs.org/guide/en)

### Code Formatter

- [Prettier](https://prettier.io/)

### React Storybook

- [React Storybook](https://storybook.js.org/docs/react/get-started/introduction)

### Testing Components

- [@testing-library](https://testing-library.com/docs/)
- [Jest](https://facebook.github.io/jest/)

### Code Linting

- [ESLint](https://eslint.org/)
- [eslint-config-tsdx](https://www.npmjs.com/package/eslint-config-tsdx)
- [stylelint-prettier](https://github.com/prettier/stylelint-prettier)
- [stylelint-scss](https://github.com/kristerkari/stylelint-scss)

### Code Compiler

- [Babel 7](https://babeljs.io/)
- [Typescript](https://www.typescriptlang.org/)

---
_Source: https://npm.io/package/@reverb-ui/icons-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._