suade-icons

Suade Icons

A package that has a selection of different icons that Suade uses in its products

Using Suade Icons in a project

You can access two resources from this package, a CSS file that contains all the css styles, including the icon font declaration, and a JS array containing all the possible options you can use

Inserting the CSS into your project

If using a build tool like webpack, you can insert the css reference into your JS like this:

import 'suade-icons';

Accessing the JS array of icons

You can access a JS array of icons by using the following code:

import suadeIcons from 'suade-icons/dist';

Currently, the js file is not complied, so if you are running something like Jest on your product, you will need to get Jest to compile this package within your node modules. Adding something like this to your Jest config will do the trick:

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!suade-icons)"
    ]
  }
}

Contributing to Suade Icons

If you want to add to Suade Icons, you can use Icomoon's online app to edit. To start editing, upload the selection.json file in the src folder. While Icomoon keeps your last edit icon set, it is recommended to re-upload each session of icon editing, as other people can change and add to this repo.

Some tips and rules when it comes to editing icons

• An icon can have multiple names, and can be comma separated.
• Each name must not have spaces in a single name, and instead must have a dash (-) instead
• Names should not end in a number. This helps avoid having situations like arrow1 and arrow2, and the developer or designer does not know which one to use.
• Names should describe the icon, not the icon's purpose.
• Icons should not have colour attached to them. This is so colors are easily set in the product.

Once you have finished updating, download the zip folder that Icomoon provides. You can them empty this into the src folder, overriding everything that is there. Then, commit the changes and push the repo.

A CI pipeline will check everything is as it should. Some these rules are set as tests in the deployment pipeline, so a pipeline may fail if these rules are not followed.

Once the main/master pipeline is complete, it will publish the new icons.