关于本图标库

项目简介

本图标库基于 Heroicons 开源图标集构建，通过技术转换制作成易用的字体图标库。所有图标均遵循 MIT 开源协议，可免费用于商业和个人项目。

MIT License 224个图标支持中英文搜索一键复制

🎯 制作初衷

在使用 Heroicons 时发现其 outline 图标采用 stroke 方式绘制，无法直接作为字体图标使用。 GitHub 上虽然有各种图标库，但缺少将 Heroicons 转换为字体图标的完整解决方案。因此决定自己动手，将这套优秀的图标集转换为更易用的字体格式，并分享给社区。

填补 GitHub 上 Heroicons 字体版本的空白
为国内开发者提供更便捷的使用方式
支持中文搜索，提升使用体验
为个人博客 www.alantx.cn 提供图标支持

版权说明

关于 Heroicons

Heroicons 是由 Tailwind CSS 团队创建的一套精美的 SVG 图标集，采用 MIT 开源协议发布。

原始图标版权归 Tailwind Labs Inc. 所有
基于 MIT License 协议，允许自由使用、修改和分发
无需支付费用，可用于商业项目
修改和再分发时需保留原始版权声明

MIT 协议要点

MIT License

Copyright (c) 2020 Refactoring UI Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

制作过程

由于 Heroicons 原始的 outline 图标使用 stroke（描边）方式绘制，无法直接转换为字体图标，因此进行了以下技术处理：

步骤 1：获取源文件

从 Heroicons GitHub 仓库下载所有 24x24 outline SVG 图标（共324个）

步骤 2：Stroke 转 Path

使用 oslllo-svg-fixer 库将描边（stroke）转换为填充路径（path）

npm install oslllo-svg-fixer

const SVGFixer = require('oslllo-svg-fixer');
await SVGFixer(inputDir, outputDir, {
    traceResolution: 600
}).fix();

步骤 3：生成字体文件

使用阿里巴巴 iconfont.cn 平台将 SVG 转换为字体文件（.ttf, .woff, .woff2）

步骤 4：创建图标库界面

开发了这个图标预览和搜索界面，支持中英文双语搜索和一键复制功能

技术栈

转换工具

oslllo-svg-fixer - 将 stroke SVG 转换为填充路径
iconfont.cn - 阿里巴巴字体图标平台，生成字体文件
Node.js - 运行转换脚本

前端技术

原生 HTML/CSS/JavaScript - 无框架依赖，轻量高效
CSS Variables - 主题颜色管理
Async/Await - 异步加载图标数据
Responsive Design - 响应式布局

使用说明

在项目中使用

1. 引入字体文件和 CSS：

<link rel="stylesheet" href="iconfont.css">

2. 在 HTML 中使用图标：

<i class="iconfont icon-home"></i>
<i class="iconfont icon-user"></i>
<i class="iconfont icon-heart"></i>

功能特性

点击图标即可复制类名（不含前缀点号）
支持中英文关键词搜索
支持模糊匹配搜索
响应式设计，适配各种屏幕
中英文界面切换

致谢

感谢 Tailwind Labs 团队创建并开源 Heroicons
感谢 Steve Schoger 的精美图标设计
感谢 阿里巴巴 iconfont 提供免费的字体转换服务
感谢所有开源社区的贡献者