Icon아이콘

아이콘은 일반적인 작업을 나타내는 데 사용됩니다. Material Icons 아이콘과 SVG 아이콘 사용을 지원합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/icon.js';

컴포넌트의 TypeScript 타입 가져오기:

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

사용 예시:

Material Icons 아이콘 사용하기

이 컴포넌트를 통해 Material Icons 아이콘을 사용하려면 Material Icons의 CSS 파일을 별도로 가져와야 합니다. Material Icons는 총 5가지 변형(Filled, Outlined, Rounded, Sharp, Two Tone)이 있으므로, 사용하려는 아이콘 변형에 해당하는 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"
/>

컴포넌트 사용 시 name 속성에 아이콘 이름을 전달하고 아이콘 변형 이름을 접미사로 붙입니다(Filled 변형은 접미사 불필요). 아래는 delete 아이콘의 5가지 변형 사용 방식입니다:

페이지 하단의 Material Icons 아이콘 검색 도구에서 아이콘을 직접 검색하고, 사용하려는 아이콘을 클릭하면 아이콘 코드가 자동으로 클립보드에 복사됩니다.

또한 mdui는 별도의 패키지 @mdui/icons를 제공합니다. 이 패키지의 각 아이콘 컴포넌트는 독립적인 파일로 구성되어 있어, 전체 아이콘 라이브러리를 가져올 필요 없이 필요한 아이콘 컴포넌트만 가져와서 사용합니다.

SVG 아이콘 사용하기

이 컴포넌트는 SVG 아이콘을 아이콘 내용으로 사용하는 것도 지원합니다. 컴포넌트의 src 속성으로 SVG 아이콘 링크를 전달할 수 있습니다. 예시:

컴포넌트의 default 슬롯에 SVG 내용을 전달할 수도 있습니다. 예시:

예시

색상 설정

<mdui-icon> 요소나 부모 요소의 color CSS 스타일을 설정하여 아이콘 색상을 변경합니다.

크기 설정

<mdui-icon> 요소나 부모 요소의 font-size CSS 스타일을 설정하여 아이콘 크기를 변경합니다.