如何通过CSS调用SVG Sprite？

Hey there! Great question—you absolutely can reference SVG sprite icons using CSS background-image, but there are a few key details to nail down to make it work reliably. Let’s walk through how to do this correctly, along with some caveats to keep in mind.

1. Fix the CSS Syntax First #

Your initial example is missing a critical piece: the url() wrapper around the sprite path. CSS requires this for background-image values. Here’s the corrected CSS, plus some essential properties to ensure the icon displays properly:

.icon {
  background-image: url("/assets/images/icons-sprite.svg#icon-name");
  height: 30px;
  width: 30px; /* Don’t skip this—SVGs need a defined container size */
  background-size: contain; /* Ensures the icon scales without clipping */
  background-repeat: no-repeat;
  background-position: center; /* Centers the icon in the container */
}

2. Update Your SVG Sprite for Compatibility #

To get the fragment identifier (#icon-name) working across browsers, add the xmlns:xlink namespace to your sprite’s root <svg> element. This helps older browsers resolve the symbol correctly. Here’s the adjusted sprite structure:

<svg width="0" height="0" class="hidden" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol viewBox="0 0 24 24" id="icon-name">
    <path ... fill="currentColor"></path>
  </symbol>
</svg>

Pro tip: Using fill="currentColor" lets you inherit the text color of the .icon element—just set color: #your-desired-color; on the class to change the icon’s color instantly!

3. Key Limitations to Consider #

While this method works well for many cases, it’s not a perfect replacement for the <use> approach. Here’s what you need to know:

• Browser Support: Modern browsers handle this flawlessly, but older browsers like IE11 struggle with fragment identifiers in SVG background URLs. If IE11 support is required, stick with the <use> method or add a PNG fallback.
• Styling Flexibility: The <use> method lets you target individual SVG elements (like <path>) directly with CSS to adjust stroke width, opacity, etc. With background-image, your styling options are limited to background properties unless you inline CSS inside the sprite’s <symbol>.
• Accessibility: If the icon isn’t purely decorative, <svg> with <use> is better for accessibility—you can add <title> or aria-label attributes that screen readers can parse. For decorative icons using background-image, make sure to add aria-hidden="true" to the <div> to avoid confusing assistive tech.

Working Example #

Let’s put all this together with a concrete example:

HTML #

<!-- Decorative icon: add aria-hidden -->
<div class="icon icon-home" aria-hidden="true"></div>

<!-- Non-decorative icon: use a screen-reader label -->
<div class="icon icon-search" aria-label="Search"></div>

CSS #

.icon {
  height: 30px;
  width: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #2d3748; /* Sets icon color via currentColor */
}

.icon-home {
  background-image: url("/assets/images/icons-sprite.svg#icon-home");
}

.icon-search {
  background-image: url("/assets/images/icons-sprite.svg#icon-search");
}

Updated SVG Sprite #

<svg width="0" height="0" class="hidden" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol viewBox="0 0 24 24" id="icon-home">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"></path>
  </symbol>
  <symbol viewBox="0 0 24 24" id="icon-search">
    <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"></path>
  </symbol>
</svg>

内容的提问来源于stack exchange，提问作者Kapil Gehlot