Web Components 아이콘 개요

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

Web Components 아이콘 예

import { defineComponents, IgcIconComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './IconSize.css';

defineComponents(IgcIconComponent);
const buildIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';

  export class IconSizing {
  constructor() {
    registerIconFromText("build", buildIcon, "material");
  }
}

new IconSizing();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Sizing</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div
          style="
            display: flex;
            align-items: center;
            width: 400px;
            border: 1px solid gainsboro;
          "
        >
          <igc-icon name="build" collection="material" class="small"></igc-icon>
          <igc-icon name="build" collection="material" class="medium"></igc-icon>
          <igc-icon name="build" collection="material" class="large"></igc-icon>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

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

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

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";

defineComponents(IgcIconComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

IgcIconComponent 자체에는 아이콘이 포함되어 있지 않습니다. 등록된 SVG 이미지를 표시하기 위한 통로입니다.

아이콘 추가

이미지를 아이콘으로 등록하려면 아이콘 컬렉션에 아이콘을 추가할 수 있는 아이콘 레지스트리 서비스에서 2가지 유틸리티 기능 중 하나를 가져오기만 하면 됩니다.

import {
  registerIcon,
  registerIconFromText,
} from "igniteui-webcomponents";
ts

registerIcon 함수를 사용하면 SVG 이미지를 외부 파일의 아이콘으로 등록할 수 있습니다.

registerIcon(
  "search",
  "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg",
  "material"
);
ts

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

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

<igc-icon name="search" collection="material"></igc-icon>
html

아이콘을 등록하는 두 번째 방법은 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>';

registerIconFromText("search", searchIcon, "material");
ts

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

크기

아이콘 구성 요소는 small, medium (기본값) 및 large 세 가지 아이콘 크기를 지원합니다. 아이콘의 크기를 변경하려면 다음과 같이--ig-size CSS 변수를 활용할 수 있습니다.

igc-icon {
  --ig-size: var(--ig-size-large);
}
css

import { defineComponents, IgcIconComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './IconSize.css';

defineComponents(IgcIconComponent);
const buildIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';

  export class IconSizing {
  constructor() {
    registerIconFromText("build", buildIcon, "material");
  }
}

new IconSizing();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Sizing</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div
          style="
            display: flex;
            align-items: center;
            width: 400px;
            border: 1px solid gainsboro;
          "
        >
          <igc-icon name="build" collection="material" class="small"></igc-icon>
          <igc-icon name="build" collection="material" class="medium"></igc-icon>
          <igc-icon name="build" collection="material" class="large"></igc-icon>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

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

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

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

미러링됨

일부 아이콘은 오른쪽에서 왼쪽(RTL) 모드에서 사용될 때 약간 다르게 표시되어야 합니다. 이러한 이유로 우리는 설정 시 아이콘을 수평으로 뒤집는 mirrored 속성을 제공합니다.

<igc-icon name="search" mirrored></igc-icon>
html

스타일링

IgcIconComponent 요소에 직접 스타일을 적용하여 아이콘 구성 요소의 스타일을 지정할 수 있습니다.

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

import { defineComponents, IgcIconComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './index.css';

defineComponents(IgcIconComponent);

const searchIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><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>';

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

new IconStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Sizing</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div
          style="
            display: flex;
            align-items: center;
            width: 400px;
            border: 1px solid gainsboro;
          "
        >
          <igc-icon name="search" collection="material"></igc-icon>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-icon {
    --size: 48px;
    color: olive;
  }css

Web Components 아이콘 개요

Web Components 아이콘 예

용법

아이콘 추가

크기

미러링됨

스타일링

API 참조

추가 리소스