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.

Using the icons

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

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

import Icon from 'react-oui-icons';

...

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

...

View all the icons.

Storybook

react-oui-icons uses Storybook! You can view all of the icons through the Storybook interface by running:

yarn run storybook

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

Adding and editing icons

Add icons to assets/svgs/ and src/Icon/icons.
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.
Create a new release of react-oui-icons (see Pre-Release and Release a new version of react-oui-icons)
Update version of react-oui-icons in 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 #))
Create a new release of OUI
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

cd ~/react-oui-icons
yarn link
cd ~/optimizely
yarn link react-oui-icons
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:

Add a new header to CHANGELOG.md under “Unreleased” with the new version number:

## Unreleased

## 2.0.0 - 2018-04-13
- [Release] Added a cool breaking change. (#999)

Commit to master: git add . && git commit -a -m 'Prep for new release version x.y.z'

Release new version of react-oui-icons

yarn release patch or yarn release minor or yarn release major
Create a new release on GitHub:
- Select the new tag version
- Leave “Release title” blank
- Paste in “Unreleased” latest additions from the CHANGELOG.md release notes

Current Tags

3.1.0 ... latest (5 years ago)