Icons Proposal

Approach

We want the user to be able to add icon shapes, about icons shapes:

• There will be a shape available to display icons.

• There will be a list a icons to choose from (it will be stored as static assets, below public or something like that, not included in the bundle "js" deployed as external resource.

• About the Icon shape it will contain two properties:

  • The url to the icon itself (we will map it to a friendly name).
  • The size of the icon (t-shirt sizes): XS, S, M, L, XL

• Additional we will create an interface and an array containing the list of icons avaiable (url, name, list of names to search for, list of categories).

About UI, once you drop an icon if you double click on it (or via properties) you can choose the icon from a given list (more on details).

Details

Icon list

Icons will store as static assets, but we need to be able to have a list of icons, and a way to group them by categories (not to be implemented on first instance), and a set of synonyms (e.g. a combobox can have many search terms: 'combobox', 'dropdown').

We will create the following data structure:

// TODO: not sure if it will be /public
const BASE_ICONS_URL = "/";

// TODO Decide list of categories (just 4/5)
type Category = 'IT' | 'business' | 'Ecommerce';

interface IconInfo {
   name : string;
   searchTerms : string[];
   categories : Category[];
}