Bliss Iconsets

The home of all Bliss icons

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

Table of Contents

• Icons
• Usage
• Contributing
  • Adding a new icon
• Troubleshooting

ℹ️ Icons

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

As it stands, this repository makes a single sprite available for consuming applications, which attaches itself to the application's DOM on initialization. More on that in the Usage section.

Though it is in its initial stages, the proposal is for the concept of iconsets to be explored so that different applications can consume only the icons they need.

At the moment, there is only one iconset which encompasses all available icons, so further breakdowns are up for discussion in a future version.

🚧 Usage

In order to get the icons sprite, you might need to set your yarn or npm config to use your personal access token:

npm:

npm config set @ryter:registry https://gitlab.com/api/v4/projects/18620577/packages/npm/
npm config set '//gitlab.com/api/v4/projects/18620577/packages/npm/:_authToken' "<your_token>"

npm:

yarn config set '//gitlab.example.com/api/v4/projects/18620577/packages/npm/:_authToken' "<your_token>"
yarn config set '//gitlab.example.com/api/v4/packages/npm/:_authToken' "<your_token>"

Then, install the package in the root of your client-facing application:

yarn add @ryter/bliss-iconsets

//or

npm install @ryter/bliss-iconsets

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

import '@ryter/bliss-iconsets/bliss-icons.js';

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

But what's really happening?

This repository holds the original Bliss icons. It is regularly kept up to date as new icons are added or removed, through the build command in the root package.json.

This command will clean up the folder structure, optimize the existing icons, and convert them into a JS file that contains the final sprite. This file also attaches the sprite to the DOM when requested.

As previously mentioned, 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, but we strongly recommend consuming them through the bliss-icon Component

🛠 Contributing

As this a proof of concept, the best way to contribute is to implement and play. We're aiming to find out how to best serve consistent iconography, and want to be as performant as possible about it.

➕ Adding a new Icon

If you would like to add a new icon, run the following:

git clone [email protected]:ryter/bliss/iconsets.git
cd iconsets/
yarn

Then you can add the new icon file to src/icons/original. When you commit (via the command line!), husky will run a pre-commit hook to optimize, rename and rebuild the sprite and icon name list.

You'll need to update the version of the package in the package.json, and we recommend the following:

• If you are updating an icon, this qualifies as a patch version (v.1.0.0 => v1.0.1)
• If you are adding an icon, this qualifies as a minor version (v1.0.0 => v1.1.0)

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

Finally, open an MR with a screenshot of the new icon, or a before and after of a changed icon, with some information about the reasoning behind this change.

🤔 Troubleshooting

We'll fill this section out as we go, but please get in touch with #unit_bliss 🙏✨