SVG Icon Maker
0SVG Icon Maker transforms raster images into vibrant SVG formats using the @neplex/vectorizer package. It is designed for developers and designers needing to create scalable icons from existing images.
000Updated 1mo ago
Image Processing
Quick InstallView Source
$ npx skills add https://github.com/heroygt/skills --skill svg-icon-makerOverview
About This Skill
SVG Icon Maker transforms raster images into vibrant, production-ready SVG files using the @neplex/vectorizer package and VTracer technology. The skill preserves color fidelity while intelligently removing backgrounds through 4-corner flood fill, protecting inner details like eyes and fine features. It generates timestamped output folders containing the SVG icon, reference image, and preview PNG for easy comparison. Developers and designers benefit from configurable parameters like colorPrecision (1-8), layerDifference, and filterSpeckle to balance color accuracy against file size and simplicity. Setup requires installing @neplex/vectorizer and sharp, then running the conversion script with your raster image path.
How to Use
Install the skill using the provided command and run it to convert images.
Use Cases
Generate SVG icons from PNG images
Create scalable graphics for web applications
Convert logos and designs into SVG format
Automate the creation of icons from raster images
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/heroygt/skills --skill svg-icon-makerAlternative Install (Git Clone)
git clone https://github.com/heroygt/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Convert [IMAGE_FILE] into a clean, scalable SVG icon using the @neplex/vectorizer package. Ensure the output maintains the original design’s key features while optimizing for web use. Export as an SVG file with minimal distortion and a transparent background where applicable.
Example Output
# SVG Icon: 'logo.png' → 'logo.svg' ```svg <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- Simplified path for a stylized 'X' logo --> <path d="M18 6L6 18M6 6L18 18" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/> <path d="M12 12L18 12" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/> <path d="M12 12L6 12" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/> </svg> ``` ### Key Features: - **Scalability**: Resizes without pixelation for web or app use. - **Optimized Paths**: Clean, minimal strokes for performance. - **Color Retention**: Preserved original blue (#2563EB) from input. - **Transparent Background**: Ready for overlay on any UI element. ### Next Steps: 1. Save the SVG file as `logo.svg`. 2. Use in [COMPANY]'s design system or embed directly in HTML/CSS. 3. Adjust stroke width or colors via CSS variables if needed. *Note: For complex images, consider manual refinements in a vector editor.*
Apply to these tools
Browse all toolsSlideBuild: Ai Slides maker
Create Google Slides presentations with AI
Song Maker AI
AI music generator for professional songs
Phonk Maker
AI-powered tool for creating unique, copyright-free Phonk music
Calvin - AI Shorts Maker
Turn ideas into engaging video content effortlessly
AI Diagram Maker
Transform text into professional diagrams effortlessly
MagicSlides.app AI PPT Maker
Effortlessly create stunning presentations in seconds
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan