jessicamarcus
7/15/2015 - 11:13 PM

svg as a pseudoelement, using custom color variables

svg as a pseudoelement, using custom color variables

checkmark.scss
content_copyfile_download
$icon-checkmark: 'data:image/svg+xml;utf8,<svg viewBox="0 0 15 9.4" xmlns="http://www.w3.org/2000/svg"><path d="M1,4.3 l4.6,4.1 L14,1" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="' + $color-app-blue-dark + '" /></svg>';

.some-element:before {
  content: url($icon-checkmark);
}

// you can control the icon's size by adjusting its parent element