Add VS Code file explorer icon for Camel YAML files#1588
Add VS Code file explorer icon for Camel YAML files#1588GaneshPatil7517 wants to merge 1 commit intoapache:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR aims to add a custom file explorer icon for Camel YAML files (*.camel.yaml and *.camel.yml) in VS Code, similar to how docker-compose.yml files display custom icons.
Changes:
- Added
iconThemescontribution point in package.json - Created icon theme definition file (camel.json) with file extension mappings
- Added SVG icon file (camel-yaml.svg) with Camel-themed design
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| karavan-vscode/package.json | Adds iconThemes contribution point to register the Karavan icon theme |
| karavan-vscode/icons/camel.json | Defines icon theme with file extension to icon mappings |
| karavan-vscode/icons/camel-yaml.svg | Provides SVG icon design for Camel YAML files |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
karavan-vscode/icons/camel.json
Outdated
| "fileExtensions": { | ||
| "camel.yaml": "_camel-yaml", | ||
| "camel.yml": "_camel-yaml" |
There was a problem hiding this comment.
According to VS Code's file icon theme specification, the fileExtensions object should map file extensions to icon IDs. However, for compound extensions like "file.camel.yaml", only the last extension part is used by VS Code (i.e., "yaml"). To match files with patterns like ".camel.yaml", you need to use the fileNames property instead, with patterns like ".camel.yaml" and "*.camel.yml". The current implementation will not correctly match these files.
| "fileExtensions": { | |
| "camel.yaml": "_camel-yaml", | |
| "camel.yml": "_camel-yaml" | |
| "fileNames": { | |
| "*.camel.yaml": "_camel-yaml", | |
| "*.camel.yml": "_camel-yaml" |
| ], | ||
| "iconThemes": [ | ||
| { | ||
| "id": "karavan", | ||
| "label": "Karavan", | ||
| "path": "icons/camel.json" | ||
| } |
There was a problem hiding this comment.
The iconThemes contribution point is designed to replace the entire file icon theme in VS Code, not to augment the existing theme with specific file icons. When a user selects the "Karavan" icon theme, all file icons will be replaced with this theme's definitions, and only files matching ".camel.yaml" and ".camel.yml" will have icons - all other files will have no icons.
The correct approach for adding custom icons for specific file extensions is to use the contributes.icons contribution point combined with contributes.languages or file associations. Alternatively, consider using the approach of declaring file icon associations as part of the language definition if you have language support for these files.
| ], | |
| "iconThemes": [ | |
| { | |
| "id": "karavan", | |
| "label": "Karavan", | |
| "path": "icons/camel.json" | |
| } |
Adds VS Code file explorer icon mapping for Camel YAML files to improve visual clarity in the file explorer.
aa511a0 to
c466a1a
Compare
This PR adds a dedicated Camel icon for
*.camel.yamland*.camel.ymlfiles in the VS Code file explorer, similar to docker-compose.yml behavior.Changes Made
iconThemescontribution in package.jsonTesting
Fixes
Fixes #719