Coding guidelines~SVG imports

Using SVGs in Cardboard

There are three methods for using an SVG image in a React component. The recommended pattern is to use the Fluent UI Image component. Refer to the Svg Test Story component for usage details.

Example:

import { ReactComponent as AccessRestrictedComponent } from '../../Resources/Static/accessRestricted.svg';
import Error from '../../Resources/Static/error.svg';

const SvgTest = () => {
  return (
    // Fluent UI <Image /> component
    <Image src={Error} height={100} /> // Recommended
    
    // HTML <img/> tag
    <img src={Error} style={{ height: 100, width: 100 }} />
    
    // Direct react component
    <AccessRestrictedComponent />
  );
};