IconIkona

Ikony se používají k reprezentaci běžných akcí. Podporují ikony Material Icons a také použití SVG ikon.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/icon.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

Použití ikon Material Icons

Pokud chcete používat ikony Material Icons prostřednictvím této komponenty, musíte samostatně importovat soubor CSS pro Material Icons. Material Icons mají celkem 5 variant: Filled, Outlined, Rounded, Sharp, Two Tone. Podle varianty ikony, kterou chcete použít, importujte odpovídající soubor CSS:

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

Při používání komponenty zadejte název ikony do atributu name a jako příponu použijte název varianty ikony (u varianty Filled není třeba příponu přidávat). Zde je způsob použití 5 variant ikony delete:

Můžete přímo vyhledávat ikony v nástroji Vyhledávání ikon Material Icons v dolní části stránky a poté kliknutím na požadovanou ikonu zkopírujete kód ikony do schránky.

Mdui navíc poskytuje samostatný balíček @mdui/icons, kde každá ikona je samostatný soubor, což umožňuje importovat pouze potřebné ikonové komponenty, aniž byste museli importovat celou knihovnu ikon.

Použití SVG ikon

Tato komponenta také podporuje použití SVG ikon jako obsahu ikony. Můžete použít atribut src komponenty k zadání odkazu na SVG ikonu. Například:

Lze také vložit obsah SVG do výchozího slotu komponenty. Například:

Příklady

Nastavení barvy

Nastavte styl CSS color prvku <mdui-icon> nebo jeho nadřazeného prvku pro změnu barvy ikony.

Nastavení velikosti

Nastavte styl CSS font-size prvku <mdui-icon> nebo jeho nadřazeného prvku pro změnu velikosti ikony.