🎨 ICON 图标组件

使用方式分析

• 传入 icon、beat、spin ，这些都是 fortawesome 提供的属性
• 传入 type ，切换不同的主题风格

📁 目录结构

在项目的组件目录下创建 Icon 组件文件： src/component/Icon.vue

1. 安装 fortawesome 依赖

   {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/vue-fontawesome": "^3.0.8"
   }
   

2. 引入 fortawesome 组件
3. 对 fortawesome 提供的内容进行二次封装
4. 传入 fortawesome 默认配置
   
   // !code ++ // [!code ++] // [!code ++] Props>() // [!code ++] // [!code ++] ```
   2. 扩展 type

      @each $key, $color in primary, success, warning, danger, info {  .c-icon-#{$key} {    --icon-color: var(--color-#{$key});}

      <script setup lang="ts">
      import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome'
      import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
      import { computed } from 'vue'
      interface Props extends FontAwesomeIconProps {
        type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'} defineOptions({
        name: 'CIcon'
      })
      
      const props = defineProps<Props>()
      
      const filterProps = computed(() => {
        const { type, ...rest } = props  return rest}) </script>
      
      <template>
        <i class="c-icon" :class="{ [`c-icon-${type}`]: type }">
          <FontAwesomeIcon v-bind="filterProps" />
        </i>
      </template>