<script setup lang="ts">
import { PropType } from 'vue'
const props = defineProps({
  /**
   * アイコン
   */
  name: { type: String as PropType<string>, default: '' },
  /**
   * 表示テキスト
   */
  p_Text: { type: String as PropType<string>, default: '' },
  /**
   * Iconのtype
   */
  type: { type: String as PropType<'' | 'outlined' | 'sharp' | 'round' | 'two-tone'>, default: '' },
  /**
   * テキストのtype
   */
  color: {
    type: String as PropType<
      'nomal' | 'primary' | 'secondary' | 'warning' | 'positive' | 'accent' | 'negative'
    >,
    default: 'nomal',
  },
})
</script>

<template>
  <div class="wlIconText" :class="`_${color}`">
    <span :class="`${type ? `material-icons-${type}` : 'material-icons'}`"> {{ name }} </span
    ><span>{{ p_Text }}</span>
  </div>
</template>

<style lang="sass" scoped>
.wlIconText
  font-size: 14px
  display: flex
  // justify-content: center
  align-items: center
._nomal
  color: #707070
._primary
  color: var(--q-primary)
._secondary
  color: var(--q-secondary)
._warning
  color: var(--q-warning)
._positive
  color: var(--q-positive)
._accent
  color: var(--q-accent)
._negative
  color: var(--q-negative)
</style>
