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 包
- 支持的文件类型：Vue、TypeScript、JavaScript、TSX、JSX
可用命令
bicoPreview.preview: 显示 Bico 图标预览面板bicoPreview.refresh: 刷新 Bico 组件缓存
开发相关
构建和测试
# 安装依赖
pnpm install
# 编译
pnpm run compile
# 监听模式
pnpm run watch
# 打包
pnpm run package
# 代码检查
pnpm run lint
# 发布
vsce publish
贡献指南
欢迎提交 Issue 和 Pull Request！
许可证
本项目遵循相关开源许可证。
享受使用 Bico Preview！ 🎨
| |
