skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

icons-src

Create and integrate custom SVG icons into VS Code extension icon fonts.

1.0k|453|Updated Jun 21, 2017
Search Tags:#build#fonts#icons#svg#vs-code#icon-design
One-click install
npx skills add https://github.com/forcedotcom/salesforcedx-vscode --skill icons-src
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icons-src
Source: https://github.com/forcedotcom/salesforcedx-vscode/tree/main/.claude/skills/icons-src
Command: npx skills add https://github.com/forcedotcom/salesforcedx-vscode --skill icons-src

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Icons are essential for visual consistency in VS Code extensions, but creating and integrating new icons into the icons-src workflow is error-prone and time-consuming.

Core Features & Use Cases

  • SVG icon creation that adheres to the 24×24 viewBox, proper xmlns, and theme-friendly fill using currentColor.
  • Workflow for adding icons to media/icons-src, updating icons.json, and triggering the build to regenerate font/icon assets.
  • Use Case: Define a leaf icon for default scratch org and integrate into fonts for extension assets.

Quick Start

Add a new SVG to media/icons-src and run the build to regenerate the icon font.

Frequently Asked Questions about icons-src

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create custom SVG icons for a VS Code extension?▼

To create custom SVG icons for VS Code extensions, design your SVG within a 24×24 viewBox using proper xmlns and theme-friendly fill, then add it to media/icons-src and run the build to regenerate icon assets.

What are the SVG requirements for integrating icons into the VS Code build workflow?▼

SVG icons must use a 24×24 viewBox, include proper xmlns, and apply currentColor for theme-friendly fill to integrate successfully into the VS Code build workflow and generate font assets.

Do I need an npm-based workflow to generate icon fonts for Salesforce DX VS Code?▼

Yes, you need a local build environment with an npm-based workflow to trigger the build process that regenerates icon fonts and assets for the Salesforce DX VS Code service ecosystem.

What is the process to update icons.json after adding a new SVG icon?▼

After adding a new SVG to media/icons-src, the workflow involves updating icons.json to register the asset and triggering the npm build to regenerate the extension's icon font.

Why does my custom SVG icon not show up in the VS Code extension after building?▼

If your custom SVG icon does not appear, it likely violates SVG guidelines by omitting the 24×24 viewBox, missing proper xmlns, or failing to use currentColor, which breaks the font generation build.

Related Skills

Explore More Design & Creative Skills→
dvcoolsterdvcoolster
1

asset-creator

Generate SVG assets from reference materials and guidelines.

Community
Advanced
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate
daymadedaymade
1.3k

llm-icon-finder

Resolve AI/LLM brand icon URLs from the lobe-icons library in SVG, PNG, or WEBP formats.

Community
Intermediate
wh131462wh131462
2

create-tool

Automate tool creation and registration for the EH-Tools uni-app project.

Community
Advanced