@cimai/merchant-icons

词脉 cimai 商户端移动图标库，覆盖交易、合同、商城、客户、风控、支付、履约、数据分析、营销和系统集成等场景。当前主接入方式面向 uniapp + Vue3 微信小程序。

安装

npm install @cimai/merchant-icons

uniapp + Vue3

<script setup>
import OrderIcon from "@cimai/merchant-icons/uniapp/icons/order.vue";
</script>

<template>
  <OrderIcon :size="24" color="#ef4d5a" background="#fff0f2" :background-size="44" :radius="14" label="订单" />
</template>

默认推荐这种子路径按需引入。每个 .vue 组件只内置自己的 SVG，前端构建不会把整套图标打进去。

配置化菜单

<script setup>
import ShieldRiskIcon from "@cimai/merchant-icons/uniapp/icons/shield-risk.vue";
import ContractIcon from "@cimai/merchant-icons/uniapp/icons/contract.vue";
import StoreIcon from "@cimai/merchant-icons/uniapp/icons/store.vue";

const menus = [
  { label: "风险查询", icon: ShieldRiskIcon, color: "#ef4d5a", bg: "#fff0f2" },
  { label: "合同管理", icon: ContractIcon, color: "#f2a100", bg: "#fff7e3" },
  { label: "商城管理", icon: StoreIcon, color: "#18bf8f", bg: "#eafaf4" }
];
</script>

<template>
  <view v-for="item in menus" :key="item.label">
    <component :is="item.icon" :color="item.color" :background="item.bg" :background-size="44" label="" />
    <text>{{ item.label }}</text>
  </view>
</template>

只要图标本体

<script setup>
import MessagesIcon from "@cimai/merchant-icons/uniapp/icons/messages.vue";
</script>

<template>
  <MessagesIcon :size="22" color="#4665ff" label="消息" />
</template>

动态 name 组件

包内也保留 @cimai/merchant-icons/uniapp/MiIcon.vue，适合必须通过后端 name 动态渲染的场景。注意它会引用全集图标数据；对包体积敏感的页面，请优先使用 @cimai/merchant-icons/uniapp/icons/*.vue 子路径。

Props

• size: 图标本体尺寸，默认 24；传 0 时不显示图标本体。
• color: 图标颜色，默认 currentColor，可继承父级文字色。
• background: 底板背景色，默认 transparent。
• backgroundSize: 底板尺寸，默认 0；传 0 时不显示底板，传 44 时组件外层宽高为 44px。
• radius: 底板圆角，默认 14。
• label: 无障碍标签。

其他产物

包内仍然保留 SVG、PNG、manifest、CSS、React 和原生微信小程序组件产物，方便后续扩展。

当前版本包含 110 个图标。