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';

    The IgrIcon doesn't contain any icons on its own. It's a conduit for displaying any registered SVG images.

    Adding Icons

    To register an image as an icon, all you need to do is call one of the 2 "register" methods on a single IgrIcon element that allow you to add icons to an icon collection on your page.

    The registerIcon method allows you to register an SVG image as an icon from an external file:

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

    The method above will add an icon named search to a cached collection named material.

    In order to use the newly registered icon, all you have to do is to pass the name and collection to the IgrIcon element:

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

    The second method for registering icons is by passing an SVG string to the registerIconFromText method:

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

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

    크기

    The icon component supports three icon sizes - small, medium(default), and large. In order to change the size of the icon, you can utilize the --ig-size CSS variable as follows:

    <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

    Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored attribute that, when set, flips the icon horizontally.

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

    Styling

    The icon component can be styled by applying styles directly to the IgrIcon element;

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

    API References

    Additional Resources