@wix/wix-ui-icons-common v3.30.0
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
- Uninstall
wix-ui-icons-common
- Install
@wix/wix-ui-icons-common
- Use this codemod to change all old-style imports
- 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
path
s andshape
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/general/raw
orsrc/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 iconcategory
- 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 appeartags
- list of terms that may apply to icon, used in storybook searchsizes
- maps between the icon size in pixels ("18"
/"24"
) to the file namealiases
- 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"], }
19 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
10 months ago
7 months ago
8 months ago
9 months ago
8 months ago
6 months ago
8 months ago
5 months ago
8 months ago
9 months ago
6 months ago
8 months ago
10 months ago
5 months ago
8 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago