Libx サンプルドキュメント

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

アイコンコンポーネントを使用して、ドキュメントにさまざまなアイコンを表示できます。

基本的な使用法

アイコンコンポーネントの基本的な使用例：

アイコンサイズ

さまざまな単位を使用してアイコンのサイズを指定できます：

ピクセル単位も使用できます：

アイコンの色

アイコンの色をカスタマイズできます：

利用可能なアイコン

情報・ステータスアイコン

info
triangle-alert
circle-alert
circle-check

ナビゲーションアイコン

arrow-left
arrow-right
arrow-up
arrow-down

ユーティリティアイコン

search
settings
download
external-link

実用的な例

ステータスメッセージ

異なる種類のメッセージでアイコンを使用：

これは情報メッセージです。
これは警告メッセージです。
これはエラーメッセージです。
これは成功メッセージです。

リスト項目での使用

リスト項目にアイコンを追加して視認性を向上：

  • 完了したタスク

  • 設定の確認

  • 注意が必要な項目

技術仕様

プロパティ

プロパティ型デフォルト説明
namestring-表示するアイコンの名前（必須）
sizestring”1em”アイコンのサイズ（CSS単位）
colorstring”currentColor”アイコンの色（CSS色値）
classNamestring-追加のCSSクラス
styleobject-インラインスタイル

MDXでの使用

MDXファイルでアイコンを使用する例：

---
title: "私のドキュメント"
---

import { Icon } from '@docs/ui';

# ドキュメント

<Icon name="info" /> 重要な情報があります。

## 手順

1. <Icon name="circle-check" color="green" /> 最初の手順
2. <Icon name="circle-check" color="green" /> 2番目の手順
3. <Icon name="triangle-alert" color="orange" /> 注意点

詳細については <Icon name="external-link" /> [公式ドキュメント](https://example.com) をご覧ください。

アクセシビリティ

アイコンコンポーネントは以下のアクセシビリティ機能を提供：

  • ARIAラベル: 自動的にアクセシブルな名前を提供
  • 装飾的使用: 純粋に装飾的なアイコンは適切にマーク
  • スクリーンリーダー対応: 意味のあるアイコンには説明テキストを含める

アクセシビリティを向上させるために、重要なアイコンには説明テキストを含めることを推奨：

<Icon name="triangle-alert" /> 
<span className="sr-only">警告:</span> 
この操作は元に戻せません。

カスタマイズ

CSSでのスタイリング

アイコンのカスタムスタイルを作成：

.custom-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
}

.custom-icon:hover {
  transform: scale(1.1);
}
<Icon name="settings" className="custom-icon" />

テーマ統合

CSSカスタムプロパティを使用してテーマに統合：

:root {
  --icon-color-primary: #007bff;
  --icon-color-success: #28a745;
  --icon-color-warning: #ffc107;
  --icon-color-danger: #dc3545;
}
<Icon name="info" color="var(--icon-color-primary)" />

次のステップ

アイコンコンポーネントをマスターしたら：