Using SVG

Use SVG Icons directly in your stylesheet without using URIS and recolour on demand with with variables.

We built this into Slate to facilitate adding the triangle to the custom select boxes, but you can totally use it in your projects too. Let's fancy phone link using a custom SVG.

Basic usage

The first thing to do is to get your SVG code into a variable. Save your SVG and minify with something like SVGOMG to make it as small as possible. We are using a Telephone icon from the html entities listed at HTML Arrows.

The important thing to note here is the fill value fill="#000000". It must be set to black (aka #000000). This is because the SVG function looks for the black fill and then replaces it with the desired color.

Let's set this code as the value of a variable, by giving it a name and wrapping it in single quotes:

$examplesvg: '<svg width="25" height="25" xmlns="http://www.w3.org/2000/svg"><path d="M17.32 4c.56.15.983.386 1.269.712.285.326.428.729.428 1.209a3.74 3.74 0 0 1-.574 2.04c-.383.606-.803.91-1.26.91-.149 0-.332-.03-.549-.086a8.754 8.754 0 0 1-.789-.258c.446-.48.792-1.094 1.038-1.843.245-.749.391-1.643.437-2.683zM4.39 20.702c-.286-.034-.56-.16-.823-.377-.263-.217-.583-.594-.96-1.131-.594-.87-1.063-1.884-1.406-3.044a12.255 12.255 0 0 1-.514-3.49c0-1.645.317-3.211.951-4.698.635-1.486 1.57-2.834 2.804-4.046a12.354 12.354 0 0 1 4.046-2.692A12.556 12.556 0 0 1 13.29.297c1.68 0 3.281.314 4.801.943a12.73 12.73 0 0 1 4.081 2.71 12.768 12.768 0 0 1 2.787 4.054c.646 1.504.968 3.078.968 4.724 0 1.715-.317 3.332-.951 4.853a12.269 12.269 0 0 1-2.77 4.064 12.409 12.409 0 0 1-4.106 2.717 12.866 12.866 0 0 1-4.878.935c-2.115 0-3.81-.375-5.084-1.123-1.275-.749-1.912-1.74-1.912-2.975 0-.343.068-.669.206-.978.137-.308.348-.617.634-.926a2.265 2.265 0 0 1-.411-.72 2.593 2.593 0 0 1-.138-.857c0-1.223.42-2.904 1.26-5.041.84-2.138 1.953-4.224 3.336-6.259.731-1.086 1.394-1.826 1.989-2.22.594-.395 1.326-.592 2.195-.592h.342c.366 0 .615.06.746.18.132.12.198.352.198.695a6.17 6.17 0 0 1-.36 2.1c-.24.669-.566 1.209-.978 1.62-.594.103-1.046.243-1.355.42-.308.178-.588.45-.84.815a15.203 15.203 0 0 0-1.706 3.086c-.463 1.12-.694 1.915-.694 2.384 0 .251.045.477.137.677.091.2.234.386.429.557l.137.343c-.263 1.006-.7 1.88-1.312 2.624-.612.743-1.134 1.114-1.569 1.114a1.229 1.229 0 0 1-.411-.111 1.905 1.905 0 0 1-.43-.283 1.83 1.83 0 0 0-.29.549 2.066 2.066 0 0 0-.086.617c0 .96.531 1.732 1.594 2.315 1.063.583 2.498.874 4.304.874 1.578 0 3.075-.288 4.493-.866a11.15 11.15 0 0 0 3.755-2.512c1.12-1.097 1.963-2.334 2.529-3.712.566-1.377.849-2.878.849-4.5a10.55 10.55 0 0 0-.892-4.236 11.627 11.627 0 0 0-2.52-3.67 11.455 11.455 0 0 0-3.704-2.426 11.467 11.467 0 0 0-4.338-.831c-1.544 0-3.001.28-4.373.84A11.44 11.44 0 0 0 5.25 4.72a11.725 11.725 0 0 0-2.53 3.798 11.66 11.66 0 0 0-.883 4.5 9.96 9.96 0 0 0 .73 3.773c.485 1.2 1.225 2.39 2.22 3.567l.068.171-.068.103a3.813 3.813 0 0 1-.395.068zm7.63-3.995c.515.343.86.62 1.038.832.177.211.266.437.266.677 0 .549-.303 1.2-.91 1.955-.605.754-1.13 1.132-1.577 1.132-.171 0-.377-.052-.617-.155a7.671 7.671 0 0 1-.943-.514 6.856 6.856 0 0 0 1.723-1.723 7.406 7.406 0 0 0 1.02-2.204z" fill="#000000" fill-rule="evenodd"/></svg>';

So far so good. Now, we can use the helper mixin to add it as a background image on an element. Either set the elements width and height large enough to cover the image, or use background-size.

.svg-icon-example {
  width: 25px;
  height: 25px;
  @include svgbg($examplesvg);
}

Easy enough. That will just spit out the SVG as nature intended, with all the special characters made CSS safe, but without modifying the colours at all. Lets take it a little further, and see it context. The button below was made using that function.

Call us now!

Replacing colours

The mixin also supports setting new colours on the fly. The mixin assumes the colour of your icon is black (#000000). If your icons have a different background colour, you set this colour globally in _config_svg.scss.

@include svgbg($examplesvg, $bright);

Call us now!

If you have a rogue icon that does not have a default black fill, you can set a third option on the mixin to reset the icons initial colour to something else. You must, however, wrap it in single quotes because the function the mixin relies on to change the colour expects a string value.

@include svgbg($examplesvg, $bright, '#f0f0f0');

The above example will swap the icons original colour of #f0f0f0 to the value of the $bright variable defined in _config-colors.scss.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.