AI GO ADMIN

Appearance

图标 ​

图标渲染 ​

图标是按需加载的，内部通过 Vite 插件 按首字母分组将 Lucide 图标库 的所有图标拆分为了多个 虚拟模块 进行载入，开发者可以无感高性能使用所有图标，若对实现感兴趣，可以转到文章：现代前端的极致性能 icon 加载方案（死磕成功版）

我们已经注册好了全局 Icon 组件：

  • 支持渲染 lucide 和 element plus 两种图标库的所有图标；
  • 所有图标均支持 color 和 size 属性，lucide 图标额外支持 stroke-width 属性，使用示例如下：
vue
<!-- 图标名是小写下划线分割，这是 lucide 图标名的默认风格 -->
<Icon name="el-plus" size="30" color="#c0c4cc" class="ag-upload-icon" />

<!-- 可以使用 var() -->
<Icon name="el-upload-filled" color="var(--el-color-primary)" size="40" />

<!-- 动态图标名 -->
<Icon :name="item" />

<!-- 不设 color 属性则字段从父级继承，size 默认值为 24 -->
<Icon name="el-plus" />

<!-- 使用线条宽度 stroke-width 属性 -->
<Icon name="lucide-plus" :stroke-width="3" size="16" color="#ffffff" />

TIP

  1. 您可以从 https://lucide.dev/icons/ 查阅所有 lucide 图标，该官网为图标取了一些别名，搜索更方便。
  2. 您可以从 https://cn.element-plus.org/zh-CN/component/icon 查阅所有 Element Icon。
  3. 本地图标可以直接 import 使用，无需走 Icon 组件。

图标选择器 ​

该组件可列出所有 lucide、element 图标供选择，可搜索（在不使用本图标选择器的页面，图标任然是按需加载的，不会加载全部）。

使用示例 ​

vue
<template>
    <div>
        <el-form-item label="图标选择器" prop="icon">
            <IconSelect v-model="formItems.icon" />
        </el-form-item>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import IconSelect from '@/components/agInput/components/iconSelect.vue'

const formItems = reactive({
    icon: '',
})
</script>

props 参考 ​

属性说明类型可选值默认值
size输入框大小stringdefault/small/largedefault
disabled是否禁用booltrue/falsefalse
title输入框提示string请选择图标
type默认图标类型stringele/lucideele
v-model/modelValue绑定值stringel-icon-Minus
show-icon-name是否显示图标名称booltrue/falsefalse
placement选择器出现位置stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom