Skills
.Work. You
Rest

svg-icon-pattern

Official

Standardize SVG icon creation.

Design & Creative#design system#frontend development#icons#svg#ui components
Authorvultisig
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill establishes clear guidelines for creating and using SVG icons, ensuring consistency, maintainability, and flexibility across the project's UI.

Core Features & Use Cases

  • Consistent Icon Definition: Enforces the use of SvgProps for predictable icon behavior.
  • Flexible Sizing: Allows icons to scale using fontSize at the point of use, inheriting parent styles.
  • Use Case: When adding a new "user profile" icon, follow this pattern to ensure it seamlessly integrates with existing icons in terms of size and color theming.

Quick Start

Create a new SVG icon component by exporting a named component that receives SvgProps from @lib/ui/props and spreading them on the svg element.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: svg-icon-pattern
Download link: https://github.com/vultisig/vultisig-windows/archive/main.zip#svg-icon-pattern

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.