React 아이콘 개요

    React Icon 구성 요소를 사용하면 글꼴을 쉽게 표시하거나 미리 정의된 SVG 아이콘 세트에서 선택할 수 있지만 프로젝트에 대한 사용자 정의 글꼴 아이콘을 만들 수도 있습니다. 여러 속성을 활용하여 사용 중인 아이콘의 크기를 정의하거나 변경하거나 다른 스타일을 적용할 수 있습니다.

    React Icon Example

    Usage

    사용하기IgrIcon 전에 다음과 같이 등록해야 합니다:

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음에는 필요한 CSS를 가져오IgrIcon 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { IgrIcon } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    ​IgrIcon그 자체로는 아이콘이 전혀 없습니다. 등록 된 SVG 이미지를 표시하는 매개체입니다.

    Adding Icons

    이미지를 아이콘으로 등록하려면, 페이지 내 아이콘 컬렉션에 아이콘을 추가할 수 있는 두 가지 "등록" 메서드 중 하나를 단일 요소에IgrIcon 호출하기만 하면 됩니다.

    이registerIcon 방법은 외부 파일에서 SVG 이미지를 아이콘으로 등록할 수 있게 해줍니다:

    constructor() {
    registerIconFromText("search", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material");
}

<IgrIcon name="search" collection="material" />

    위의 방법은 캐시된 컬렉션 이름이 있는search 이름의 아이콘material 아이콘을 추가합니다.

    새로 등록된 아이콘을 사용하려면 이름과 컬렉션을 요소에IgrIcon 전달하기만 하면 됩니다:

    <IgrIcon name="search" collection="material" />

    아이콘 등록의 두 번째 방법은 SVG 문자열을 메서드에registerIconFromText 전달하는 것입니다:

    const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';

constructor() {
    registerIconFromText("search", searchIcon, "material");
}

<IgrIcon name="search" collection="material" />

    그런 다음 위의 구성 요소 샘플에 설명된 것과 동일한 방식으로 사용합니다.

    크기

    아이콘 컴포넌트는 세 가지 아이콘 크기 -small,(medium기본값), 그리고large 지원합니다. 아이콘 크기를 변경하려면 CSS 변수를--ig-size 다음과 같이 사용할 수 있습니다:

    <IgrIcon className="size-small" />
<IgrIcon className="size-medium" />
<IgrIcon className="size-large" />

    .size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}

    Mirrored

    일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 약간 다르게 보여야 합니다. 그래서 설정하면 아이콘을 가로로 뒤집는 속성을 제공합니다mirrored.

    <IgrIcon name="search" collection="material" mirrored={true} />

    Styling

    아이콘 컴포넌트는 스타일을 요소에IgrIcon 직접 적용하여 스타일링할 수 있습니다;

    igc-icon {
  --size: 28px;
  color: var(--ig-primary-500);
}

    API References

    Additional Resources