# wix-ui-icons-common
A set of commonly used icons for the Wix UI design system. [Storybook](https://wix-pages.com/wix-ui-icons-common)

**Note:** This project was migrated from wix-ui. The old Git history is available [here](https://github.com/wix-a/wix-ui-archive/tree/master/packages/wix-ui-icons-common).

## Installation

```bash
npm install @wix/wix-ui-icons-common
```

## Usage

You should use the system icons for internal components and the general icons for the consumer of your project.
To import and use wixStyleReact icons:
```jsx
import { SomeGeneralIcon } from '@wix/wix-ui-icons-common';
import { SomeSystemIcon } from '@wix/wix-ui-icons-common/system';
```

To import and use classic editor (wix-base-ui) icons:
```jsx
import { SomeGeneralIcon } from '@wix/wix-ui-icons-common/classic-editor';
import { SomeSystemIcon } from '@wix/wix-ui-icons-common/classic-editor/system';
```

To import and use on-stage icons:
```jsx
import { SomeIcon } from '@wix/wix-ui-icons-common/on-stage';
import { SomeSystemIcon } from '@wix/wix-ui-icons-common/on-stage/system';
import { SomeReactionsIcon } from '@wix/wix-ui-icons-common/on-stage/reactions';
```

### Migration from old wix-ui-icons-common
1. Uninstall `wix-ui-icons-common`
2. Install `@wix/wix-ui-icons-common`
3. Use [this codemod](https://github.com/wix-private/wix-design-systems-utils/tree/master/packages/wix-ui-codemod/src/wix-ui-icons-common#wix-ui-icons-commonimports-from-main-index) to change all old-style imports
4. Check the codemod's output before committing to avoid potential mistakes.

### Properties

| prop name | type | default value | required | description |
|----------|----------|--------------|------------|-------------|
| size | string | 1em | - | Shorthand for setting width and height attributes of the SVG to the same value |
| ***All other Props are passed to the SVG element*** | | | | |

### Typescript
All icons have the same interface which you can import like so:
```jsx
import { IconProps } from '@wix/wix-ui-icons-common';
```

## Adding a new Icon

Before adding a new icon, please consult with your relevant UX. Not from Wix? Please open a [github issue](https://github.com/wix/wix-ui/issues/new) and we'll be happy to help

### Guidelines
* SVG icons will be transformed into their monochrome version and be stripped from redundant data they should be as lean as possible and should contain only `path`s and `shape`s.
* Make sure to remove `def`, `mask` `stroke`, `fill`, `transform`, `mirror`, `border thickness` and any other similar attributes that doesn't make the component flat. https://jakearchibald.github.io/svgomg/ can be used for SVG optimization.
* the `id` attribute should be removed as well.
* Make sure SVGs are correctly exported from Illustrator/Sketch/Figma, meaning they should merge all layers into one, and apply the masks, which will result in an SVG with a single path.
* Use a descriptive name since it'll be used as the React component name.
* If the icon has multiple variations (small, large, outlined, filled), specify the variation at the end of the file name, e.g. `FormFieldErrorSmall.svg`.
* Add the new SVG file to the `src/default/general/raw` or `src/default/system/raw` folder according to its purpose of usage (internal or external)

* Every icon must have additional metadata describing the following attributes:

  * `title` - the name of the icon
  * `category` - icon type (one of: `Actions`, `General`, `Toggle`, `Communication`, `Document`, `Users`, `Date & Time`, `Arrows`, `Layout & Sorting`, `Media`, `Composer Actions`, `Composer Adjustments`, `Composer Layers & Alignment`, `Composer Shapes`, `Composer Tools`, `Composer Effects`, `Composer Ratio`, `Composer Other`, `Food`, `Brands`, `Money`, `Text`, `Wix Brands`)
  * `description` - a short summary explaining the purpose of the icon and the context where it may appear
  * `tags` - list of terms that may apply to icon, used in storybook search
  * `sizes` - maps between the icon size in pixels (`"18"`/`"24"`) to the file name
  * `aliases` - list of other filenames the icon appears as

  When adding an icon, add the icon's metadata to the following file:
  [src/general/metadata.ts](https://github.com/wix-private/wix-design-systems-utils/blob/master/packages/wix-ui-icons-common/src/general/metadata.ts) *for general icons*
  or [src/system/metadata.ts](https://github.com/wix-private/wix-design-systems-utils/blob/master/packages/wix-ui-icons-common/src/system/metadata.ts) *for system icons*

  Icons should be entered in the following format:
  ```javascript
  {
      title: "Hidden",
      category: "Toggle",
      description:
        "Static indicator- marks item an unlisted or hidden\nButton - makes item hidden or unlisted",
      tags: ["eye", "hide", "show"],
      sizes: { "18": "HiddenSmall", "24": "Hidden" },
      aliases: ["VisibleHidden", "VisibileHidden"],
  }
  ```