react-oui-icons

    3.1.0 • Public • Published

    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

    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:

      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

    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 and Release a new version of react-oui-icons)
    4. 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:
    5. Create a new release of OUI
    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

    ⚠️ 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:

      ## 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:
      • Select the new tag version
      • Leave “Release title” blank
      • Paste in “Unreleased” latest additions from the CHANGELOG.md release notes

    Install

    npm i react-oui-icons

    DownloadsWeekly Downloads

    325

    Version

    3.1.0

    License

    ISC

    Unpacked Size

    451 kB

    Total Files

    124

    Last publish

    Collaborators

    • optimizely-eng