更新记录

0.1.0(2024-10-07) 下载此版本

  • fix: ios 默认大小

0.0.9(2024-10-06) 下载此版本

  • fix: name有大写的情况

0.0.8(2024-09-29) 下载此版本

  • chore: 更新 非uvue app size使用css变量
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.7 app-vue app-nvue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

lime-icon 图标

  • 基于uniapp vue3 实现的图标插件,方便快捷的使用iconify图标集合。超过150,000个开源矢量图标。
  • 当前仅为测试阶段,欢迎提出你的建议

安装

插件市场导入本插件和lime-svg

使用

使用默认

插件默认内置了tdesign icon,不需要加tdesign前缀

<l-icon name="circle" />

使用iconify

icones 网站找到需要的图标,通过 name 属性来指定需要使用的图标

由于uniapp x app端使用了原生的lime-svg插件,这个插件是收费的,请慎重考虑,也可以按lime-svg使用的第三点操作可免费使用。。

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

使用图标URL

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

图标颜色

通过 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" />

私有化iconify

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

第一步 安装

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

第二步 配置

  • 需要在根目录新建一个lime-icons.config.js文件
// 在根目录新建一个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

2、自动引入

如果使用的是vue3,通过配置 vite.config.js 达到自动引入 这个方法作废,因有些图标是动态的,在编译阶段不知道图标的名称无法捕获

import uni from '@dcloudio/vite-plugin-uni';
import limeIcon from './uni_modules/lime-icon/vite-plugin';
import path from 'path'
export default defineConfig({
    plugins: [uni(), limeIcon({
        // 输出的配置
        output: {
            // 输出的文件目录
            dir: path.join(__dirname, '/static/icons'),
            // 输出的文件的格式,如果是JSON则是生成一个图标合集, 例如: /static/icons/icons.json
            // file: 'icons.json',
            // 如果是SVG则是每个图标做为单独的文件 例如: /static/icons/xx/xxx.svg
            file: '*.svg',
        },
        // 可选
        icons: []
    })]
})

第三步 挂载图标地址

如果使用内置的icon (tdesign icons)或不私有化iconify则不需要进行这一步

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

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

// 第一个参数是icon host地址,没有则填null
// 第二个参数是icons json合集,没有则填null
// app.use(limeIcons, null, null)

// 示例1 配置icons地址
app.use(limeIcons, 'https://xxx.cn/static/icons', null)

// 示例2 配置icons集合json
import icons from './static/icons/icons.json'
app.use(limeIcons, null, icons)

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

// 配置svg指定路径,后期可上传到后端,不占用本地空间,如果使用的是`iconify`也可以不配置这一步
import {limeIcons} from '@/uni_modules/lime-icon'

Vue.use(VueCompositionAPI)

// 示例1 配置icons地址
Vue.use(limeIcons, ['https://xxx.cn/static/icons', null])

// 示例2 配置icons集合json
import icons from './static/icons/icons.json'
Vue.use(limeIcons, [null, icons])

API

Props

参数 说明 类型 默认值
name 图标名称 string ``
color 颜色 string ``
size 尺寸 string square
prefix 字体图标前缀 string ``
inherit 是否继承颜色 boolean true
web 原生app(nvue,uvue)是否使用web渲染 boolean false

Events

参数 说明 参数
click 点击

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问