Fill SVG icon — ph_fill • phosphoricons

Fill an SVG icon with different colors according to breaks.

Usage

ph_fill(icon, colors, breaks, orientation = c("vertical", "horizontal"))

Arguments

icon: An icon generated with ph().
colors: Colors to fill icon with.
breaks: Breaks where to switch colors.
orientation: Orientation of color filling: vertical (from bottom to top), horizontal (from left to right).

Value

An SVG tag.

Examples

library(phosphoricons)
ph_fill(
  ph("heart", weight = "fill", height = 128),
  colors = c("#DF0101", "#F6CECE"),
  breaks = 0.7
)
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="128px" fill="url(#05715bf62ac98f2bf52dbde0)" style="vertical-align:-0.25em;">
#>   <path d="M240,94c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,220.66,16,164,16,94A62.07,62.07,0,0,1,78,32c20.65,0,38.73,8.88,50,23.89C139.27,40.88,157.35,32,178,32A62.07,62.07,0,0,1,240,94Z"></path>
#>   <title>heart-fill</title>
#>   <defs>
#>     <linearGradient id="05715bf62ac98f2bf52dbde0" x1="0" y1="1" x2="0" y2="0" height="0" width="0">
#>       <stop offset="0" stop-color="#DF0101"></stop>
#>       <stop offset="0.7" stop-color="#DF0101"></stop>
#>       <stop offset="0.7" stop-color="#F6CECE"></stop>
#>       <stop offset="1" stop-color="#F6CECE"></stop>
#>     </linearGradient>
#>   </defs>
#> </svg>

ph_fill(
  ph("star", weight = "fill", height = 128, stroke = "gold", `stroke-width` = 10),
  colors = c("gold", "#FFF"),
  breaks = 0.5,
  orientation = "h"
)
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="128px" fill="url(#b1a11181f0ca0d342df1bbd8)" style="vertical-align:-0.25em;" stroke="gold" stroke-width="10">
#>   <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"></path>
#>   <title>star-fill</title>
#>   <defs>
#>     <linearGradient id="b1a11181f0ca0d342df1bbd8" height="0" width="0">
#>       <stop offset="0" stop-color="gold"></stop>
#>       <stop offset="0.5" stop-color="gold"></stop>
#>       <stop offset="0.5" stop-color="#FFF"></stop>
#>       <stop offset="1" stop-color="#FFF"></stop>
#>     </linearGradient>
#>   </defs>
#> </svg>


# Multiple colors:
ph_fill(
  ph("trash", weight = "fill", height = 128),
  colors = c("forestgreen", "firebrick", "steelblue", "gold"),
  breaks = c(0.3, 0.6, 0.9)
)
#> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" class="phosphor-svg" height="128px" fill="url(#49ec5184381a8ad5437f4c69)" style="vertical-align:-0.25em;">
#>   <path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm0-120H96V40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Z"></path>
#>   <title>trash-fill</title>
#>   <defs>
#>     <linearGradient id="49ec5184381a8ad5437f4c69" x1="0" y1="1" x2="0" y2="0" height="0" width="0">
#>       <stop offset="0" stop-color="forestgreen"></stop>
#>       <stop offset="0.3" stop-color="forestgreen"></stop>
#>       <stop offset="0.3" stop-color="firebrick"></stop>
#>       <stop offset="0.6" stop-color="firebrick"></stop>
#>       <stop offset="0.6" stop-color="steelblue"></stop>
#>       <stop offset="0.9" stop-color="steelblue"></stop>
#>       <stop offset="0.9" stop-color="gold"></stop>
#>       <stop offset="1" stop-color="gold"></stop>
#>     </linearGradient>
#>   </defs>
#> </svg>