skills.rest
gitkraken
gitkrakenOFFICIAL
Explore all skills by this author →
Website𝕏@gitkrakenGitHub

add-icon

Add SVG icons to the GitLens GL Icons font and update mappings.

9.9k|1.8k|Updated Aug 8, 2016
Search Tags:#development#ui#icons#svg#font#gitlens
One-click install
npx skills add https://github.com/gitkraken/vscode-gitlens --skill add-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-icon
Source: https://github.com/gitkraken/vscode-gitlens/tree/main/.claude/skills/add-icon
Command: npx skills add https://github.com/gitkraken/vscode-gitlens --skill add-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding new icons to the GitLens GL Icons font, ensuring consistency and efficient icon management.

Core Features & Use Cases

  • Icon Addition: Easily integrate new SVG icons into the existing font library.
  • Workflow Automation: Guides through the steps of SVG preparation, mapping updates, and font building.
  • Use Case: A developer needs to add a new 'star' icon to the GitLens UI. They use this Skill to add the SVG, update the font mapping, build the new font file, and reference it in the codebase.

Quick Start

Add a new icon named 'my-new-icon' by following the instructions in the SKILL.md file.

Frequently Asked Questions about add-icon

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

FAQPage Schema
How do I add new SVG icons to the GitLens GL Icons font?▼

To add new SVG icons to the GitLens GL Icons font, you process the SVG files, update the font mapping JSON, modify SCSS references, and build the updated font file.

What SVG formatting standards are required to integrate custom icons into the GitLens UI?▼

Integrating custom icons into the GitLens UI requires adhering to specific SVG formatting standards to ensure the font building process correctly interprets and maps the new icon assets.

Do I need pnpm to build the GitLens icon font?▼

Yes, pnpm is a required dependency to execute the scripts and build the new font file when adding custom icons to the GitLens UI library.

What is the workflow for updating font mappings when adding a custom icon?▼

The workflow for updating font mappings involves adding the prepared SVG file, updating the mapping JSON with the new icon name, and modifying the SCSS references to include the new icon.

Can I automate the process of integrating custom SVG icons into my development UI font?▼

This Skill automates custom SVG icon integration by providing scripts and references that guide you through SVG preparation, mapping updates, and font building for your development UI.

Why are my new GitLens icons not displaying after building the font file?▼

New GitLens icons may not display if the SVG formatting standards are not met, or if the mapping JSON and SCSS references were not properly updated during the font building workflow.

Related Skills

Explore More Software Engineering Skills→
commercetoolscommercetools
154

repo-healthcheck-node

Verify Node.js and pnpm versions, install dependencies, and run builds.

Official
Intermediate
MCERQUAMCERQUA
1

icon-generation

Generate custom icons from descriptions or search over 1,700 Lucide icons.

Community
Intermediate
vercel-labsvercel-labs
15.9k

react

Convert JSON specs into React component trees for UI rendering.

Official
Intermediate
Umbral-BotUmbral-Bot

svgwrite

Generate editable SVG files programmatically with the svgwrite Python library.

Official
Intermediate