onehub-icons

SVGs are automatically converted to TSX using svgr

Adding/Updating icons

• Add or update the svg in src/svgs
• Make sure it has fill="currentColor or stroke="currentColor"
• Make sure it has a viewBox (width, height will be removed)
• If the icon is directional (it points left or right, such as an arrow, chevron or log-out icon), add data-bfx-rtl="flip" to the root <svg> so it mirrors in RTL. See RTL support.

Versioning

Use semantic versioning:

• major version when you make incompatible API changes
• minor version when you add functionality in a backwards-compatible manner
• patch version when you make backwards-compatible bug fixes

All latest version deployments are handled by semantic-release which is triggered in CircleCI's main pipeline. semantic-release will look at your commit message and determine how to increment the version based on its format. See here for more details on how this works. commitlint hook is used to ensure your commit message is correct before pushing.

To summarise:

• feat is a minor version bump
• fix is a patch version bump
• perf is a patch version bump
• commit with ! after the type (or scope) is a major version bump. Eg: feat!: add image or feat(new)!: add image
• all other types do not cause any version bump

*This is fully customizable so can be updated to better suit our needs if required

When the pull request is merged to main, the CircleCI main workflow runs which will perform all of the necessary npm publishing and git tagging, along with creating a Github release containing release notes.

Beta deployments

All pull requests will deploy a beta version as part of the PR pipeline. This allows for easy testing without having to merge your PR. The version deployed will be {CURRENT_MAJOR_VERSION}.0.0-PR${PULL_REQUEST_NUMBER}-BN${BUILD_NUM}. For example: 7.0.0-PR100-BN150

Check the version your branch is using

We do not keep track of the current version in package.json due to it not being necessary (Why isn't it necessary?). However, to print out the package version your branch is using, run npm run check-version

Usage

Install via npm:

pnpm install --save @benefex/icons

Import icons:

You can pass an optional title prop - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

import { IconName } from '@benefex/icons';
import { Icon } from '@benefex/components';

<Icon svg={IconName} title="Icon Label" />;

Animated icons

Import the animation stylesheet once, then add bfx-icon--animated to a parent of a supported icon. Currently, the sparkles and upload icons support animation.

import '@benefex/icons/animations.css';
import { SparklesLight } from '@benefex/icons';

<span className="bfx-icon--animated">
  <SparklesLight aria-hidden="true" />
</span>;

RTL support

Directional icons mirror in right-to-left contexts. Import the RTL stylesheet once and they flip whenever they sit inside an element with dir="rtl" (or direction: rtl):

import '@benefex/icons/rtl.css';
import { ArrowRightLight } from '@benefex/icons';

<div dir="rtl">
  <ArrowRightLight aria-hidden="true" />
</div>;

Nothing flips unless the stylesheet is imported.

To opt out for an icon that means a physical direction (for example a map or compass arrow), wrap it in an element with dir="ltr". The icon follows its nearest dir, so only that icon is affected:

<span dir="ltr">
  <ArrowRightLight aria-hidden="true" />
</span>

If you can't add a wrapper, add bfx-icon--rtl-fixed to the icon or any of its parents instead:

<ArrowRightLight className="bfx-icon--rtl-fixed" aria-hidden="true" />

Marking an icon as RTL

Add data-bfx-rtl="flip" to the root <svg> in src/svgs. Only do this when a mirrored copy is the correct RTL icon, i.e. the artwork is a plain mirror image. Don't add it to icons with text, logos, or symbols that read the same way in every language.

The attribute passes through the generator unchanged. Check the result in the Icons/RTL Storybook story.