# Svg

コンポーネント機能：SVGアイコンの読み込みと表示をサポート。色の動的設定、点滅効果、サイズの自動調整に対応。  
タイプ：通常コンポーネント  
親コンポーネント：bricks.VBox

## 初期化パラメータ

| パラメータ名 | 型     | 説明 |
|------------|--------|------|
| `rate`     | Number | 拡大縮小比率。デフォルトは1で、幅（cwidth）および高さ（cheight）に影響します。 |
| `url`      | String | SVGファイルのURLアドレス。これによりSVGコンテンツを動的に読み込みます。 |
| `color`    | String | SVGの塗りつぶし色（オプション）。未指定の場合、アプリからデフォルト色を取得します。 |
| `blinktime`| Number | 点滅間隔（ミリ秒単位）。設定すると、定期的に表示/非表示を繰り返す点滅が有効になります。 |

> **説明**：
> - `cwidth` および `cheight` は自動的に `rate` の値に設定されます。
> - `dynsize` は固定でtrueとなり、動的サイズ調整が有効です。
> - `color` が指定されていない場合、`bricks.app.get_color()` を呼び出してデフォルト色を取得します。

## 主なイベント

カスタムイベントはありませんが、DOMイベントのバインディングによりインタラクションが可能です。

---

# StatedSvg

コンポーネント機能：`Svg` を継承した、複数の状態切り替えに対応するSVGコンポーネント。各状態には対応するSVGリソースURLが割り当てられ、クリック時に状態を順番に循環して切り替え、状態変更イベントを発生させます。  
タイプ：通常コンポーネント  
親コンポーネント：bricks.Svg

## 初期化パラメータ

| パラメータ名 | 型    | 説明 |
|-----------|--------|------|
| `states`  | Array<{state: String, url: String}> | 状態の配列。各要素は状態識別子と対応するSVG URLを含みます。 |
| `state`   | String | 初期状態。未設定の場合は、`states[0].state` がデフォルトで使用されます。 |

> 例：
> ```js
> states: [
>   { state: 'on', url: '/icons/light_on.svg' },
>   { state: 'off', url: '/icons/light_off.svg' }
> ]
> ```

## 主なイベント

| イベント名         | 発生タイミング |
|------------------|--------------|
| `state_changed`   | 状態が変更されたときに発生。新しい状態を引数として渡します。 |

> 使用例：
> ```js
> widget.on('state_changed', function(newState) {
>   console.log('State changed to:', newState);
> });
> ```

---

# MultipleStateIcon

コンポーネント機能：複数の状態を持つアイコンコンポーネント。キーと値のペア形式で、複数の状態と対応するSVG URLを管理します。クリックで状態を循環し、表示内容を更新します。  
タイプ：通常コンポーネント  
親コンポーネント：bricks.Svg

## 初期化パラメータ

| パラメータ名 | 型                 | 説明 |
|------------|--------------------|------|
| `urls`     | Object<String: String> | キーは状態名、値は対応するSVGのURL。例：`{ normal: '...', active: '...' }` |
| `state`    | String             | 初期状態。`urls` 内のいずれかのキー名である必要があります。 |

> 例：
> ```js
> urls: {
>   play: '/icons/play.svg',
>   pause: '/icons/pause.svg',
>   stop: '/icons/stop.svg'
> },
> state: 'play'
> ```

## 主なイベント

| イベント名         | 発生タイミング |
|------------------|--------------|
| `state_changed`   | `change_state` メソッドが成功して状態が切り替わった後に発生。新しい状態名を引数として渡します。 |

> `.on('state_changed', ...)` で状態変更を監視できます。