sablier-icon

Installation
SKILL.md

Recolor the Sablier icon SVG to a user-specified color with an analogous gradient, and optionally export to PNG, JPG, or ICO (favicon).

Source

The base icon is at assets/icon.svg (relative to this skill directory). It is a two-path SVG with viewBox="0 0 189.9 236.73" (aspect ratio ~0.802:1). Two CSS classes (.cls-1, .cls-2) reference two <linearGradient> elements in <defs>:

  • <linearGradient id="linear-gradient"> — contains two <stop> elements:
    • offset="0"stop-color="#f77423" (top / darker)
    • offset="1"stop-color="#fbce5b" (bottom / lighter)
  • <linearGradient id="linear-gradient-2"> — inherits stops from the first via xlink:href="#linear-gradient"

To recolor, replace the two stop-color values inside <linearGradient id="linear-gradient">. Always preserve the original viewBox and aspect ratio — never add or change width/height attributes on the SVG.

A flat variant is at assets/icon-white.svg — a single-path SVG with fill="white" and viewBox="0 0 386 480" (aspect ratio ~0.804:1). Used only when --flat is passed.

Color Resolution

Related skills

More from paulrberg/dot-agents

Installs
5
GitHub Stars
4
First Seen
Mar 1, 2026