1

i'm trying to display close icon using svg but it is not showing anything could anyone help me how to get this. this looks simple but I didn't understand why it is not working

SCSS:

.close {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='#666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    cursor: pointer;
    padding-left: 5px;
  }

html

  <div class='close'></div>
no_lyf_programmer
  • 595
  • 1
  • 8
  • 18

1 Answers1

3

You need to define a width and height.

UPDATE:

The fill property of the svg contains a hash symbol # which needs to be replaced by %23 in order for it to work.

More details here: https://stackoverflow.com/a/30733736/4305494

Code Snippet:

.close {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='%23666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  cursor: pointer;
  padding-left: 5px;
  width: 50px;
  height: 50px;
}
<div class='close'></div>

How about using the SVG <symbol> tag instead? You will be writting semantic HTML and you can use it wherever you want as well, with the <use> tag.

Here's a simple demo on how to achieve this.

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.icon-close {
  font-size: 3rem;
  color: #666E6E;
  opacity: 0.6;
}
<a href="#">
  <svg class="icon icon-close">
    <use xlink:href="#icon-close"></use>
  </svg>
</a>

<svg style="display:none;">
  <symbol id="icon-close" viewBox="0 0 53.7 53.7">
    <title>Close icon</title>
    <path d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z' />
  </symbol>
</svg>
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53