@wix/design-system-illustrations v1.21.0

Wix Design System Illustrations

Welcome to the @wix/design-system-illustrations library! This package provides a collection of high-quality illustrations.

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:

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

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={editorType} />
    </div>
  );
};

export default MyComponent;

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

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