Element Plus 组件库实现：4. Icon

前言

在数字化时代，图标（icon）已经成为我们日常生活中不可或缺的一部分。无论是手机APP、网页界面还是各类软件应用，图标都以其简洁、直观的特性，帮助用户快速理解并操作界面。icon组件，对于提升用户体验和界面的整体美观度至关重要。本文将简单介绍icon组件的开发。

Fontawesome

icon组件是一个组件库不可或缺的存在，现阶段也有很多优秀的图标库，所以我们也没有必要去从0到1去开发一款新的组件库，这也不是本组件库的目的，所以本次Icon组件将借助 Font Awesome 进行二次开发。

安装

// 安装 svg core
npm i--save @fortawesome/fontawesome-svg-core
// 安装图标库
npm i --save @fontawesome/free-solid-svg-icons
// 安装基于 vue3 的包
npm i --save @fortawesome/vue-fontawesome@latest-3

使用

// main.ts
import './styles/index.css'
import { createApp } from 'vue'
import App from './App.vue'
// library 是 Font Awesome SVG 图标库的一个核心对象，用于管理和存储所有可用的图标
import { library } from '@fortawesome/fontawesome-svg-core'
//fas 是 Font Awesome 提供的一个集合，包含了所有 solid 风格的免费图标
import { fas } from '@fortawesome/free-solid-svg-icons'
// 将 fas 集合中的所有 solid 风格图标添加到 library 对象中,然后就可以使用这些图标了
library.add(fas)

createApp(App).mount('#app')

二次开发

属性：

export interface IconProps {
  // 这里仅展示自定义属性，省略其他Fontawesome自带属性
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  color?: string
}

Icon.vue：

<script setup lang="ts">
// 引入 FontAwesomeIcon 组件
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import type { IconProps } from './types'
// 引入要用到的omit方法，在lodash中
import { omit } from 'lodash-es'
import { computed } from 'vue';
defineOptions({
    name: 'YvIcon',
    // 禁止透传，手动将属性传递到 <font-awesome-icon />组件
    inheritAttrs: false
})
const props = defineProps<IconProps>()
// 这里使用omit方法将type和color属性过滤掉
// 因为 <font-awesome-icon /> 本身是没有这两个属性，所以最好过滤掉
// 这两个属性是要添加到 <font-awesome-icon />  的父元素
const filterProps = computed(() => omit(props, ['type', 'color']))
// 根据传递进来的属性确定图标的样式
const customStyles = computed(() => {
    return props.color ? { color: props.color } : {}
})
</script>

<template>
 <!-- 因为已经禁用了透传，所以这里要使用 $attrs 来接收非props的属性或者事件 -->
    <i class="yv-icon" :class="{ [`yv-icon--${type}`]: type }" :style="customStyles" v-bind="$attrs">
        <font-awesome-icon v-bind="filterProps" />
    </i>
</template>

总结

本文主要结合Fontawesome对Icon组件进行了二次开发，但是在开发过程中要注意以下几点：

• 使用inheritAttrs: false 禁用透传，目的是手动将icon原本的属性进行手动绑定
• 解决禁用透传以后一些默认属性失效的问题，比如新增class无法传递到Icon，那么这个时候就要使用$attrs来解决

以上就是对Icon组件的一个简单的二次封装，还是和以前一样，style等样式不再做详细赘述，感谢阅览，如有错误还请大佬评论区批评指正。