Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Coloring SVG content url with css

Tags:

html

css

svg

I have a button set up like this:

<button class="buttonclass"><i class="iconclass plus-icon"></i></button>

My css classes look like this:

.buttonclass {
  width: 30px;
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 20px;
  background-color: #1DBE60
}

.iconclass {
  width: 20px;
  height: 20px;
  margin: 7.5px;
}

.buttonclass .iconclass {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon {
  content: url(http://uxrepo.com/static/icon-sets/mfg-labs/svg/plus.svg);
}

How can I change the color of the 'plus-icon' with css if it is an SVG? I have tried adding fill classes to the svg, color classes, background-classes, etc.

Here is a plunk: http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

like image 831
developthewebz Avatar asked Jan 18 '16 16:01

developthewebz


People also ask

Can you color SVG in CSS?

You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser. If you want to change your SVG image, you have to load it using <object> , <iframe> or using <svg> inline.

How do I fill color in SVG?

In an SVG file, they can be specified both in the style attribute ( fill and stroke properties) and using fill and stroke attributes as presentation attributes. So you can set color for SVG elements in two ways: using fill and stroke properties of the style attribute and using fill and stroke attributes.


1 Answers

If you're happy to add one extra class (for the color of the plus icon) then here's a CSS-only solution using the currentColor CSS variable:

.buttonclass {
  width: 30px;
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 20px;
  background-color: #1DBE60
}

.iconclass {
  width: 20px;
  height: 20px;
  margin: 7.5px;
}

.buttonclass .iconclass {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plus-icon {
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="0" y="12" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="0" width="8" height="8" fill="rgb(29,190,96)" /><rect x="12" y="12" width="8" height="8" fill="rgb(29,190,96)" /></svg>');
background-color: currentColor;
border: 1px solid rgb(29,190,96);
border-radius: 15px;
}

.white {
color: rgb(255,255,255);
}

.yellow {
color: rgb(255,255,0);
}

.green {
color: rgb(0,255,0);
}
<button class="buttonclass"><i class="iconclass plus-icon white"></i></button>
<button class="buttonclass"><i class="iconclass plus-icon yellow"></i></button>
<button class="buttonclass"><i class="iconclass plus-icon green"></i></button>
like image 71
Rounin - Glory to UKRAINE Avatar answered Sep 23 '22 08:09

Rounin - Glory to UKRAINE