Icon아이콘

Simge, yaygın işlemleri temsil etmek için kullanılır. Material Icons simgelerini ve SVG simgelerini destekler.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/icon.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

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

Kullanım örneği:

Material Icons Simgelerini Kullanma

Bu bileşen aracılığıyla Material Icons simgelerini kullanmak için, Material Icons CSS dosyasını ayrıca içe aktarmanız gerekir. Material Icons'un 5 farklı çeşidi vardır: Filled, Outlined, Rounded, Sharp, Two Tone. Kullanacağınız simge çeşidine göre ilgili CSS dosyasını içe aktarın:

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

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

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

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

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

Bileşeni kullanırken, name özniteliğine simge adını girin ve simge çeşidi adını sonek olarak ekleyin (Dolu çeşidi için sonek eklenmez). Aşağıda delete simgesinin 5 çeşidinin kullanımı verilmiştir:

Sayfanın alt kısmındaki Material Icons simge arama aracında simgeleri arayabilir ve kullanmak istediğiniz simgeye tıklayarak simge kodunu panoya kopyalayabilirsiniz.

Ayrıca mdui, @mdui/icons adında bağımsız bir paket sunar. Bu paketteki her simge bileşeni ayrı bir dosyadır, böylece tüm simge kütüphanesini içe aktarmadan ihtiyacınız olan simge bileşenlerini içe aktarabilirsiniz.

SVG Simgelerini Kullanma

Bu bileşen, simge içeriği olarak SVG simgelerinin kullanımını da destekler. Bileşenin src özniteliği aracılığıyla SVG simgesinin bağlantısını iletebilirsiniz. Örneğin:

Ayrıca bileşenin varsayılan slot'una SVG içeriğini de iletebilirsiniz. Örneğin:

Örnekler

Renk Ayarlama

Simge rengini değiştirmek için <mdui-icon> öğesinin veya ana öğesinin color CSS stilini ayarlayın.

Boyut Ayarlama

Simge boyutunu değiştirmek için <mdui-icon> öğesinin veya ana öğesinin font-size CSS stilini ayarlayın.