"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconColorExample = void 0;
var React = require("react");
var Icon_1 = require("@fluentui/react/lib-commonjs/Icon");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var iconClass = Styling_1.mergeStyles({
    fontSize: 50,
    height: 50,
    width: 50,
    margin: '0 25px',
});
var classNames = Styling_1.mergeStyleSets({
    deepSkyBlue: [{ color: 'deepskyblue' }, iconClass],
    greenYellow: [{ color: 'greenyellow' }, iconClass],
    salmon: [{ color: 'salmon' }, iconClass],
});
var IconColorExample = function () {
    // 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 (React.createElement("div", null,
        React.createElement(Icon_1.FontIcon, { "aria-label": "Compass", iconName: "CompassNW", className: classNames.deepSkyBlue }),
        React.createElement(Icon_1.FontIcon, { "aria-label": "Dictionary", iconName: "Dictionary", className: classNames.greenYellow }),
        React.createElement(Icon_1.FontIcon, { "aria-label": "Train", iconName: "TrainSolid", className: classNames.salmon })));
};
exports.IconColorExample = IconColorExample;
//# sourceMappingURL=Icon.Color.Example.js.map