import * as React from 'react';
import { FontIcon } from '@fluentui/react/lib/Icon';
import { mergeStyles, registerIcons } from '@fluentui/react/lib/Styling';
// Use the registerIcons api from the styling package to register custom svg icons so that they
// can be used by the Icon component (or in anything that renders Icons, like Buttons).
registerIcons({
icons: {
'onedrive-svg': (
),
'yammer-svg': (
),
'borderblinds-svg': (
),
},
});
const iconClass = mergeStyles({
fontSize: 50,
height: 50,
width: 50,
margin: '0 25px',
});
const BorderBlindsIcon: React.FunctionComponent<{ color1?: string; color2?: string; color3?: string }> = props => {
const { color1 = 'red', color2 = 'green', color3 = 'blue' } = props;
// FontIcon is an optimized variant of standard Icon.
// You could also use the standard Icon here.
// This example demonstrates how to expose the SVG itself as an image with
// an accessible name. To do that, set aria-label or aria-labelledby directly
// on the SVG, and set aria-hidden to undefined or false on the FontIcon.
return (
);
};
export const IconSvgExample: React.FunctionComponent = () => {
// FontIcon is an optimized variant of standard Icon.
// You could also use the standard Icon here.
// Provide an `aria-label` for screen reader users if the icon is not accompanied by text
// that conveys the same meaning.
return (