IconForge IntelliSense

智能自動補全和 IconForge 圖示預覽的 VSCode 擴充套件。

功能特色

🎯 智能自動補全

在 TypeScript/JavaScript React 檔案中輸入 <Icon name=" 時，自動顯示所有可用的圖示名稱。

🖼️ 即時圖示預覽

選擇圖示時，在詳細資訊面板中即時顯示 SVG 圖示預覽，包括：

• 圖示視覺預覽（64x64）
• 檔案路徑和大小
• 使用範例程式碼

🎨 內嵌圖示顯示

在程式碼編輯器中，將 name="icon-name" 中的圖示名稱替換為實際的 SVG 圖示預覽。游標移到該位置時會自動顯示原始文字，方便編輯。

🔍 懸停提示

將滑鼠懸停在圖示名稱上時，顯示圖示預覽和詳細資訊。

安裝

從 VSCode Marketplace 安裝

1. 開啟 VSCode
2. 按下 Ctrl+P (Windows/Linux) 或 Cmd+P (Mac)
3. 輸入 ext install cingfong.iconforge-intellisense
4. 按下 Enter

或者在 VSCode 擴充套件市場搜尋 "IconForge IntelliSense"

從 VSIX 檔案安裝

1. 下載最新的 .vsix 檔案
2. 開啟 VSCode
3. 按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)
4. 輸入 "Extensions: Install from VSIX"
5. 選擇下載的 .vsix 檔案

使用方式

前置條件

此擴充套件需要您的專案中已設定好 IconForge：

1. 專案中需有 iconforge.config.ts 或 iconforge.config.js 配置檔
2. 已執行 iconforge build 生成圖示檔案
3. 圖示 SVG 檔案位於 src/assets/icons 目錄

使用自動補全

1. 在 .tsx 或 .jsx 檔案中輸入：

   <Icon name="
   

2. 自動補全列表會顯示所有可用的圖示

   • ✓ 表示該圖示有 SVG 預覽
   • ✗ 表示該圖示沒有 SVG 預覽

3. 使用鍵盤上下鍵選擇圖示，左側面板會顯示預覽

4. 按下 Enter 完成輸入

查看內嵌預覽

程式碼中的圖示名稱會自動顯示為 SVG 圖示：

<Icon name="home" />  // "home" 會顯示為 🏠 圖示

將游標移到圖示位置時，會顯示原始文字方便編輯。

可用指令

按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac) 開啟命令面板：

• IconForge: Refresh Icons - 重新載入圖示列表
• IconForge: Show Icon Browser - 顯示所有可用圖示的詳細資訊

設定

此擴充套件會自動從以下位置讀取圖示：

• 圖示名稱：src/generated/icons/react/types.ts
• SVG 檔案：src/assets/icons/*.svg

系統需求

• VSCode 版本 1.85.0 或更高
• 專案中已安裝並配置 IconForge

開發

本地測試

1. Clone 專案

   git clone https://github.com/cingfong/vscode-iconforge.git
   cd vscode-iconforge
   

2. 安裝依賴

   npm install
   

3. 編譯

   npm run compile
   

4. 按 F5 啟動除錯模式

5. 在新視窗中開啟一個使用 IconForge 的專案進行測試

打包

npm run package

這會在專案根目錄生成 .vsix 檔案。

已知問題

• 僅支援 TypeScript React (.tsx) 和 JavaScript React (.jsx) 檔案
• 需要專案中有 iconforge.config.ts/js 才會啟動擴充套件

更新日誌

詳見 CHANGELOG.md

貢獻

歡迎提交 Issue 和 Pull Request！

專案儲存庫：https://github.com/cingfong/vscode-iconforge

授權

MIT License - 詳見 LICENSE 檔案

作者

cingfong

享受使用 IconForge IntelliSense！ ✨