如何创建和管理 SVG 图标系统 - 面试题

SVG 图标系统是现代 Web 开发中的重要组成部分。以下是创建和管理 SVG 图标系统的最佳实践：

1. SVG Sprite 技术 将多个图标合并到一个 SVG 文件中，减少 HTTP 请求。

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. 使用 SVG Sprite 在 HTML 中引用图标。

html
<!-- 引用图标文件 -->
<body>
  <!-- 隐藏的 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>
  
  <!-- 使用图标 -->
  <button>
    <svg width="24" height="24">
      <use href="#icon-home" />
    </svg>
    首页
  </button>
  
  <button>
    <svg width="24" height="24">
      <use href="#icon-user" />
    </svg>
    用户
  </button>
</body>

3. 内联 SVG 图标 直接在 HTML 中内联 SVG 代码。

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>
  首页
</button>

4. CSS 图标类 使用 CSS 类管理图标样式。

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-primary {
  color: #3498db;
}

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

.icon-warning {
  color: #f39c12;
}

.icon-danger {
  color: #e74c3c;
}

5. React 组件封装 在 React 中封装 SVG 图标组件。

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;

// 使用示例
<Icon name="home" size={24} color="#3498db" />
<Icon name="user" size={32} />

6. Vue 组件封装 在 Vue 中封装 SVG 图标组件。

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>

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

7. 自动化工具 使用工具自动生成图标系统。

使用 SVGO 优化：

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

使用 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. 最佳实践

性能优化：

使用 SVG Sprite 减少 HTTP 请求
优化 SVG 文件大小（SVGO）
首屏图标内联，其他延迟加载
使用 gzip 压缩

可访问性：

添加 aria-hidden="true"（装饰性图标）
添加 aria-label（功能性图标）
使用 role="img"
支持键盘导航

维护性：

统一命名规范
使用组件封装
版本控制图标库
文档化图标使用

响应式设计：

使用 viewBox 实现响应式
通过 CSS 控制尺寸
支持不同屏幕密度
测试各种设备