[![Build Status](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_apis/build/status/Duet%20Design%20System?branchName=master)](https://lt-devtool.visualstudio.com/Duet%20Design%20System/_build/latest?definitionId=58&branchName=master)
[![Version](https://img.shields.io/npm/v/@duetds/icons.svg?style=flat-square&label=icons)](https://www.npmjs.com/package/@duetds/icons)

# Duet Icons

This package includes Duet Icons and related tools.

## Usage

For usage instructions, please see Duet Design System [documentation](https://www.duetds.com/iconography/).

## Architecture

This package uses sass-lint, svglint, jsonlint to lint.

The file `scripts/prepublish.js` is used to build the package for publishing.

On build, each icon under the `assets` directory is converted to an individual CommonJS module. Each of these modules exports an object matching the following type:

```ts
type DuetIcon = {
  tags: string // space-separated list of tags
  title: string
  svg: string
}
```

A Typescript type `DuetIconName` is exposed which enumerates all icon names:

```ts
type DuetIconName = "action-add" | "action-add-small" // etc
```

The `main` file of the package exports a single object, containing all icons, which conforms to the following type:

```ts
type DuetIcons = Record<DuetIconName, DuetIcon>
```

## Adding new icons

1. Name new SVG icons following [Duet’s icon naming guidelines](https://www.duetds.com/naming/#icons) and put them inside `src/assets` directory.
2. If SVG Icon has not been optimized it must be done with either SVGO in command line or in [web version of SVGO](https://jakearchibald.github.io/svgomg/). Use default settings on web.
3. Next, run `npm run tags` which will assist you in adding tags for any new icons.
4. Finally, run `npm run build` to generate a new build.

## Copyright

Copyright © 2020 LocalTapiola/Turva.