Kuvakkeet
Kelan ja Kannan verkkopalveluissa käytettävät kuvakkeet ovat saatavilla yksinkertaisina React-komponentteina, jotka renderöivät inline-SVG-elementin.
Jokainen käytettävä kuvake on importoitava sovellukseen erikseen. Vain importoidut kuvakkeet bundlataan lopulliseen sovellukseen.
Kuvakekomponenttien tekstiväri ja koko periytyy käyttökontekstin mukaisesti. Kuvakkeiden väriä ja kokoa voi muokata size- ja color -proppien avulla.
Luokkanimen asettamiseen on käytössä util-prop. Esimerkit koon ja värin asettamisesta löydät tämän sivun lopusta. Kaikkia kuvakekirjaston komponentteja voi lisäksi muokata käyttämällä SVG-elementin tukemia attribuutteja.
Lue lisää Visuaalinen ilme / Kuvakkeet ja ikonit
Kuvakekoot
Käyttöliittymäkuvakkeet
Käyttöliittymäkuvakkeita sovelletaan neljässä eri vakiokoossa. Valmiissa React-kuvakekomponentissa viivan vahvuus määräytyy automaattisesti kuvakkeen koon mukaan.
| Koko | Suhteellinen koko | Koko, px | Esimerkki |
|---|---|---|---|
| XS (oletusarvo) | 1em | 16 x 16 | |
| S | 1.5rem | 24 x 24 | |
| M | 2rem | 32 x 32 | |
| L | 3rem | 48 x 48 |
Kuvitusikonit
Kuvitusikoneille on määritetty kolme vakiokokoa: 32, 48 ja 64 px. Valmiissa React-kuvakekomponentissa viivan vahvuus määräytyy automaattisesti kuvakkeen koon mukaan.
| Koko | Suhteellinen koko | Koko, px | Esimerkki |
|---|---|---|---|
| M | 2rem | 32 x 32 | |
| L | 3rem | 48 x 48 | |
| XL | 4rem | 64 x 64 |
Esimerkkejä
Alle on koottu muutamia esimerkkejä kuvakkeiden käytöstä. Joillekin komponenteille on
toteutettu valmiit iconBefore ja iconAfter -propit kuvakkeiden käyttöön.
Näitä käyttämällä komponentti asemoi kuvakkeet automaattisesti ja johdonmukaisesti.
Muissa tapauksissa kannattaa käyttää flexboxia kuvakkeiden helppoon asemointiin.