Custom icon for Fluent ui React northstar using svg

I am using yarn 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.

is there proper way or guideline to do add custom icons?

Solution

Have you seen this blog post? https://medium.com/swlh/fluentui-react-how-we-cut-more-than-30-of-components-bundle-size-by-creating-icons-package-474019d3123

It implies that this snippet creates a new SVG icon.

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

I haven't test it though, as I am currently looking to do the same with a gif image.