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.
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" /> ...
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/
andsrc/Icon/icons
. - Run
yarn svgson
to update the icon internal data file insrc/Icon/icons.json
.- If this command is failing, try running
yarn install
first.
- If this command is failing, try running
- 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'spackage.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'ssrc/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 #))
- Run
- Create a new release of OUI
- Bump the OUI version number in Optimizely's package.json
- Run
yarn upgrade optimizely-oui@99.xx.xx
insrc/www/frontend
- Run
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
⚠️ 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
oryarn release minor
oryarn 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