fluent-ui - Fluent ui React northstar 的自定义图标使用 svg

Question

我正在使用 yarn fluentui/react-northstar，我需要使用 svg 添加自定义图标，如https://fluentsite.z22.web.core.windows.net/0.53.0/icon-viewer。

是否有适当的方法或指南来添加自定义图标？

Answer 1

你看过这篇博文吗？https://medium.com/swlh/fluentui-react-how-we-cut-more-than-30-of-components-bundle-size-by-creating-icons-package-474019d3123

这意味着该片段创建了一个新的 SVG 图标。

import { createSvgIcon } from "@fluentui/react-northstar";
const RobotIcon = createSvgIcon({
  svg: ({ classes, props }) => (
    <svg viewBox="0 0 16 16" className={classes.svg}>{...}</svg>
  ),
  displayName: 'RobotIcon',
});

我还没有测试它，因为我目前正在寻找对 gif 图像做同样的事情。