跳转到主要内容

图标 ID 与项目接入

图标 ID

墨图爱可沿用 Iconify 的写法:图标集前缀:图标名。

  • tabler:home 是 Tabler 图标集里的 home。
  • 同名不同集是不同的图标:tabler:home 和 mdi:home 是两枚图标。
  • 图标集前缀就是站内图标集页的地址:/collection/tabler。
  • 单枚图标的页面地址:/icon/tabler/home。

注意:

  • 中文搜索别名(如「首页」对应 home)只在本站搜索框里有效,不是图标 ID。
  • 不要把 /collection/…、/icon/… 页面地址当成 SVG 地址用。

在站内拿到代码

顶栏切到「开发者」模式,预览里会多出:

  • 图标 ID 和 i- 前缀的 class 写法(如 i-tabler-home);
  • Vue / React 组件代码;
  • 在本地安装整套图标数据的命令(npm / pnpm / yarn / bun 任选)。

来自 Iconify 的图标集

这部分图标在 Iconify 官方渠道里都有,程序里请直接从官方渠道取,不要抓本站页面:

  • npm 包:@iconify/json,单套数据在 @iconify/json/json/{前缀}.json;
  • Iconify 官方 API:https://api.iconify.design/{前缀}/{图标名}.svg,例如 https://api.iconify.design/tabler/home.svg 。

本站增补的图标集

本站增补集的前缀以 motu- 等开头(如 motu-fuxa)。它们的 ID 写法和 Iconify 一致,但不在 Iconify 官方 API 和 npm 包里(2026-10-28 实测 api.iconify.design 和 npm 上都查不到 motu-fuxa)。

目前取用增补集的办法是在本站复制 SVG 或打包下载(SVG / JSON / 字体)。墨图爱可自己的图标接口还在开发中,见《API 与 MCP(开发中)》。

许可

在代码里引用图标,同样要遵守该图标集的许可。品牌 Logo 能否商用,要看商标说明和该集许可,不是看「MIT」三个字。详见用户文档《图标许可怎么看》。