prototypers_prototypes-icons

This project helps us to add icons from different libraries in wix to our prototypes easily and conveniently.

How to Use?

1. Copy the relevant CSS link (CDN link) to your prototype project:
   
   

https://cdn.jsdelivr.net/gh/wix-prototypers/prototypers_prototypes-icons@3/src/iconsCss.css

2. When adding icons to the prototype, we need to use the <i></i> element. This element gets the attribute data-icon and its value will include the library of the icon and its name.

Attribute Convention

<i data-icon="library-iconsName"></i>

This project includes the wix style react and base ui libraries. To add an icon from one of those libraries:

1. Go to the wsr / base-ui / editor-x icons in the storybook sites
2. Copy the icon name to the data-icon attribute

Examples

Library	Example
WSR	<i data-icon="wsr-WixChat"></i>
Base ui	<i data-icon="base-ui-WixChat"></i>
Editor X	<i data-icon="editor-x-Chat"></i>

Updates

In order to update the CDN with new icons we need to generate a new css file which include all the icons from the libraries.
To do so, click here and follow the instructions.