bico preview
一个用于预览 @bigo/bico SVG 图标组件的 VS Code 扩展。该扩展可以在编辑器中直接预览 Bico 图标库中的 SVG 图标,提升开发效率。
使用方法
悬停预览
在以下场景中,将鼠标悬停在组件名上即可看到图标预览:
// 1. Import 语句中
import { ActionAddOutlined } from '@bigo/bico';
// 2. 组件注册中
export default {
components: {
ActionAddOutlined
}
}
// 3. Vue 模板中
<template>
<ActionAddOutlined />
<!-- 按需引用 -->
<BicoActionAddOutlined />
</template>


图标预览面板
打开图标预览面板的方式:
- 命令面板:
Ctrl+Shift+P 输入 "Show Bico Icons Preview"
- 状态栏:点击右下角的 "🎨 Bico Icons" 按钮
在预览面板中:
- 使用搜索框快速查找图标
- 支持按图标名称的任意格式搜索
- 支持快捷复制图标组件声明代码,如
系统要求
- 项目中需要安装
@bigo/bico 包(版本 >= 2.0.1)
- 支持的文件类型:Vue、TypeScript、JavaScript、TSX、JSX
可用命令
bicoPreview.preview : 显示 Bico 图标预览面板
bicoPreview.refresh : 刷新 Bico 组件缓存
更新日志
1.0.0
- 初始版本发布
- 支持 Import 语句、组件注册和模板标签的悬停预览
- 提供完整的图标预览面板
开发相关
构建和测试
# 安装依赖
pnpm install
# 编译
pnpm run compile
# 监听模式
pnpm run watch
# 打包
pnpm run package
# 代码检查
pnpm run lint
# 发布
vsce publish
贡献指南
欢迎提交 Issue 和 Pull Request!
许可证
本项目遵循相关开源许可证。
享受使用 Bico Preview! 🎨
| |