# mik-design Web Components design library built with Lit and ❤️ by Michele Messina. ## Installazione ```bash 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`. ```typescript 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: ```html ``` 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`.