Posted on

A Snippet to See all SVGs in a Sprite

I think of an SVG sprite as this:

<svg display="none">
  <symbol id="icon-one"> ... <symbol>
  <symbol id="icon-two"> ... <symbol>
  <symbol id="icon-three"> ... <symbol>
</svg>

I was long a fan of that approach for icon systems (<use>-ing them as needed), but I favor including the SVGs directly as needed these days. Still, sprites are fine, and fairly popular.

What if you have a sprite, and you wanna see what's in it?

Here's a tiny bit of JavaScript that will loop through all the symbols it finds and inject a SVG that uses each one...

const sprite = document.querySelector("#sprite");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", `
  <svg width="50" height="50">
     <use xlink:href="#${symbol.id}" />
  <svg>
`)
});

See the Pen
Visually turn a sprite into individual SVGs by Chris Coyier (@chriscoyier)
on CodePen.

That's all.

The post A Snippet to See all SVGs in a Sprite appeared first on CSS-Tricks.

Posted on

iconsvg.xyz

There is a lot to like about Gaddafi Rusli's ICONSVG.

  1. It provides inline <svg>, which is the most generically useful way to deliver them, and probably how they should be used anyway. Each icon is a tiny amount of SVG and I'd bet they were all hand-golfed.
  2. They are all stroke-based, so they can be beefed up or slimmed down as needed.
  3. The stroke-linecap and stroke-linejoin properties can be adjusted, which presents an opportunity to make their edges sharper or more rounded. I often find icons that are close to what I want, but the weight isn't right or the edges are either too sharp or too round. This quick and easy configuration is awesome.

Direct Link to Article — Permalink

The post iconsvg.xyz appeared first on CSS-Tricks.

Posted on

The ineffectiveness of lonely icons

Icons are great and all, but as we've been shown time and time again, they often don't do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people who browse visually, like the situation Matt Wilcox describes with his mother in this linked article.

I'm a fan of this markup pattern, including the inline SVG as the preferred icon system:

<button>
  <svg class="icon icon-cart" viewBox="0 0 100 100" aria-hidden="true">
    <!-- all your hot svg action, like: -->
    <path d=" ... " />
  </svg>
  Add to Cart
</button>

Or, if the button is really a link and not a JavaScript-powered action, I'll use an <a href=""> instead of a <button> wrapper.

Direct Link to Article — Permalink

The post The ineffectiveness of lonely icons appeared first on CSS-Tricks.