Skip to contents

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(#5ba0486f0dcacfdda3b29bae)" style="vertical-align:-0.25em;">
#>   <path d="M236,92c0,30.6-17.7,62-52.6,93.4A314.3,314.3,0,0,1,131.9,223a8.1,8.1,0,0,1-7.8,0C119.8,220.6,20,163.9,20,92A60,60,0,0,1,128,56,60,60,0,0,1,236,92Z"></path>
#>   <title>heart-fill</title>
#>   <defs>
#>     <linearGradient id="5ba0486f0dcacfdda3b29bae" 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(#78748b775a63c4b791d09c2b)" style="vertical-align:-0.25em;" stroke="gold" stroke-width="10">
#>   <path d="M234,115.5l-45.2,37.6,14.3,58.1A16.5,16.5,0,0,1,187.3,232a16.1,16.1,0,0,1-8.7-2.6l-50.5-31.9h-.2L81,227.2a18,18,0,0,1-20.1-.6,18.5,18.5,0,0,1-7-19.6l13.5-53.1L22,115.5a16.8,16.8,0,0,1-5.2-18.1A16.5,16.5,0,0,1,31.4,86l59-3.8,22.4-55.8A16.4,16.4,0,0,1,128,16h0a16.4,16.4,0,0,1,15.2,10.4l22,55.5L224.6,86a16.4,16.4,0,0,1,14.6,11.4A16.8,16.8,0,0,1,234,115.5Z"></path>
#>   <title>star-fill</title>
#>   <defs>
#>     <linearGradient id="78748b775a63c4b791d09c2b" 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(#4ce8a0e490847b8aec88c9a8)" style="vertical-align:-0.25em;">
#>   <path d="M216,48H176V40a24.1,24.1,0,0,0-24-24H104A24.1,24.1,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="4ce8a0e490847b8aec88c9a8" 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>