Documentation
Getting started with SVGBox is simple: browse to an iconset, pick the icon
you want, and use the given IMG tag. There are two ways you use an icon:
SVG Fragments and Single Downloads
When you select an icon, the SRC attribute of the IMG tag will be either of:
//s.svgbox.net/$ICONSET.svg?fill=$FILL_COLOR#$ICON
or,
//s.svgbox.net/$ICONSET.svg?fill=$FILL_COLOR&ic=$ICON
In the first type, the whole iconset is downloaded at once and you
can specify which icon to use by URL hashes—a technique called
as SVG Fragments (read more). Another benefit of SVG Sprites is that you
can use the LINK tag to preload the sprite asset for faster performance.
In the second, you specify a particular icon to download.
If you're using very few icons from the set, then it makes more sense to
download only a single one.
Specifying Fill Color
You can modify the fill color by the fill query parameter. The parameter supports multiple color formats:
-
Hex Format: hero-solid.svg?fill=f50a0a&ic=heart
-
RGB Format: hero-solid.svg?fill=rgb(41,152,0)&ic=heart
)
-
HSL Format: hero-solid.svg?fill=hsl(14,100%,30%)&ic=heart
)
-
Tailwind Palette Colors
: hero-solid.svg?fill=purple-600&ic=heart
-
HTML5 Common Colors: hero-solid.svg?fill=violet&ic=heart
