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>

图标预览面板

打开图标预览面板的方式：

1. 命令面板：Ctrl+Shift+P 输入 "Show Bico Icons Preview"
2. 状态栏：点击右下角的 "🎨 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！ 🎨