@emhome/amaxicon

@emhome/amaxicon

面向 Vue 3 的品牌 / AI 图标组件。记住名字即可：

<AmaxIcon name="chatglm" />
<AmaxIcon name="chatglm" color />

不需要再写 import { ChatGLM }，也不导出 ChatGLM.Color、ChatGLM.Avatar 这类具名组件。变体、品牌色、头像都走 props。

为什么做 amaxicon

LobeHub Icons（icons.lobehub.com）整理了大量模型、产品、服务的图标，命名和变体设计也很好用。实际接入时仍有两处缺口：

1. 图标覆盖不完整。 新品牌、国内产品、小众工具经常对不上，业务里还得自己补图。
2. 没有官方 Vue 版本。 现成封装主要面向 React，Vue 项目只能自己包一层，或退回「一个图标一个组件」的写法。

amaxicon 就是为补这两处做的：

• 提供 Vue 3 组件 <AmaxIcon>，全局注册一次，页面里只记 name。
• 持续收集、整理各类图标资源，逐步把本库做全；命名习惯对齐 LobeHub，方便从那边迁过来。

图标会持续增加。缺哪张，欢迎提 issue，或按仓库约定把 SVG 放进 icons/。

安装

npm i @emhome/amaxicon

需要 Vue 3.3+。

快速开始（推荐）

// main.ts
import { createApp } from 'vue'
import AmaxIcon from '@emhome/amaxicon'
import App from './App.vue'

const app = createApp(App)
app.use(AmaxIcon)
app.mount('#app')

之后任意页面都可以直接写：

<template>
  <AmaxIcon name="chatglm" />
  <AmaxIcon name="chatglm" color />
  <AmaxIcon :name="iconFromApi" :size="24" />
</template>

默认从国内 CDN（npmmirror）按名字加载图标，不用改 Vite、也不用拷贝文件。接口返回的动态 name 同样可用。

生产环境若要锁版本，避免图标随 @latest 变化：

app.use(AmaxIcon, { version: '1.0.1' })

常用写法

<AmaxIcon name="zeroone" :size="32" />
<AmaxIcon name="zeroone" color :size="32" />
<AmaxIcon name="zeroone" text />
<AmaxIcon name="zeroone" :size="48" shape="circle" />
<AmaxIcon name="1password" :size="48" shape="circle" />
<AmaxIcon name="alibabacloud" :size="48" shape="circle" :gap="6" background="#FF6A00" />
<AmaxIcon name="zeroone" combine type="color" />

color 表示换成多色 SVG，不是 CSS 颜色。单色图标跟着文字变色，用 tint="currentColor"。

某个变体文件不存在时，会自动退回默认的 {name}.svg。只有默认文件也不在，才显示缺失图标。

品牌色与头像

色值按同一个 name 取，不挂在具名组件上：

<script setup>
import { AmaxIcon, useIconMeta } from '@emhome/amaxicon'

const { colorPrimary, colorGradient } = useIconMeta('chatglm')
</script>

<template>
  <AmaxIcon name="chatglm" color />
  <AmaxIcon name="chatglm" :size="64" shape="circle" :background="colorGradient" />
  <AmaxIcon name="chatglm" :size="64" shape="square" />
  <span :style="{ background: colorPrimary }" />
</template>

不传 background 时，头像底用该品牌的主色；没有主色则黑底。头像里默认是白色单色标。gap 控制圆内边距（数字按 px，默认 20%）。需要多色标再加 color。传入色值当主色底用 background，不要写 color="#333"。

从管理库同步

后台改完并设为已发布后，在本仓拉接口落盘再发 npm：

# 和管理后台同一个域名，走同源 /api
set AMAXICON_SITE_URL=http://msc.amaxicon.com:5173
npm run sync
npm run release

实际请求：http://msc.amaxicon.com:5173/api/release/brand（Vite 代理到 BFF，再进 amc）。不要用独立 apiend 域名。prepublishOnly 会先 sync（没配站点地址则跳过）再 generate + build。业务运行时不要打这个接口。

离线 / 内网

默认走 CDN。内网或完全离线时，加一行无参数的 Vite 插件即可，main.ts 不用改：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import amaxicon from '@emhome/amaxicon/vite'

export default defineConfig({
  plugins: [vue(), amaxicon()],
})

插件会在开发时挂上包内图标，构建时拷到产物，并让组件改走本地。

不是 Vite 时：把 node_modules/@emhome/amaxicon/icons/ 拷到站点的 /amaxicon-icons/，然后：

app.use(AmaxIcon, {
  source: 'local',
  localBase: '/amaxicon-icons/',
})

按需引入

名字在编译期就确定、只想把个别 SVG 打进产物时：

<script setup>
import { AmaxIcon } from '@emhome/amaxicon'
import chatglm from '@emhome/amaxicon/icons/chatglm.svg?url'
</script>

<template>
  <AmaxIcon :source="chatglm" :size="64" />
</template>

动态 name（接口返回）请继续用全局引入，不要用按需。

图标目录索引

第三方要做本地搜索、卡片墙或自己的索引时，拉一份静态 JSON 即可。没有在线管理接口，目录就是 npm 包里的文件。

完整检索库（品牌、多语 title、分类、标签、变体、关联）：

https://registry.npmmirror.com/@emhome/amaxicon/latest/files/data/catalog-index.json
https://cdn.jsdelivr.net/npm/@emhome/amaxicon@latest/data/catalog-index.json
https://unpkg.com/@emhome/amaxicon@latest/data/catalog-index.json

生产建议钉版本，把 @latest 换成 1.0.1 这类具体号。安装过包时也可以：

import catalog from '@emhome/amaxicon/catalog'
// 或 @emhome/amaxicon/data/catalog-index.json

import { buildCatalogIndexUrl } from '@emhome/amaxicon'

const url = buildCatalogIndexUrl('npmmirror') // latest
const pinned = buildCatalogIndexUrl('jsdelivr', '1.0.1')
const index = await fetch(url).then((res) => res.json())

每条品牌的 files 是不带 .svg 的文件名，对应 icons/{file}.svg。title 是数组，第一项是主显示名。variants 只列出实际存在的变体。

更轻的文件：data/manifest.json 只有文件名列表，data/meta.json 只有主标题和品牌色，data/manifest-index.json 只有当前包版本。

命名

name 只写文件名，变体用 props：

icons/{base}[-deprecated][-text|-brand][-cn][-color].svg

Props

版权与许可

• 组件代码（src/、构建产物）采用 MIT。
• icons/ 中的品牌图形版权归各原品牌所有，仅用于识别对应产品 / 模型 / 服务，不表示这些品牌对本库的认可或授权转让。
• 图标整理与命名参考 LobeHub Icons（icons.lobehub.com）。使用这些 SVG 时请遵守各品牌的商标与使用规范。
• 商业使用前请自行确认相关品牌的商标政策。

仓库

• 源码：gitee.com/emhome/amaxicon
• 实现约定（维护图标、发版）：.docs/development.md