Iconify 图标使用指南

Iconify 是一个统一的图标框架，提供了超过 200,000 个图标，无需下载即可使用。

优势

✅ 无需下载 - 直接通过 API 加载
✅ 图标丰富 - 200,000+ 个图标可选
✅ 按需加载 - 只加载使用的图标
✅ 自动优化 - SVG 格式，自动优化
✅ 持续更新 - 图标库持续更新

使用方法

方案一：使用 Iconify JSON API（推荐）

1. 添加 Iconify 脚本

在 themes/changan/layouts/partials/head.html 中添加：

<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

2. 使用图标

<!-- 使用 iconify-icon 标签 -->
<iconify-icon icon="mdi:search"></iconify-icon>

<!-- 或者使用 data-icon 属性 -->
<span data-icon="mdi:search"></span>

3. 在 Hugo 模板中使用

<!-- 菜单图标 -->
<i class="iconfont" data-icon="mdi:archive"></i>

<!-- 社交图标 -->
<iconify-icon icon="mdi:github" width="24"></iconify-icon>

方案二：使用 SVG API

<!-- 直接嵌入 SVG -->
<img src="https://api.iconify.design/mdi:search.svg" alt="search" />

<!-- 或者使用 background -->
<span style="background-image: url('https://api.iconify.design/mdi:search.svg')"></span>

图标命名规则

Iconify 使用 前缀：图标名 的格式：

前缀：图标集名称（如 mdi, fa, bi 等）
图标名：具体图标名称（使用连字符分隔）

常用图标集

前缀	图标集	图标数量	示例
`mdi`	Material Design Icons	7,000+	`mdi:home`
`fa`	Font Awesome	2,000+	`fa:github`
`bi`	Bootstrap Icons	2,000+	`bi:archive`
`heroicons`	Heroicons	400+	`heroicons:search`
`lucide`	Lucide	1,000+	`lucide:mail`
`tabler`	Tabler Icons	4,000+	`tabler:home`
`ph`	Phosphor Icons	6,000+	`ph:user`

示例图标

<!-- Material Design -->
<iconify-icon icon="mdi:home"></iconify-icon>
<iconify-icon icon="mdi:archive"></iconify-icon>
<iconify-icon icon="mdi:folder"></iconify-icon>
<iconify-icon icon="mdi:tag"></iconify-icon>
<iconify-icon icon="mdi:heart"></iconify-icon>
<iconify-icon icon="mdi:account"></iconify-icon>

<!-- Font Awesome -->
<iconify-icon icon="fa:github"></iconify-icon>
<iconify-icon icon="fa:twitter"></iconify-icon>
<iconify-icon icon="fa:weibo"></iconify-icon>

<!-- Bootstrap Icons -->
<iconify-icon icon="bi:search"></bi:search>
<iconify-icon icon="bi:calendar"></bi:calendar>
<iconify-icon icon="bi:clock"></bi:clock>

<!-- Lucide -->
<iconify-icon icon="lucide:mail"></iconify-icon>
<iconify-icon icon="lucide:user"></iconify-icon>
<iconify-icon icon="lucide:settings"></iconify-icon>

在 ChangAn 主题中使用

1. 修改 hugo.toml

[menu]
  [[menu.main]]
    identifier = 'home'
    name = '首页'
    url = '/'
    weight = 1
    [menu.main.params]
      icon = 'mdi:puzzle'  # 使用 Iconify 图标
      
  [[menu.main]]
    identifier = 'archives'
    name = '归档'
    url = '/archives/'
    weight = 2
    [menu.main.params]
      icon = 'mdi:archive'
      
  [[menu.main]]
    identifier = 'tags'
    name = '标签'
    url = '/tags/'
    weight = 3
    [menu.main.params]
      icon = 'mdi:tag'
      
  [[menu.main]]
    identifier = 'links'
    name = '友链'
    url = '/links/'
    weight = 4
    [menu.main.params]
      icon = 'mdi:heart'
      
  [[menu.main]]
    identifier = 'about'
    name = '关于'
    url = '/about/'
    weight = 5
    [menu.main.params]
      icon = 'mdi:account'

2. 修改社交链接

[[params.socials]]
  name = 'Github'
  icon = 'fa:github'  # Font Awesome GitHub
  url = 'https://github.com/yourname'
  
[[params.socials]]
  name = 'Twitter'
  icon = 'fa:twitter'
  url = 'https://twitter.com/yourname'
  
[[params.socials]]
  name = 'Bilibili'
  icon = 'fa:bilibili'
  url = 'https://space.bilibili.com/yourid'

3. 查找图标

访问以下网站查找和预览图标：

Iconify 搜索: https://icon-sets.iconify.design/
Material Design Icons: https://pictogrammers.com/library/mdi/
Font Awesome: https://fontawesome.com/icons
Bootstrap Icons: https://icons.getbootstrap.com/

性能优化

本地缓存（可选）

如果需要离线使用或提高加载速度，可以下载图标：

# 使用 iconify CLI
npx @iconify/json-downloader@1 download mdi:archive mdi:folder mdi:tag

预加载常用图标

<link rel="preload" href="https://api.iconify.design/mdi:archive.svg" as="image">

样式自定义

iconify-icon {
  font-size: 24px;
  color: currentColor;
  vertical-align: middle;
}

/* 悬停效果 */
iconify-icon:hover {
  color: #ff6b6b;
  transform: scale(1.1);
  transition: all 0.2s;
}

注意事项

✅ 需要网络连接 - 首次加载需要访问 Iconify CDN
✅ CDN 稳定性 - 依赖第三方 CDN 服务
✅ 图标集前缀 - 必须包含前缀（如 mdi:, fa:）
✅ 性能考虑 - 首次加载可能有轻微延迟

参考资源：