BigStickNewOfficialWebsite-V2/components/AppIcon.vue

<script setup>
import {
  ArrowLeft,
  ArrowRight,
  Bottom,
  Check,
  Close,
  Location,
  Menu,
  Message,
  Phone,
  Picture,
  Plus,
  Promotion,
  Search,
  Service
} from '@element-plus/icons-vue'

const props = defineProps({
  name: {
    type: String,
    default: 'arrow-right'
  }
})

const icons = {
  'arrow-left': ArrowLeft,
  'arrow-right': ArrowRight,
  bottom: Bottom,
  check: Check,
  close: Close,
  location: Location,
  menu: Menu,
  message: Message,
  phone: Phone,
  picture: Picture,
  plus: Plus,
  promotion: Promotion,
  search: Search,
  service: Service
}

const icon = computed(() => icons[props.name] || ArrowRight)
</script>

<template>
  <component :is="icon" class="app-icon" aria-hidden="true" />
</template>

<style scoped>
.app-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.12em;
}
</style>