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

Question

我正在使用纱线fluentui/react-northstar and i need to add custom icon using svg as this https://fluentsite.z22.web.core.windows.net/0.53.0/icon-viewer。

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

Answer 1

你看过这个博客吗post？ 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 图像做同样的事情。

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

Custom icon for Fluent ui React northstar using svg

fluent-ui

fluentui-react