1.1.38 • Published 2 months ago

@digital-ai/dot-icons v1.1.38

Weekly downloads
-
License
SEE LICENSE IN <L...
Repository
github
Last release
2 months ago

dot-icons

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

Objectives

  • Allow UX designers to easily update icons without having to create a new release of dot-components
  • Allow icons to be used in any project, regardless of the technology stack
  • Setup GitHub to automatically publish icons to NPM after merging to main
  • Update dot-components to use dot-icons as an npm package
  • add a note about using resolutions to update dot-icons separate of dot-components
  • update dot-components to always pull latest dot-icons
  • Update documentation around usage
    • Option 1: Standard Icon HTML
    • 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",
  }
1.1.38

2 months ago

1.0.29

7 months ago

1.0.28

7 months ago

1.0.27

7 months ago

1.0.33

7 months ago

1.0.32

7 months ago

1.0.31

7 months ago

1.0.30

7 months ago

1.0.37

3 months ago

1.0.36

3 months ago

1.0.35

6 months ago

1.0.34

6 months ago

1.0.26

8 months ago

1.0.25

10 months ago

1.0.24

11 months ago

1.0.23

11 months ago

1.0.22

12 months ago

1.0.21

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.11

1 year ago

1.0.20

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago