# cl-icon-select
**Repository Path**: CodeLife_fjl/cl-icon-select
## Basic Information
- **Project Name**: cl-icon-select
- **Description**: vue3 + element-plus封装的二次下拉选择图标组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-03
- **Last Updated**: 2025-11-09
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# cl-icon-select
## 说明
使用 vue3 + element-plus 封装的图标选择组件
- 支持 element-plus 所有图标（若有遗漏可提醒作者添加）
- 支持预览所选图标
- 图标回显时支持自动定位到对应位置
- 支持随意拓展 iconfont 的 Symbol 图标（可选择有色图标）
## 使用方法
### 使用前提
1. 该组件是基于 element-plus 二次封装，所以请先确保安装了 element-plus
2. 该组件默认内置 element-plus 图标，请确保已执行`npm install @element-plus/icons-vue`，图标无需导入，组件内部已自动将所有 element-plus 的图标导入并进行全局注册。
#### 1.安装组件
```js
npm i cl-icon-select
```
#### 2.引入组件
```js
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
// 引入依赖
import ClIconSelect from "cl-iocn-select";
const app = createApp(App);
app.use(ElementPlus);
// 组件注册，包含cl-icon-select和cl-icon两个组件
app.use(ClIconSelect);
app.mount("#app");
```
#### 3.开始使用
#### 3.1 基础使用
```html
```
#### 3.2 拓展 iconFont 的 Symbol 图标
#### 3.2.1 使用在线地址配置 （无需多余配置，操作简单，但是 iconfont 平台不承诺服务的稳定性，建议企业客户需下载字体包自行发布使用并做好备份。）
- 先在 iconfont 里面将需要的图标加入到我的项目
- 在配置里添加线上地址
```js
app.use(ClIconSelect, {
placeholder: "您可以选择图标了",
useIconMethod: "additional",
iconFontUrl: "//at.alicdn.com/t/c/font_4966497_p29k2604a2e.js",
customIconList: [
{
type: "blibli图标",
list: [
"icon-xiaojuchang",
"icon-zhibo",
"icon-yule",
"icon-youxi",
"icon-yinle",
"icon-zhuanlan",
"icon-yingshi",
"icon-zixun",
"icon-zhishi",
],
},
],
});
```
#### 3.2.2 引入图标 js 文件到 main.js 里（需要下载字体包进行导入，操作复杂但是最稳定）
- 先在 iconfont 里面将需要的图标加入到我的项目
- 下载获取 Symbol 格式的图标的文件，只需要里面的 js 文件即可
- 在 main.js 中引入 js 文件
```js
import "./assets/iconfont/iconfont.js";
```
- 在 main.js 的组件配置项设置自己使用图标的方式以及图标的列表（这里我使用的 additional：在原 element-plus 的基础上添加自定义的图标列表）
```js
app.use(ClIconSelect, {
placeholder: "您可以选择图标了",
useIconMethod: "additional",
customIconList: [
{
type: "blibli图标",
list: [
"icon-xiaojuchang",
"icon-zhibo",
"icon-yule",
"icon-youxi",
"icon-yinle",
"icon-zhuanlan",
"icon-yingshi",
"icon-zixun",
"icon-zhishi",
],
},
],
});
```
- 最终效果
## Props 属性
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | -------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placeholder | String | '请选择图标' | 输入框的提示文字 |
| activeColor | String | '#409eff' | 选中图标的图标颜色和边框颜色（注意如果是原本就有颜色的 Symbol 图标只会设置边框颜色） |
| iconSize | Number | 20 | 下拉选项里的图标大小 |
| maxHeight | String | '500px' | 图标列表的最大高度 |
| iconShow | Boolean | true | 是否展示选中边框 |
| useIconMethod | String | 'elementPlus' | 使用图标的方式（elementPlus：使用 element-plus 的图标；custom：使用自定义的图标列表，会使用 customIconList 字段，additional：在原 element-plus 的基础上添加自定义的图标列表） |
| customIconList | Array | iconType[] | 自定义图标列表 |
| autoClose | Boolean | true | 选中图标是否自动关闭 |
| beforeClose | Function | (done) => {} | 如果`autoClose`为 false，则点击后出发该函数，可调用 done 关闭 |
| beforeGetIcon | Function | (iconList) => newIconList | 获取图标前的钩子函数，可以在这里对图标进行过滤，新增等操作，最后需要返回新的图标列表 |
| iconFontUrl | String | '' | 可以进行 iocnfont 的 symbol 图标线上地址的配置，使用该配置就无需在 mian.js 中引入字体的 js 文件了 |
| loadIconUrlOk | Function | null | 引用线上字体成功的回调 |
| loadIconUrlFail | Function | null | 引用线上字体失败的回调 |
## iconType 对象
| 属性名 | 类型 | 默认值 | 说明 |
| ------ | -------- | ------ | ------------ |
| type | String | - | 图标类型名称 |
| list | String[] | - | 图标集合 |
## 方法列表
| 方法名 | 说明 | 参数 |
| ----------- | ------------------ | -------------- |
| tab-change | 图标类型切换时触发 | name：类型名称 |
| icon-change | 图标修改时触发 | icon：图标名称 |
# cl-icon
## 说明
为了支持可以对 iconfont 的 Symbol 图标的拓展，所以单独封装了图标展示组件，原 elementPlus 图标和 iconfont 的 Symbol 图标都可使用该组件展示。
- 支持回显 iconfont 的 Symbol 图标和 elementPlus 图标
## Props 属性
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ------ | ------ | --------------------------------------------------------------------------------------------------------------- |
| size | Number | 20 | 图标大小 |
| color | String | 'grey' | 图标颜色（iconfont 的 Symbol 图标颜色修改需要在下载的 symbol 图标的 js 文件里面将下载图标的对应 fill 属性删除） |
| componentName | Number | 20 | 图标名称 |
| iconSymbolPrefix | String | 'icon' | iconfont 的 Symbol 图标前缀，由此区分是否是 iconfont 的 Symbol 图标 |
> iconfont 的 Symbol 图标前缀可以在 iconfont 上，`我的项目`里面选择`项目设置`可以进行批量对图标前缀的修改，记得同步修改 iconSymbolPrefix 值
### 为什么选择Symbol方式进行图标导入？
1. iconfont平台所推荐的
2. 支持多色图标了，不再受单色限制
3. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
### 使用 symbol 的缺点
1. 兼容性较差，支持 ie9+,及现代浏览器
2. 浏览器渲染svg的性能一般，还不如png
综合来看，随着浏览器的不断更新与客户端性能的不断提升，使用symbol是带来的缺点会被日区抹平