Discover Unified Icons

Unified UI is a set of UI components that implement our unified in Discover design.

Preview: https://clarabridgeinc.github.io/unified-icons/

Installation

This package is only available in Qualtrics Jfrog Artifactory. Unified Icons can be installed as an npm package:

$ npm i @discover/unified-icons

Basic usage

import '@discover/unified-icons';

<span class="q-icon q-icon-alarm" aria-hidden="true" />

Preview icons

• Clone the repository (or pull the latest version)
• Install dependencies using $ npm install
• Build files using $ npm run build
• Open index.html in your browser

Contributing

1. Create a feature branch
2. Add your .svg files to the svg/original directory. For example from cfe/ui.
3. Run npm run build to compress and build the font
4. Copy the newly generated icons in ./src/codepoints.json to ./fantasticonrc.js. This ensures that all glyphs use the same unicode character on future builds. Studio in some cases uses the font icon unicode character and this breaks those icons in studio.
5. Make a MR for your commit
6. Get a coffee and wait for reviews

How to make a release

Studio can only consume this from npm as of 9/23/2024. In order for studio to use the icons, it needs to be published to npm.

This repo is hosted is gitlab and the package is hosted in Jfrog Artifactory. In order to publish a new version, detailed instructions can be found here.

A brief summary of the instructions are as follows:

1. Connect to VPN.
2. run npm config set registry https://artifactory.eng.qops.net/artifactory/api/npm/npm-virtual/ This will set the default registry for your machine to be Qualtrics Artifactory. For npm installs, it would first look in the Artifactory and then look at public npm registry as a fallback.
3. Log in to the registry with npm login --registry https://artifactory.eng.qops.net/artifactory/api/npm/npm-local. Username(developer) and password are from One Password.
4. Make your changes, commit them, upgrade package locally. Confirm that the artifacts generated look correct with npm publish --dry-run
5. Finally, publish using npm publish.
6. Check artifactory (under npm-local) to verify that the package has been published.

Fixing icons with incorrectly filled-in paths

When adding sentiment icons, we discovered a bug in the svgs -> fonts are conversion process. The issue, we think is from a dependency of the svg > font conversion library ((MR with links)[https://gitlab-app.eng.qops.net/xm-discover/discover-studio/unified-icons/-/merge_requests/168]). Figma and Illustrator will use evenodd to make inner-holes in svgs empty (Like the inner holes in a figure 8).

Theh solution is to edit the svgs in Inkscape to revert the direction of the paths.

1. Open the svg in Inkscape
2. Select all paths
3. In the top menu, select Path -> Break Apart
4. In the top menu, select Path -> Exclusion
5. Save the file and manually remove some of the svg metadata added by Inkscape.
6. Run npm run build to rebuild the font.

License

This project is licensed under the terms of the MIT license.