IconIkona

Ikona reprezentuje typowe akcje. Obsługuje ikony Material Icons, a także ikony SVG.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/icon.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

Używanie ikon Material Icons

Aby używać ikon Material Icons za pośrednictwem tego komponentu, musisz osobno zaimportować plik CSS dla Material Icons. Material Icons ma 5 wariantów: Filled, Outlined, Rounded, Sharp, Two Tone. Zaimportuj odpowiedni plik CSS w zależności od wariantu ikony, którego chcesz użyć:

<!-- 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"
/>

Podczas korzystania z komponentu, wprowadź nazwę ikony w atrybucie name, z sufiksem wskazującym wariant (dla wariantu Filled nie dodawaj sufiksu). Poniżej przykład użycia 5 wariantów ikony delete:

Możesz wyszukiwać ikony w narzędziu Wyszukiwanie ikon Material Icons na dole strony, a następnie kliknąć potrzebną ikonę, aby skopiować kod ikony do schowka.

Ponadto mdui udostępnia niezależny pakiet @mdui/icons, w którym każdy komponent ikony jest oddzielnym plikiem, umożliwiając importowanie tylko potrzebnych ikon bez konieczności importowania całej biblioteki ikon.

Używanie ikon SVG

Komponent obsługuje również używanie ikon SVG jako treści ikony. Możesz przekazać link do ikony SVG za pomocą atrybutu src. Na przykład:

Możesz również przekazać treść SVG w domyślnym slocie komponentu. Na przykład:

Przykłady

Ustawianie koloru

Ustaw styl CSS color elementu <mdui-icon> lub jego rodzica, aby zmienić kolor ikony.

Ustawianie rozmiaru

Ustaw styl CSS font-size elementu <mdui-icon> lub jego rodzica, aby zmienić rozmiar ikony.