# react-oui-icons

> Icons for the Optimizely application and other OUI projects.

Latest version **3.1.0** (published 2021-04-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-oui-icons
pnpm add react-oui-icons
yarn add react-oui-icons
bun add react-oui-icons
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2021-04-13 |
| First published | 2017-07-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 440.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Iñaki Aranzadi |
| Maintainers | optimizely-eng |
| Keywords | oui, icons, components, optimizely, react, ui |

## Links

- npm: https://www.npmjs.com/package/react-oui-icons
- Repository: https://github.com/optimizely/react-oui-icons
- Homepage: https://github.com/optimizely/react-oui-icons#readme
- Issues: https://github.com/optimizely/react-oui-icons/issues
- npm.io page: https://npm.io/package/react-oui-icons

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2021-04-13
- 3.0.1 — 2021-02-17
- 3.0.0 — 2021-02-04
- 2.12.0 — 2020-10-28
- 2.11.4 — 2020-09-25
- 2.11.3 — 2020-09-02
- 2.11.2 — 2020-09-01
- 2.11.1 — 2020-08-28
- 2.10.0 — 2020-08-04
- 2.11.0 — 2020-08-04
- 2.9.0 — 2020-05-19
- 2.8.1 — 2020-04-24
- 2.8.0 — 2020-04-23
- 2.7.0 — 2019-10-23
- 2.6.1 — 2019-07-16
- … 33 more at https://npm.io/package/react-oui-icons/versions

## README

# React OUI Icons

Icons for the Optimizely application and other OUI projects.

## Implementation

This implementation consists of a Icon React Component that will generate an inline SVG icon using the data associated with the name of the icon. Any attributes will be passed as props.

[View all the icons](http://optimizely.github.io/oui/storybook/?path=/story/icons--everything).

## Using the icons

1. **Download the package:** Run `yarn add react-oui-icons` to include the latest icons in your project.

2. **Using an icon:** You can use one of the icons in the HTML with:

    ```javascript
    import Icon from 'react-oui-icons';

    ...

    <Icon
      name="search"
      description="search"
      size="medium"
      fill="black"
    />

    ...
    ```

[View all the icons](http://optimizely.github.io/oui/storybook/?path=/story/icons--everything).

## Storybook
`react-oui-icons` uses [Storybook](https://storybook.js.org/)! You can view all of the icons through the Storybook interface by running:

```sh
yarn run storybook
```

It will start a local webserver served at `http://localhost:6006/`.

## Adding and editing icons

1. Add icons to `assets/svgs/` and `src/Icon/icons`.
2. Run `yarn svgson` to update the icon internal data file in `src/Icon/icons.json`.
    - If this command is failing, try running `yarn install` first.
3. Create a new release of `react-oui-icons` (see [Pre-Release](https://github.com/optimizely/react-oui-icons#warning-pre-release) and [Release a new version of react-oui-icons](https://github.com/optimizely/react-oui-icons#release-new-version-of-react-oui-icons))
4. Update version of `react-oui-icons` in Optimizely [OUI](https://github.com/optimizely/oui)'s `package.json` to the latest
    - Run `yarn upgrade react-oui-icons@99.xx.xx` in OUI
    - Copy the contents of react-oui-icons's `src/Icon/icons.json`  to OUI's `src/stories/icons.json`
    - Add a line to the Changelog, something like:
        - [Patch] Update react-oui-icons version to xx.xx.xx ([PR #](https://github.com/optimizely/oui/pull/PR #))
5. Create a [new release of OUI](https://github.com/optimizely/oui/blob/devel/CONTRIBUTING.md)
6. Bump the OUI version number in Optimizely's package.json
    - Run `yarn upgrade optimizely-oui@99.xx.xx` in `src/www/frontend`

## Test in Optimizely.git

1. `cd ~/react-oui-icons`
2. `yarn link`
3. `cd ~/optimizely`
4. `yarn link react-oui-icons`
5. Use `?use_local_bundle=true` to test your icon changes before releasing with confidence

## :warning: Pre-Release

Don't forget these before you create a release:

1. Add a new header to `CHANGELOG.md` under “Unreleased” with the [new version number](https://medium.com/design-optimizely/how-to-version-your-ui-library-1c7a1b7ee23a):

    ```md
    ## Unreleased

    ## 2.0.0 - 2018-04-13
    - [Release] Added a cool breaking change. (#999)
    ```
2. Commit to master: `git add . && git commit -a -m 'Prep for new release version x.y.z'`

## Release new version of react-oui-icons

1. `yarn release patch` or `yarn release minor` or `yarn release major`
2. [Create a new release on GitHub](https://github.com/optimizely/react-oui-icons/releases/new):
    * Select the new tag version
    * Leave “Release title” blank
    * Paste in “Unreleased” latest additions from the `CHANGELOG.md` release notes

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