How to SVG CSS Sprite without using code?

Amin
July 8, 2023
278 views
0 votes
2 Answers

I want to convert all of my 4 SVGs into one SVG image (with the same size/quality) and use them as a single sprite CSS image on my website.

Is there any way that I can put all of my SVGs into one file and then I can use them as a sprite like when you use jpg or png files? I don’t want to use code methods (using or tags) just need an image like when you want to sprite a jpg file

Answers

I’m using a simple way with svg, mainly for icons or sprite

I have a js file of the icons/sprite I need. I’ve a big one and project per project I’m adding svg I need. It’s convenient and very small. That’s the icons json you have at beginning of the snippet (normally in external file).

When I need an icon, I put a class ico and a data attribute icon with the name of the icon wanted.

Each svg have fill and stroke with currentColor which permit to color them from css. You can also manipulate width if needed.

Check the snippet, perhaps not answering exactly your request but can give you some tracks.

let icons = {
  "ico_chevron_right": '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke-width="0" style="fill:currentColor;stroke:currentColor">' +
    '<path d="M 13.289176,3.2250635 C 11.946709,1.7971882 13.888277,-8.8165624e-4 15.37455,1.5716189 L 34.165531,21.452775 c 1.207519,1.277575 1.207764,3.815081 0,5.09445 l -18.84,19.956976 c -1.334812,1.41395 -3.295908,-0.31498 -1.925554,-1.773679 L 32.326354,24.584 C 32.562294,24.33285 32.472087,23.628397 32.2,23.339 Z" />' +
    '</svg>',
  "ico_chevron_left": '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke-width="0" style="fill:currentColor;stroke:currentColor">' +
    '<path d="M 34.553831,3.2604892 C 35.88223,1.8347377 33.961008,0.03934236 32.49031,1.609504 L 13.896241,21.461088 c -1.194866,1.275675 -1.195108,3.809407 0,5.086873 l 18.642574,19.927291 c 1.320824,1.411847 3.26137,-0.314512 1.905376,-1.771041 L 15.716145,24.587656 c -0.233468,-0.250777 -0.144206,-0.954182 0.12503,-1.243148 z" />' +
    '</svg>',
  "ico_chevron_up": '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke-width="0" style="fill:currentColor;stroke:currentColor">' +
    '<path d="m 44.73951,34.553831 c 1.425752,1.328399 3.221147,-0.592823 1.650986,-2.063521 L 26.538912,13.896241 c -1.275675,-1.194866 -3.809407,-1.195108 -5.086873,0 L 1.524748,32.538815 c -1.41184698,1.320824 0.314512,3.26137 1.771041,1.905376 L 23.412344,15.716145 c 0.250777,-0.233468 0.954182,-0.144206 1.243148,0.12503 z" />' +
    '</svg>',
  "ico_chevron_down": '<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke-width="0" style="fill:currentColor;stroke:currentColor">' +
    '<path d="m 44.73951,13.446169 c 1.425752,-1.328399 3.221147,0.592823 1.650986,2.063521 L 26.538912,34.103759 c -1.275675,1.194866 -3.809407,1.195108 -5.086873,0 L 1.5247482,15.461185 c -1.411847,-1.320824 0.314512,-3.26137 1.771041,-1.905376 L 23.412344,32.283855 c 0.250777,0.233468 0.954182,0.144206 1.243148,-0.12503 z" />' +
    '</svg>',

};

function fillIcons() {
  let eicons = document.querySelectorAll('.ico');
  eicons.forEach(e => {
    e.innerHTML = icons[e.dataset.icon];
  });
}

fillIcons();

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*.ico {
  width: 48px;
  height: 48px;
}

*.ico svg {
  pointer-events: none;
}

.ico:first-child {
  width: 96px;
  height: 96px;
}

.ico[data-icon=ico_chevron_left] svg {
  color: blue;
}

.ico:nth-child(3) svg {
  background-color: yellow;
}

.ico:nth-child(4) svg {
  stroke-width: 4px;
}

<div class="ico" data-icon="ico_chevron_right"></div>
<div class="ico" data-icon="ico_chevron_left"></div>
<div class="ico" data-icon="ico_chevron_up"></div>
<div class="ico" data-icon="ico_chevron_down"></div>

If you need SVG icons, go the modern Native JavaScript Web Components JSWC route

customElements.define("svg-icon", class extends HTMLElement {
  connectedCallback(){
    this.innerHTML = '<svg viewBox="0 0 48 48" stroke-width="0" style="fill:currentColor;stroke:currentColor">'+
    {
      "chevron_right": '<path d="M 13.289176,3.2250635 C 11.946709,1.7971882 13.888277,-8.8165624e-4 15.37455,1.5716189 L 34.165531,21.452775 c 1.207519,1.277575 1.207764,3.815081 0,5.09445 l -18.84,19.956976 c -1.334812,1.41395 -3.295908,-0.31498 -1.925554,-1.773679 L 32.326354,24.584 C 32.562294,24.33285 32.472087,23.628397 32.2,23.339 Z" />',
      "chevron_left": '<path d="M 34.553831,3.2604892 C 35.88223,1.8347377 33.961008,0.03934236 32.49031,1.609504 L 13.896241,21.461088 c -1.194866,1.275675 -1.195108,3.809407 0,5.086873 l 18.642574,19.927291 c 1.320824,1.411847 3.26137,-0.314512 1.905376,-1.771041 L 15.716145,24.587656 c -0.233468,-0.250777 -0.144206,-0.954182 0.12503,-1.243148 z" />',
      "chevron_up": '<path d="m 44.73951,34.553831 c 1.425752,1.328399 3.221147,-0.592823 1.650986,-2.063521 L 26.538912,13.896241 c -1.275675,-1.194866 -3.809407,-1.195108 -5.086873,0 L 1.524748,32.538815 c -1.41184698,1.320824 0.314512,3.26137 1.771041,1.905376 L 23.412344,15.716145 c 0.250777,-0.233468 0.954182,-0.144206 1.243148,0.12503 z" />',
      "chevron_down": '<path d="m 44.73951,13.446169 c 1.425752,-1.328399 3.221147,0.592823 1.650986,2.063521 L 26.538912,34.103759 c -1.275675,1.194866 -3.809407,1.195108 -5.086873,0 L 1.5247482,15.461185 c -1.411847,-1.320824 0.314512,-3.26137 1.771041,-1.905376 L 23.412344,32.283855 c 0.250777,0.233468 0.954182,0.144206 1.243148,-0.12503 z" />'
    }[this.getAttribute("is")] +
    `</svg>`;
  }
});

svg-icon svg {
  width: 48px;
  height: 48px;
}

svg-icon[is="chevron_left"] svg {
  color: blue;
}

svg-icon:nth-child(3) svg {
  background-color: yellow;
}

svg-icon:nth-child(4) svg {
  stroke-width: 4px;
}

<svg-icon is="chevron_right"></svg-icon>
<svg-icon is="chevron_left"></svg-icon>
<svg-icon is="chevron_up"></svg-icon>
<svg-icon is="chevron_down"></svg-icon>

Please signup or login to give your own answer.

Click here to cancel reply.