Sass mixin SVG icons. Actually a lot of words for a little advice!

di

This article is a very short tutorial about a technique that has delighted me as I was working on some experiment with CSS, trying to figure out how to place simple vector icons in several places with the minimum number of CSS and SVG statements. You know, like most of the computer people I’m a lazy man :).

At first I was wondering how could an SVG icon be reused in several places, say an arrow for example. So the first thing to do was to define a down oriented arrow in SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path style="fill:#000000;" d="M0 50l50,50 50,-50 -10,-10 -40,40 -40,-40z" />
</svg>

Reusing SVG by SASS Mixins

Like most of the front-end developers, I use SASS and I thought it would be a good idea to write a mixin that would help me putting that arrow whenever I need. 

@mixin arrow_icon() {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path style="fill:#000000;" d="M0 50l50,50 50,-50 -10,-10 -40,40 -40,-40z" /></svg>');
}

This way we get our arrow set as a background image. Say that we want to apply this rule to elements with class “down-arrow”:

<div class="down-arrow"></div>

we could define the class like this:

.down-arrow {
	@include arrow_icon();
	
	width:20px; 
	heigth:20px;
	background-size:contain;
}

Cool! It’s a wonderful down arrow, but what if we need a left or a up direction? We could define different mixins for each direction, but we ara lazy, remember? So why not to exploit SVG transformations and add a simple rotation to our icon? How?

The trick is very easy, we just need to add a parameter to the arrow_icon mixin and set the direction passing the angle degrees desired:

@mixin arrow_icon($rotation:0) {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       <path style="fill:#000000;"
             d="M0 50l50,50 50,-50 -10,-10 -40,40 -40,-40z" 
             transform="rotate('+$rotation+' 50 50 )"/>
     </svg>');
}

So now we can think to change the arrow’s color. It’s not an hard job now, we just need to add another parameter:

@mixin arrow_icon($color:'#000000', $rotation:0) {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       <path style="fill:'+$color+';"
             d="M0 50l50,50 50,-50 -10,-10 -40,40 -40,-40z" 
             transform="rotate('+$rotation+' 50 50 )"/>
     </svg>');
}

Change the SVG shape in the Mixin

So we can use our mixin to define arrows in a rainbow of colors and in all directions. But what if we want our shape to be ticker or thinner? Ohhh Yes! we can use a parameter for that too!

Here’s how I did:

@mixin arrow_icon($color:'#000000', $rotation:0, $tickness:10) {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
       <path style="fill:'+$color+';"
             d="M0 50l50,50 50,-50 -'+$tickness+', -'+$tickness+' -'+(50 - $tickness)+','+(50 - $tickness)+' -'+(50 - $tickness)+',-'+(50 - $tickness)+'z"
             transform="rotate('+$rotation+' 50 50 )"/>
     </svg>');
}

That’s it! It’s not rocket science I know 🙂 but I had a lot of fun with it. Hope it was funny for you too.