@digital-ai/dot-icons

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.

Be sure to update demo/index.html with the new icons, with the following.

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

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",
  }