Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>bico previewNew to Visual Studio Code? Get it now.
bico preview

bico preview

liweiping

|
4 installs
| (0) | Free
该vscode插件主要用于本地预览npm @bigo/bico(版本需要>=2.0.1)的svg素材
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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>

demo-1

demo-2

图标预览面板

preview-panel 打开图标预览面板的方式:

  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! 🎨

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft