IconIkon

Az ikon általános műveletek megjelenítésére szolgál. Támogatja a Material Icons ikonokat és az SVG ikonokat is.

Használat

A komponens importálása:

import 'mdui/components/icon.js';

A komponens TypeScript-típusának importálása:

import type { Icon } from 'mdui/components/icon.js';

Példa:

Material Icons ikonok használata

Ha Material Icons ikonokat szeretne használni ezen a komponensen keresztül, külön importálnia kell a Material Icons CSS fájlját. A Material Icons-nak 5 változata van: Filled, Outlined, Rounded, Sharp, Two Tone. A használni kívánt ikonváltozatnak megfelelően importálja a megfelelő CSS fájlt:

<!-- Filled -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- Outlined -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
/>

<!-- Rounded -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
  rel="stylesheet"
/>

<!-- Sharp -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
  rel="stylesheet"
/>

<!-- Two Tone -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
  rel="stylesheet"
/>

A komponens használatakor adja meg az ikon nevét a name attribútumban, és adja hozzá az ikonváltozat nevét utótagként (a Filled változat esetén nem kell utótag). Az alábbiakban a delete ikon 5 változatának használati módja látható:

Közvetlenül az oldal alján található Material Icons ikonkereső eszközben kereshet ikonokat, majd kattintson a használni kívánt ikonra, hogy automatikusan a vágólapra másolja az ikon kódját.

Emellett az mdui egy különálló @mdui/icons csomagot is biztosít, amelyben minden ikonkomponens egy különálló fájl, így csak a szükséges ikonkomponenseket importálhatja, anélkül, hogy a teljes ikonkészletet be kellene töltenie.

SVG ikonok használata

A komponens SVG ikonokat is támogat ikontartalomként. A src attribútummal megadhatja az SVG ikon linkjét. Például:

Az alapértelmezett slotban is megadhatja az SVG tartalmát. Például:

Példák

Szín beállítása

Állítsa be a <mdui-icon> elem vagy a szülőelem color CSS stílusát az ikon színének megváltoztatásához.

Méret beállítása

Állítsa be a <mdui-icon> elem vagy a szülőelem font-size CSS stílusát az ikon méretének megváltoztatásához.