@wix/design-system-illustrations
v1.1.5
Published
Wix Design System Illustrations
Downloads
18
Maintainers
Keywords
Readme
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.