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)

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>;