如何在Gatsby.js中使用SVG Sprite导入图标及单个图标？

Great question! SVG sprites are a lightweight, scalable way to manage icons in Gatsby—way better than icon fonts for performance and flexibility. Let’s break down both scenarios you’re asking about:

1. Using an Existing SVG Sprite File to Import Icons #

If you already have a pre-built SVG sprite (a single file containing all your icons as <symbol> elements), here’s how to use it:

Step 1: Place the Sprite in Your Static Folder #

Drop your sprite file (e.g., icons-sprite.svg) into Gatsby’s static directory. Files here are served directly, so you can reference them by path without extra configuration.

Step 2: Create a Reusable Icon Component #

Make a component to streamline using icons from the sprite. This keeps your code DRY:

import React from 'react';

const SpriteIcon = ({ iconId, className, ariaLabel }) => (
  <svg 
    className={className} 
    aria-label={ariaLabel} 
    aria-hidden={!ariaLabel}
    viewBox="0 0 24 24" // Match your sprite's default viewBox
  >
    <use href={`/icons-sprite.svg#${iconId}`} />
  </svg>
);

export default SpriteIcon;

Step 3: Use the Component Anywhere #

Call the component with the ID of the icon you want from the sprite:

import SpriteIcon from '../components/SpriteIcon';

const Navbar = () => (
  <nav>
    <SpriteIcon iconId="icon-home" className="nav-icon" ariaLabel="Home" />
    <SpriteIcon iconId="icon-search" className="nav-icon" ariaLabel="Search" />
  </nav>
);

2. Creating an SVG Sprite from Individual Icons #

If you have separate SVG files for each icon and want to bundle them into a sprite (like the method referenced in that CSS Tricks article), here are two reliable approaches:

Option A: Manual Sprite Creation (Full Control) #

Perfect if you only have a few icons and want to manage the sprite yourself:

1. Prepare Your Individual SVGs:

   • Open each SVG file, remove any width/height attributes, and add a unique id to the root <svg> element.
   • Wrap each icon in a <symbol> tag (keep the viewBox attribute intact!).

2. Build the Sprite File:
   Combine all symbols into a single icons-sprite.svg file in your static folder:

   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="icon-heart" viewBox="0 0 24 24">
       <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
     </symbol>
     <symbol id="icon-star" viewBox="0 0 24 24">
       <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
     </symbol>
   </svg>
   

3. Use the Sprite:
   Follow the same component approach from Section 1 to reference each icon by its id.

Option B: Automated Sprite Generation (For Large Icon Sets) #

Use a Gatsby plugin to handle sprite creation automatically, so you don’t have to edit files manually:

1. Install the Plugin:

   npm install gatsby-plugin-svg-sprite
   # or
   yarn add gatsby-plugin-svg-sprite
   

2. Configure in gatsby-config.js:
   Add the plugin to your config, pointing to your icons directory:

   module.exports = {
     plugins: [
       {
         resolve: 'gatsby-plugin-svg-sprite',
         options: {
           icon: {
             viewBox: '0 0 24 24', // Match your icons' default viewBox
           },
           path: `${__dirname}/src/icons`, // Path to your individual SVG files
         },
       },
     ],
   };
   

3. Add Icons to the Directory:
   Drop your individual SVG files (e.g., heart.svg, star.svg) into src/icons. The plugin will generate a sprite and make them available by filename.

4. Use the Icons:
   Import the plugin’s built-in component to use your icons:

   import { SpriteIcon } from 'gatsby-plugin-svg-sprite';
   
   const Footer = () => (
     <footer>
       <SpriteIcon name="heart" className="footer-icon" ariaLabel="Like" />
       <SpriteIcon name="star" className="footer-icon" ariaLabel="Rate" />
     </footer>
   );
   

Quick Tips for Success #

• Always keep the viewBox attribute on your SVGs/symbols—this ensures icons scale correctly.
• Style icons with CSS: target the <svg> class to adjust fill, stroke, width, or height.
• For accessibility: use aria-label or a <title> element if the icon conveys meaning (not just decoration).

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