iconfont 预览器 (icon-previewer) 扩展
让图标预览更简单，让开发更高效！ 🎉
一个强大的 VSCode 扩展，帮助您直接在编辑器中预览 iconfont 图标，无需离开开发环境即可查看、搜索和复制图标。
✨ 特性
- 🎨 实时预览 - 在 VSCode 中直接查看 iconfont 图标
- 🔍 智能搜索 - 通过图标名称快速查找所需图标
- 📋 一键复制 - 点击图标即可复制类名或 Unicode
- 🎯 多种触发方式 - 支持资源管理器右键、编辑器右键和命令面板
- 🔄 自动解析 - 自动识别字体家族、类名前缀和图标列表
- 🌐 多源支持 - 同时支持远程字体链接和本地字体文件
- 🆓 完全免费 - 开源且免费使用
🚀 快速开始
安装方法
- 在 VSCode 扩展商店中搜索 "Iconfont Previewer"
- 点击安装按钮
- 重新加载 VSCode 窗口
使用方法
- 方法一：通过资源管理器
在左侧资源管理器中找到您的 iconfont CSS 文件
右键点击文件
选择"预览 Iconfont 图标"
- 方法二：通过编辑器
打开您的 iconfont CSS 文件
在编辑器中右键点击
选择"预览 Iconfont 图标"
- 方法三：通过命令面板
按下 Ctrl+Shift+P(Windows/Linux) 或 Cmd+Shift+P(Mac)
输入 "iconfont previewer"
选择相应命令
📁 支持的 CSS 格式
本扩展支持多种 iconfont CSS 格式：
@font-face {
font-family: "iconfont";
src: url('xxxxxx') format('woff2');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
}
.icon-xxxxx:before {
content: "xxxxxx";
}
@font-face {
font-family: "my-icons";
src: url('iconfont.woff2') format('woff2');
}
.my-icons {
font-family: "my-icons" !important;
}
.my-icon-xxxx:before {
content: "xxxxxx";
}
@font-face {
font-family: "iconfont";
src: url('fonts/iconfont.woff2') format('woff2');
}
⚙️ 功能详解
自动解析
- 自动提取字体家族名称
- 识别图标类名前缀
- 解析所有图标的 Unicode 编码
- 处理相对路径和绝对路径的字体文件
搜索功能
- 实时过滤图标列表
- 不区分大小写搜索
- 支持部分匹配
- 显示匹配结果数量
复制功能
🙏 致谢
感谢以下项目和工具的支持：
| |
