@wix/wix-ui-icons-common

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