OUI Icons
Icons for the Optimizely application and other OUI projects.
View all the icons.
Using the icons
-
Download the package: Run npm install --save oui-icons to include the latest icons in your project.
-
Include the SVG sprite: This package ships with an SVG sprite that contains all of the icons. Include the SVG sprite at the beginning of your website’s <body> tag. The sprite can be referenced with require('oui-icons') if using a project with webpack and an SVG loader. Projects not using webpack can include the sprite by including the icons with your templating engine: ./node_modules/oui-icons/dist/combined/svg-symbols.svg.
-
Using an icon: You can use one of the icons in the HTML with:
<svg>
<use xlink:href="#code-24"></use>
</svg>
The complete list of icons can be found at: link.otimizely.com/oui-icons.
Adding and editing icons
- Add the icon to the appropriate folder in
src/.
- Update the CHANGELOG.md to include information about the change in the “Unreleased” section. Here are some tips:
- Each list item falls under one of the following categories:
Added, Changed, Fixed, or Removed.
- Each item is labeled either
[Patch], [Feature], or Release.
[Patch]: Backwards compatible fixes (patches) to existing icons, infrastructure, or documentation.[Feature]: New icons or features that are backwards compatible.[Release]: Changes that are not backwards compatible such as the removal of an icon.
- Changes should always be added in the “Unreleased” section.
- Create a pull request on GitHub and assign a UI Engineer or Frontend Engineer.
Releasing a new version
Prerequisite
- You must have deploy access to design.optimizely.com and be listed as a contributor on the
oui-icons NPM package. Contact a UI Engineer for help.
- You must be using a version of NPM larger than
2.11.0. This is when NPM added support for the postversion hook that we rely on. You can check your version by running npm -v in the command line.
How to release
- Run
git checkout master && git pull.
- Open the
CHANGELOG.md, update to reflect the new version, and commit the change. Here are some tips:
- The new version number depends on the severity of the changes in the version that is being released. Here are examples:
[Release] – 1.2.3 would become 2.0.0.[Feature] – 1.2.3 would become 1.3.0.[Patch] – 1.2.3 would become 1.2.4.
- The commit should include the
CHANGELOG.md update. The message could be: “Prep for 3.1.3 release.”
- Do not update the
package.json in this step.
- There should be nothing left in the “Unreleased” section.
- Run the command that matches the highest severity change in this release:
npm version patch - version includes a backwards-compatible bug fix or tweak. This includes small icon style modifications.npm version minor - version includes a backwards compatible new "feature" such as a new icon.npm version major - version contains a non-backwards compatible breaking change such as a renamed or deleted icon.
