# mik-design

Web Components design library built with Lit and ❤️ by Michele Messina.

Installazione

npm install mik-design

Utilizzo mik-icon

Per utilizzare un set di icone custom per il componente mik-icon, puoi usare uno script come il seguente nel file di avvio della tua applicazione (ad esempio main.ts). Questo consente di utilizzare icone personalizzate tramite il componente mik-icon.

customElements.whenDefined('mik-icon').then(() => {
  const IconElement = customElements.get('mik-icon') as CustomElementConstructor & {
    setIconSource: (source: string, prefix?: string) => void;
  };
  IconElement.setIconSource('assets/sprite.svg');
  IconElement.setIconSource('assets/utility-sprite.svg', 'utility');
});

Puoi anche impostare più file sprite.svg come da esempio, differenziandoli per namespace, per poi usare il componente mik-icon come segue:

<mik-icon name="home"></mik-icon>
<mik-icon name="utility:arrow-left"></mik-icon>
<mik-icon name="utility:arrow-right"></mik-icon>

Qualora non si utilizzi un namespace come puoi vedere nell'html d'esempio, basta indicare l'id dell'icona. In quest'esempio, nel file sprite.svg dev'essere presente l'svg con is home e nel file utility-sprite.svg due icone rispettivamente con id arrow-left e arrow-right.

mik-button

Per permettere ai mik-button il caso di caricamento (come ad esempio l'attesa di una risposta da BE), includere nel file sprite.svg un svg con id loading.