更新记录

0.4.6（2025-12-29） 下载此版本

• fix: 修复无法动态切换图标名称

0.4.5（2025-12-23） 下载此版本

• fix: 修复鸿蒙上无法显示的问题

0.4.4（2025-12-19） 下载此版本

• feat: 重构

平台兼容性

uni-app(4.54)

uni-app x(4.61)

lime-icon 图标

图标组件，支持字体图标、Iconify图标和图片图标，提供灵活的图标注册和使用方式，支持自定义颜色、大小、前缀等属性。

注意：插件依赖的lime-svg为收费插件，若不需要svg功能，删除svg插件即可。

文档链接

📚 组件详细文档请访问以下站点：

• 图标文档 - 站点1
• 图标文档 - 站点2
• 图标文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-icon
2. 导入后可能需要重新编译项目
3. 在页面中使用l-icon组件（组件）或lime-icon（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为8元)则需要自定义基座，才能使用， 若不需要删除即可 :::

基础用法

内置字体图标

使用默认的内置字体图标：👉️【全部图标】

<l-icon name="circle" />
<l-icon name="arrow-right" />

Iconify图标

支持使用icones网站上的所有Iconify图标，通过name属性指定：

<l-icon name="ri:account-box-fill" />
<l-icon name="icon-park-outline:acoustic" />

图片图标

支持直接使用图片URL作为图标：

<l-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
<l-icon name="/static/images/icon.png" />

Unicode字符

直接使用Unicode字符作为图标：

<l-icon :name="`\uE6EF`" />

图标颜色

通过color属性设置图标的颜色：

<l-icon name="ri:aliens-fill" color="#1989fa" />
<l-icon name="icon-park-outline:acoustic" color="#ee0a24" />

图标大小

通过size属性设置图标的尺寸，可以指定任意CSS单位：

<!-- 不指定单位，默认使用px -->
<l-icon name="ri:aliens-fill" size="40" />
<!-- 指定使用rpx单位 -->
<l-icon name="ri:aliens-fill" size="34rpx" />

高级功能

图标注册

注册字体图标

<l-icon prefix="my-icon" name="custom-icon" size="40" />

// 非ts不需要引入 type FontIconConfig 
import { registerFontIcon, type FontIconConfig } from '@/uni_modules/lime-icon'

// 注册字体图标库
registerFontIcon({
  prefix: 'my-icon', // 图标前缀
  fontFamily: 'my-icon', // 字体家族名称
  icons: {
    'custom-icon': 'E600', // 图标名: Unicode编码
    'another-icon': 'E601'
  },
  fontUrl: 'https://example.com/my-icon.ttf', // 字体文件URL（可选）
  jsonUrl: 'https://example.com/icons.json' // JSON文件URL（可选）
// 非ts不需要as FontIconConfig 
} as FontIconConfig)

注册Iconify图标

<l-icon name="my-svg:custom-svg" size="40" />

// 非ts不需要引入 type IconifyConfig 
import { registerIconify, type IconifyConfig } from '@/uni_modules/lime-icon'

// 注册本地Iconify图标库
registerIconify({
  prefix: 'my-svg', // 图标前缀
  icons: {
    'custom-svg': '<svg>...</svg>', // 图标名: SVG内容
    'another-svg': '<svg>...</svg>'
  },
  jsonUrl: 'https://example.com/svg-icons.json' // JSON文件URL（可选）
// 非ts不需要as IconifyConfig 
} as IconifyConfig)

私有化Iconify

默认会使用Iconify的API，如果你想私有化可按以下步骤来：

第一步 安装依赖

yarn add @iconify/json @iconify/tools @iconify/utils

第二步 配置生成脚本

• 在根目录新建一个lime-icons.config.js文件：

// lime-icons.config.js
module.exports = {
    // 输入的文件目录，自有的SVG，如果没有则不需要
    input: {
        prefix: "my-icons",
        dir: '/static/svg',
    },
    // 输出的配置
    output: {
        // 输出的文件目录
        dir: '/static/icons',
        // 输出的文件的格式，如果是JSON则是一个图标合集
        // file: 'icons.json',
        // 如果是SVG则是每个图标做为单独的文件
        file: '*.svg',
    },
    // 指定使用的图标
    icons: [
        'el:address-book', 
        'uil:12-plus',
        'icon-park-outline:abdominal',
        'icon-park-outline:acoustic'
    ]
}

在终端执行脚本：

node ./uni_modules/lime-icon/generate-icons.js

第三步 挂载图标地址

注意：如果使用了Iconify的API，小程序需要去公众平台设置下载白名单 https://api.iconify.design

// main.js | main.ts | main.uts
// 配置svg指定路径，后期可上传到后端，不占用本地空间，如果使用的是Iconify也可以不配置这一步
import { setIconifyApi } from '@/uni_modules/lime-icon'

// 设置自定义Iconify API地址
setIconifyApi('https://your-custom-api.com')

API文档

组件API

Props

Events

工具函数API

registerFontIcon

注册字体图标库

registerFontIcon(config: FontIconConfig)

类型定义：(config: FontIconConfig) => Promise<void> 返回值：Promise<void>

registerIconify

注册Iconify图标库

registerIconify(config: IconifyConfig)

类型定义：(config: IconifyConfig) => Promise<void> 返回值：Promise<void>

setIconifyApi

设置默认Iconify API地址

setIconifyApi(url: string)

类型定义：(apiUrl: string) => void 返回值：void

getIconifyApi

获取当前默认Iconify API地址

getIconifyApi()

类型定义：() => string 返回值：string

parseIconName

解析图标名称

parseIconName(name: string, prefix?: string)

类型定义：(name: string, prefix?: string) => ParsedIconName 返回值：ParsedIconName 对象

useIcon

核心Hook，返回图标信息

useIcon(name: string, options?: UseIconOptions)

类型定义：(name: string, options?: UseIconOptions) => UseIconReturn 返回值：UseIconReturn 对象

font

获取字体图标对应的Unicode字符

font(name: string, prefix?: string)

类型定义：(iconName: string, prefix?: string) => string 返回值：string（Unicode字符）

主题定制

组件提供了丰富的CSS变量用于自定义样式：

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-icon/components/lime-icon -->
<lime-icon />

插件标签说明

Vue2使用说明

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

基础配置

关键配置代码（在main.js中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助