dot-icons

Icon repository to be used either on its own or in conjunction with dot-components

Objectives

• [x] Allow UX designers to easily update icons without having to create a new release of dot-components
• [x] Allow icons to be used in any project, regardless of the technology stack
• [x] Setup GitHub to automatically publish icons to NPM after merging to main
• [x] Update dot-components to use dot-icons as an npm package
• [x] add a note about using resolutions to update dot-icons separate of dot-components
• [x] update dot-components to always pull latest dot-icons
• [x] Update documentation around usage
  • [x] Option 1: Standard Icon HTML
  • [x] Option 2: React Component

Usage

React Component via dot-components

If you are already consuming dot-components then the easiest way would be to use the DotIcon component, documentation is available here

Standard HTML

If not using dot-components then import @digital-ai/dot-icons into your project as an npm package or as a git submodule. You can also download the contents of this repository and copy the fonts folder and index.css into your project.

<link rel="stylesheet" href="./index.css" />

...

<span class="dot-icon">
  <i class="icon-flow"></i>
</span>

Configuring Jest

We are utilizing @digital-ai/dot-icons which uses @font-face. If you are using Jest then you'll need to update the following files. The location of the files may be different based on the structure of your application

jest.config.js

moduleNameMapper: {
  '@digital-ai/dot-icons': '<rootDir>/testing-utils/style-mock.ts',
}

style-mock.ts

module.exports = {};

Contributing

You can import selection.json back to the IcoMoon app using the Import Icons button (or via Main Menu → Manage Projects) to retrieve your icon selection.

After downloading generated files from IcoMoon only the following files should be copied over.

• fonts/dot.woff
• fonts/dot.ttf
• fonts/dot.svg
• selection.json

You'll also need to copy the icon styles from the generated style.css and paste them at the bottom of index.css, or you can do it directly from icon moon app

as

  .dot-icon i.icon-add:before {
    content: '\e9be';
  }

Be sure to update demo/script.js with the new icon class name that we are using in index.css alphabetically ordered

function doMagic() {
  const list = document.getElementById("icon-list");
  const icons = [
    "GitOps",
    "Increment",
    "Portfolio",
    "abort",
    "activity",
    "add", <-
    "add-from-list",
    "add-outlined",
    "add-solid",
    "alphabet-icon",
    "analytics",
    "announcement",
    "applications",

Once complete, please submit a pull request with the updated files and request someone to review in the #dot-components channel on slack.

More information is available in the .dot design system

Troubleshooting

If for some reason the latest version of dot-icons is not available in dot-components then you can update your package.json to use the latest version of dot-icons by adding the following to your resolutions section.

  "resolutions": {
    "@digital-ai/dot-icons": "latest",
  }