> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# アイコンコンポーネント

> YiDA のアイコンコンポーネントの使い方を解説します。組み込みアイコンの選択、サイズ設定、カスタムアイコンの追加手順を紹介し、ページに直感的な視覚的識別子を加える方法を説明します。

アイコンを表示します。YiDA の組み込みアイコンを利用でき、サイズも設定可能です。

## 使用シーン

警告、ヒント、トレンドなどの標識をアイコンで表示します。

## コンポーネント例

## カスタムアイコンの使い方

### 1. まず、<a href="https://www.iconfont.cn/">iconfont</a> にアクセスします

### 2. お気に入りのアイコンをショッピングカートに追加し、追加後にショッピングカートへ移動して、アイコンを新規プロジェクトに追加します（新規プロジェクトの作成を推奨）

### 3. Symbol を選択し、オンラインリンクを表示して、コードを YiDA にコピーします。例：

```
 //at.alicdn.com/t/font_3429645_pimqzpqqzps.js
```

### 4. アイコンの名前を YiDA にコピーします。例：

```
 icon-liebiao
```

## コンポーネントプロパティ

| 属性          | 説明                                                                             | タイプ                                                                         | デフォルト      |
| ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ---------- |
| `baseType`  | ベーシックアイコン。上記の例における icon 配下のテキストのみに対応します                                        | `string`                                                                    | `'smile'`  |
| `otherType` | カスタムアイコン                                                                       | `string`                                                                    | `'smile'`  |
| `size`      | アイコンサイズ                                                                        | `'xxs' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \|'xxl' \| 'xxxl'` | `'medium'` |
| `useType`   | アイコンの使用タイプ。true の場合は **otherType** 属性が有効になり、false の場合は **baseType** 属性が有効になります | `boolean`                                                                   | `false`    |