前端项目中图标使用的最佳实践与性能优化技巧

设计师艺涵发布于 2026-03-01 22:02:06 组件阅读 2,466

原创

本文链接：https://www.jztheme.com/blog/component/29827.html

设计师艺涵

赞 3 收藏反馈

我的写法，亲测靠谱

在前端项目里用图标，说简单也简单，说坑也真不少。我一开始也是直接拿 SVG 文件往项目里塞，或者用 iconfont 一通复制粘贴，结果后期维护起来简直噩梦。现在我基本固定了一套做法，稳定、好维护、还能按需加载，下面说说我现在的方案。

我一般用 @svgr/webpack 或者 Vite 的 vite-plugin-svgr 插件，把 SVG 当成 React 组件直接导入。这样做的好处是：图标变成真正的组件，能传 props、能加样式、还能 Tree Shaking。比如：

import { ReactComponent as SearchIcon } from './icons/search.svg';

function Header() {
  return (
    <div>
      <SearchIcon style={{ width: 20, height: 20, color: 'currentColor' }} />
    </div>
  );
}

注意这里用了 ReactComponent 命名导入，这是 SVGR 的约定。图标内部的 fill 或 stroke 我会统一改成 currentColor，这样就能通过父级的 color 控制颜色，不用每个图标单独写 CSS。这个小改动省了我大量时间。

另外，我会把所有图标统一放在 src/components/Icon/ 目录下，封装一层统一入口：

// src/components/Icon/index.js
import { ReactComponent as Search } from './search.svg';
import { ReactComponent as Close } from './close.svg';
import { ReactComponent as Menu } from './menu.svg';

const icons = {
  search: Search,
  close: Close,
  menu: Menu,
};

export default function Icon({ name, size = 16, ...props }) {
  const Component = icons[name];
  if (!Component) {
    console.warn(Icon &quot;${name}&quot; not found);
    return null;
  }
  return <Component width={size} height={size} {...props} />;
}

用的时候就一行：

<Icon name="search" size={20} />

这种写法的好处是：未来要换图标库、加 loading 状态、统一加 aria-label，都只需要改这一个文件。而且类型安全（配合 TypeScript）也能做得很舒服。

这几种错误写法，别再踩坑了

我见过太多人还在用这些方式，结果后期改得想哭：

直接 inline SVG 字符串：比如 dangerouslySetInnerHTML 插入 SVG 内容。看起来快，但没法响应式、不能继承颜色、还容易 XSS。除非你完全控制数据源，否则别碰。
用 iconfont 的 unicode 方式：像  这种。字体加载失败就变方块，而且无法用 CSS 控制多色图标。现在都 2024 年了，真没必要。
把所有 SVG 拼成一张雪碧图：以前为了减少请求这么干，但现在 HTTP/2 + 按需加载更香。雪碧图维护成本高，改一个图标要重做整张图，还不能 Tree Shaking。
直接 import SVG 当图片用：比如 import searchIcon from './search.svg' 然后 <img src={searchIcon} />。这样虽然能显示，但失去了 SVG 的优势——不能改颜色、不能嵌入文本、不能用 CSS 动画控制路径。

最惨的一次是我接手一个老项目，图标全用 base64 内联在 CSS 里，改个颜色要重新生成几十个 base64，还得手动替换。那几天我每天都在怀疑人生。

实际项目中的坑

就算用了 SVGR，也有不少细节要注意：

第一，SVG 源文件要清理干净。很多设计师导出的 SVG 带一堆无用的 id、class、甚至 <style> 标签。这些在 React 组件里会引发警告，甚至冲突。我一般用 SVGOMG 压一下，或者写个脚本批量处理。

第二，注意 viewBox 和宽高比。有些 SVG 没写 viewBox，或者宽高写死，导致缩放变形。我要求所有图标必须有 viewBox="0 0 24 24"（或其他标准尺寸），然后在组件里用 width 和 height 控制大小，不依赖 SVG 内部的宽高属性。

第三，别忘了无障碍支持。图标如果是装饰性的，加 aria-hidden="true"；如果是功能性的（比如搜索按钮里的放大镜），得配 aria-label。我在封装的 Icon 组件里默认加了 aria-hidden，但允许覆盖：

export default function Icon({ name, size = 16, 'aria-label': ariaLabel, ...props }) {
  const Component = icons[name];
  if (!Component) {
    console.warn(Icon &quot;${name}&quot; not found);
    return null;
  }
  const ariaProps = ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-hidden': 'true' };
  return <Component width={size} height={size} {...ariaProps} {...props} />;
}

第四，构建体积要监控。虽然 SVGR 支持 Tree Shaking，但如果图标太多，还是会膨胀。我一般超过 50 个图标就考虑动态加载，或者用 Webpack 的 magic comment 拆包。不过大多数项目没那么多图标，所以先保证开发体验，再优化体积。