Re:Vue

≡

■ 概要（Overview）

コンポーネント名

  • SvgIcon

レベル (Atomic Design)

  • Atoms（原子）

カテゴリー（Category）

  • icons

■ データ（Data）

【props】

  • id (string): 識別用のID
  • class (string): クラス名
  • style (string): インラインスタイル
  • path (string): 表示するSVGアイコンのパス (必須)
  • size (string): アイコンのサイズ ('128', '64', '32', '18' のいずれか、デフォルトは '64')

【computed】

  • bindingSize: props.size に基づいてアイコンのサイズとスタイルを設定

■ 依存関係（Dependency）

  • @jamescoyle/vue-icon: SvgIconコンポーネントの使用
  • @mdi/js: Material Design Iconsのアイコンパス

■ 使用例（Usecase）

<script setup>
import { mdiAccount } from '@mdi/js'
import { SvgIcon } from 'revuekitz'
import 'revuekitz/dist/style.css'
</script>

<template>
  <SvgIcon
    id="svgIconId"
    class="svg-icon--class"
    style="color: red;"
    :path="mdiAccount"
    size="64"
  />
</template>