Segoe Fluent Icons字体缺失图标怎么办？以Access Time为例

如果碰到Segoe Fluent Icons字体里找不到需要的图标（比如你说的Access Time），直接把对应SVG文件放进项目里导入使用是非常靠谱的方案，理由很实在：

• 风格统一不违和：用官方Fluent Design的SVG，能和已用的Segoe Fluent Icons保持一模一样的视觉风格，不会出现图标画风割裂的问题。
• 想改就改更灵活：SVG是矢量文件，不管调尺寸、改颜色还是改描边粗细，直接用CSS就能搞定，比字体图标自由度高多了。
• 少踩依赖坑：不用额外装第三方图标库或者加载多余字体包，既省资源，也不会因为字体加载失败导致图标变成方块。

操作起来也简单：

1. 从官方Fluent Design资源里拿到对应图标的SVG（注意选对填充/描边样式，和你现有图标保持一致）。
2. 把SVG放到项目的静态资源文件夹里（比如src/assets/icons/）。
3. 在代码里直接用：

   // React示例
   import AccessTime from '../assets/icons/access-time.svg';
   
   function MyPage() {
     return <img src={AccessTime} alt="时间" className="icon-size" />;
   }
   

   要是想直接控制样式，也可以把SVG内联写进组件：

   function AccessTimeIcon() {
     return (
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
       </svg>
     );
   }
   

当然，如果你项目本身在用Fluent UI组件库，也可以直接用库里的图标组件，但导入独立SVG是最轻量、无额外依赖的选择。

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