概述
Mickey AI 图标库 API 是免费开源的一套完全基于 HTTP 的开放接口，提供图标分类查询、关键词搜索、SVG 获取等功能。无需注册、无需 API Key，直接调用即可使用。
所有接口均支持跨域（CORS），可在浏览器、小程序、Node.js 等任意环境直接调用。
基础信息
| 项目 | 说明 |
|---|---|
| 基础地址 | https://blog.mickeyai.top/api/ |
| 协议 | HTTPS |
| 数据格式 | JSON |
| 字符编码 | UTF-8 |
| 请求方式 | GET |
统一返回格式
json
{
"code": 0, // 0 表示成功，其他为错误码
"msg": "", // 错误信息（成功时为空）
"data": { ... } // 业务数据
}
快速开始
只需 3 步即可在项目中接入 Mickey AI 图标。
- 确认你的项目支持 HTTP 请求（fetch、axios、curl 均可）
- 选择下方合适的接口获取图标数据
- 将返回的 SVG 代码或直链地址嵌入页面
在线调试
直接在浏览器地址栏输入接口地址即可调试，例如：
url
https://blog.mickeyai.top/api/?action=categories
或使用 curl 命令行调试：
bash
curl "https://blog.mickeyai.top/api/?action=search&q=home&limit=10"
接口文档
1. 获取分类列表
获取图标库所有分类及对应关键词。
http
GET /api/?action=categories
返回示例：
json
{
"code": 0,
"data": [
{ "id": "home", "name": "全部图标", "keywords": ["home", "menu", ...] },
{ "id": "user", "name": "用户人物", "keywords": ["user", "account", ...] }
]
}
2. 关键词搜索
根据关键词搜索图标，支持任意英文关键词。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
action | string | 是 | 固定值 search |
q | string | 是 | 搜索关键词，如 home、arrow |
limit | int | 否 | 返回数量，默认 50，最大 500 |
http
GET /api/?action=search&q=home&limit=20
3. 按分类获取图标
获取指定分类下的图标列表。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
action | string | 是 | 固定值 category |
cat | string | 是 | 分类 ID，如 weather、user |
limit | int | 否 | 返回数量，默认 50，最大 500 |
http
GET /api/?action=category&cat=weather&limit=50
返回示例：
json
{
"code": 0,
"data": {
"category": "weather",
"name": "天气",
"icons": ["mdi:weather-sunny", "mdi:weather-cloudy", ...]
}
}
4. 获取 SVG 源码（JSON）
返回指定图标的 SVG 源码字符串。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
action | string | 是 | 固定值 svg |
prefix | string | 是 | 图标集前缀，如 mdi、tabler |
name | string | 是 | 图标名称，如 home、search |
http
GET /api/?action=svg&prefix=mdi&name=home
5. SVG 直链（可直接当图片）
加上 raw=1 参数，直接返回 SVG 图片，可作为 <img> 的 src 使用。
html
<img src="https://blog.mickeyai.top/api/?action=svg&prefix=mdi&name=home&raw=1" width="24">
直链模式返回的是 image/svg+xml 格式，不是 JSON。适合直接嵌入图片标签，不适合 AJAX 请求。
接入示例
原生 JavaScript
javascript
// 获取分类 fetch('https://blog.mickeyai.top/api/?action=categories') .then(r => r.json()) .then(res => console.log(res.data)); // 搜索图标 fetch('https://blog.mickeyai.top/api/?action=search&q=star&limit=20') .then(r => r.json()) .then(res => { const icons = res.data.icons; // ["mdi:star", "tabler:star", ...] }); // 获取 SVG 插入页面 fetch('https://blog.mickeyai.top/api/?action=svg&prefix=mdi&name=home') .then(r => r.json()) .then(res => { if (res.code === 0) { document.body.innerHTML += res.data.svg; } });
HTML 直接引用（SVG 直链）
html
<!-- 直接作为图片引用，无需任何库 --> <img src="https://blog.mickeyai.top/api/?action=svg&prefix=mdi&name=account&raw=1" width="32"> <img src="https://blog.mickeyai.top/api/?action=svg&prefix=tabler&name=star&raw=1" width="24">
React
jsx
import { useState, useEffect } from 'react'; function Icon({ prefix, name, size = 24 }) { const [svg, setSvg] = useState(''); useEffect(() => { fetch(`https://blog.mickeyai.top/api/?action=svg&prefix=${prefix}&name=${name}`) .then(r => r.json()) .then(res => setSvg(res.data?.svg || '')); }, [prefix, name]); return <div dangerouslySetInnerHTML={{ __html: svg }} />; } // 使用 <Icon prefix="mdi" name="home" size={24} />
Vue 3
vue
<template> <div v-html="svgCode" :style="{ width: '24px', height: '24px' }"></div> </template> <script setup> import { ref, onMounted } from 'vue'; const svgCode = ref(''); onMounted(async () => { const r = await fetch('https://blog.mickeyai.top/api/?action=svg&prefix=mdi&name=home'); const d = await r.json(); svgCode.value = d.data?.svg || ''; }); </script>
错误码
| code | 说明 | 处理方式 |
|---|---|---|
0 | 成功 | 正常处理 data 数据 |
400 | 参数错误 | 检查 action、cat、q 等必填参数 |
500 | 服务器错误或上游请求失败 | 稍后重试，或检查网络连接 |
常见问题
接口有频率限制吗？
目前无严格限制，但建议合理控制并发。频繁大量请求可能会被临时限流。
SVG 直链支持 CSS 改颜色吗？
不支持。直链返回的是静态 SVG 文件，颜色由源图标决定。如需动态变色，请使用「获取 SVG 源码」接口拿到代码后自行注入 currentColor。
可以商用吗？
API 本身免费开放。但图标版权归属各自图标集（MIT / Apache 2.0 / CC BY 4.0 等），商用前请确认对应图标集的许可证。
图标名称格式是什么？
统一为 前缀:名称，例如 mdi:home、tabler:search。前缀代表图标集，名称代表具体图标。
返回的图标列表可以直接用吗？
返回的 icons 数组每项是 前缀:名称 字符串，需要配合「获取 SVG 源码」接口或 Iconify 官方脚本才能渲染为实际图标。