更新记录

1.1.0（2026-08-21） 下载此版本

• 新增 uni-app Vue 2 的 Webpack 构建入口：jkIcon.webpack()
• Vite 构建入口补齐 .nvue 扫描和热更新监听，继续支持 uni-app Vue 3、uni-app x 及 uni-app x 蒸汽模式
• .vue 与 .uvue 分别读取 JS/UTS 映射，移除 Vue 2 不支持的模板空值合并语法
• 修复已有 SVG 缓存时不生成字体和映射的问题，并统一字体资源路径

1.0.3（2026-03-01） 下载此版本

指定svgtofont版本为4.2.2，避免关联依赖undici不支持HbuilderX内置nodejs版本导致运行失败

1.0.2（2026-01-06） 下载此版本

• 修复stroke图标无法被正确显示的问题
• 图标自动放大，减少图标四周空白，避免图标大小与字体大小不同的问题
• 修复uni-app无法使用问题

平台兼容性

uni-app(5.24)

uni-app x(5.24)

其他

jk-icon

构建时自动扫描 Iconify 图标名、下载 SVG、生成字体和映射文件。组件已通过 easycom 自动导入。

支持目标

蒸汽模式需要 HBuilderX 5.0.4 或更高版本。它和普通 uni-app x 共用 .uvue 实现，无需切换组件名或配置项。

组件使用

<jk-icon
  name="mdi:user"
  size="24rpx"
  color="#333"
  custom-class="profile-icon"
  :custom-style="{ marginLeft: '8rpx' }"
/>

name 传入 图标集:图标名，例如 mdi:user。也可以传入 HTTP(S) 或 data URL 图片；图片会按 size 设置宽高。customStyle 优先于组件生成的尺寸和颜色样式。

Vite 配置

适用于 uni-app Vue 3、uni-app x 和 uni-app x 蒸汽模式。在项目根目录的 vite.config.js 或 vite.config.ts 中添加：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import jkIcon from './uni_modules/jk-icon/index.cjs'

export default defineConfig({
  plugins: [
    uni(),
    jkIcon({
      scanGlob: ['**/*.vue', '**/*.nvue', '**/*.uvue'],
      exclude: ['node_modules/**', 'uni_modules/**'],
      svgDir: 'svgIcons',
      fontDir: 'static/fonts',
      fontName: 'svgfont',
      forceDownload: false,
      enableHMR: true,
      log: true
    })
  ]
})

Vue 2 配置

uni-app Vue 2 使用 Webpack。请在项目根目录的 vue.config.js 中注册 Webpack 入口：

const jkIcon = require('./uni_modules/jk-icon/index.cjs')

module.exports = {
  configureWebpack: {
    plugins: [
      jkIcon.webpack({
        scanGlob: ['**/*.vue', '**/*.nvue'],
        exclude: ['node_modules/**', 'uni_modules/**'],
        svgDir: 'svgIcons',
        fontDir: 'static/fonts',
        fontName: 'svgfont',
        forceDownload: false,
        log: true
      })
    ]
  }
}

Webpack 监听编译时会重新扫描图标引用。Vite 的开发服务器会在图标集合变化后自动整页刷新。

安装依赖

cd uni_modules/jk-icon
npm ci

package-lock.json 已固定可用依赖版本，请不要执行 npm update。若修改 fontDir 或 fontName，需要同步修改 components/jk-icon 中的 @font-face 配置。

图标获取

• 向 AI 描述需要的图标。
• 通过 https://icon-sets.iconify.design/ 搜索图标名。