How to create and manage SVG icon systems - 面试题

SVG icon systems are an important part of modern web development. Here are best practices for creating and managing SVG icon systems:

1. SVG Sprite Technique Merge multiple icons into one SVG file to reduce HTTP requests.

svg
<!-- icons.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
  </symbol>
  
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
  </symbol>
  
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 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"/>
  </symbol>
</svg>

2. Using SVG Sprite Reference icons in HTML.

html
<!-- Reference icon file -->
<body>
  <!-- Hidden SVG sprite -->
  <svg style="display: none;">
    <use href="icons.svg#icon-home" />
    <use href="icons.svg#icon-user" />
    <use href="icons.svg#icon-search" />
  </svg>
  
  <!-- Use icons -->
  <button>
    <svg width="24" height="24">
      <use href="#icon-home" />
    </svg>
    Home
  </button>
  
  <button>
    <svg width="24" height="24">
      <use href="#icon-user" />
    </svg>
    User
  </button>
</body>

3. Inline SVG Icons Inline SVG code directly in HTML.

html
<button>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
  </svg>
  Home
  </button>

4. CSS Icon Classes Manage icon styles with CSS classes.

css
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

/* Icon colors */
.icon-primary {
  color: #3498db;
}

.icon-success {
  color: #2ecc71;
}

.icon-warning {
  color: #f39c12;
}

.icon-danger {
  color: #e74c3c;
}

5. React Component Encapsulation Encapsulate SVG icon components in React.

jsx
// Icon.jsx
import React from 'react';

const Icon = ({ name, size = 24, color = 'currentColor', className = '' }) => {
  const icons = {
    home: (
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    ),
    user: (
      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
    ),
    search: (
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 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" />
    )
  };

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill={color}
      className={`icon ${className}`}
      aria-hidden="true"
    >
      {icons[name]}
    </svg>
  );
};

export default Icon;

// Usage example
<Icon name="home" size={24} color="#3498db" />
<Icon name="user" size={32} />

6. Vue Component Encapsulation Encapsulate SVG icon components in Vue.

vue
<!-- Icon.vue -->
<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    :fill="color"
    class="icon"
    aria-hidden="true"
  >
    <slot />
  </svg>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    size: {
      type: Number,
      default: 24
    },
    color: {
      type: String,
      default: 'currentColor'
    }
  }
}
</script>

<!-- Usage example -->
<Icon :size="24" color="#3498db">
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</Icon>

7. Automation Tools Use tools to automatically generate icon systems.

Using SVGO for optimization:

bash
npx svgo -f ./icons -o ./optimized

Using Iconify:

html
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<span class="iconify" data-icon="mdi:home"></span>

8. Best Practices

Performance Optimization:

Use SVG Sprite to reduce HTTP requests
Optimize SVG file sizes (SVGO)
Inline first-screen icons, lazy load others
Use gzip compression

Accessibility:

Add aria-hidden="true" (decorative icons)
Add aria-label (functional icons)
Use role="img"
Support keyboard navigation

Maintainability:

Unified naming conventions
Use component encapsulation
Version control icon library
Document icon usage

Responsive Design:

Use viewBox for responsiveness
Control dimensions via CSS
Support different screen densities
Test on various devices