wix-ui-icons-common

A set of commonly used icons for the Wix UI design system. Storybook

Note: This project was migrated from wix-ui. The old Git history is available here.

Installation

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:

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:

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:

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 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:

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 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 paths and shapes.

• 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/general/raw or src/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 for general icons or src/system/metadata.ts for system icons

  Icons should be entered in the following format:

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