Wix Design System Illustrations

Welcome to the @wix/design-system-illustrations library! This package provides a collection of high-quality illustrations designed for the Wix Design System, exported as React components.

Installation

To install the @wix/design-system-illustrations package, run the following command in your project directory:

yarn add @wix/design-system-illustrations

Usage

Importing and using illustrations in your React application is straightforward.

Here's an example of how to use an illustration for Studio developers:

import React from 'react';
import { AddingElements } from '@wix/design-system-illustrations/studio';

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to My Component</h1>
      <AddingElements />
    </div>
  );
};

export default MyComponent;

Here's an example of how to use an illustration for Business Manager or Editor Classic developers:

import React from 'react';
import { AddingElements } from '@wix/design-system-illustrations/edge';

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to My Component</h1>
      <AddingElements />
    </div>
  );
};

export default MyComponent;

Here's an example of how to use an illustration for TPA's and Editor Elements team:

import React from 'react';
import { AddingElements } from '@wix/design-system-illustrations';

const MyComponent = (editorType = 'studio') => {
  return (
    <div>
      <h1>Welcome to My Component</h1>
      <AddingElements skin={editor} />
    </div>
  );
};

export default MyComponent;

Property skin has been exposed for every single illustration component to allow switching from edge to studio illustrations theme. The default skin is edge.

<AddingElements skin="studio" />
<AddingElements skin="edge" />

Contributing

TBD.