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

【问题标题】：Custom icon for Fluent ui React northstar using svgFluent ui React northstar 的自定义图标使用 svg
【发布时间】：2021-04-30 07:04:10
【问题描述】：

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

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

【问题讨论】：

标签： fluent-ui fluentui-react

【解决方案1】：

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

这意味着这个 sn-p 创建了一个新的 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 图像做同样的事情。

【讨论】：