README

Bliss Iconsets Toolkit

This repository exists as a single source of truth for Bliss icons, from a design and a development perspective.

The current iconset is composed of all available icons, meaning they will all be attached as <symbol>s within an <svg>. This means that they will be available to any part of the application code that interacts with that application's DOM.

You can find all of the icons in the Bliss Iconset Documentation.

⚠️ This is NOT a component, this the definitive collection of icons designed for BRYTER, and as such should be the source of truth regarding the latest icons available for use according to Figma designs. There is an icon component that has been created to consume these icons individually.

Installation
Usage
Contributing
Troubleshooting

📦 Installation

⚠️ To consume these icons, you'll need to use the icon component. You can find the installation and usage instructions here.

In order to get the icons sprite, install the package in the root of your client-facing application:

yarn add @bliss-design-system/iconsets

🏎 Usage

Within your application's client-facing entry file, you can request the sprite like this:

import { blissIconsetsAppendSprite } from '@bliss-design-system/iconsets';

blissIconsetsAppendSprite();

So when your app launches, the sprite will attach itself.

If you need a list of icon names, you can also access an array of them by requesting:

import { blissIconNames } from '@bliss-design-system/iconsets';

🫕 Contributing

If you'd like to contribute, please open an issue with your suggested change. This issue will automatically be added to the Bliss Proposal Board. Once that is accepted, either the Bliss team will work on it or you can make changes locally.

If you would like to contribute, run the following:

# Clone and move into this repository
git clone https://gitlab.com/bliss-design-system/iconsets.git
cd iconsets

# Install the dependencies
yarn

Then you can add or update the icon file in src/icons/original.

Reporting a bug

Notice something off? Please open an issue using our Bug Report template and fill in as many details as possible.

Committing

We follow the Conventional Commits specification, meaning that you'll be prompted to fill out a descriptive message when you commit. We also use these commits to manage our releases, so we appreciate details.

As a guideline for this toolkit, we recommend the following:

If you are updating the contents of an icon, this qualifies as a patch version (fix)
If you are adding an icon, this qualifies as a minor version (feat)

⚠️ If you are removing or renaming an icon, please speak with the Bliss team, as this will qualify as a major version and involves a breaking change.

Opening a merge request

When you're ready to open a merge request, please include a screenshot of the new icon, or a before and after of a changed icon, with some information about the reasoning behind this change.

The team will be notified, but it helps to post your merge request in #bliss_support.

🙃 Troubleshooting

We'll fill this section out as we go and as issues are raised. But if you haven't found what you're looking for, get in touch via bliss@bryter.io or via the #bliss_support Slack channel ✨.

Usage no npm install needed!