106 lines
3.9 KiB
JavaScript
106 lines
3.9 KiB
JavaScript
import * as React from 'react';
|
|
import { __styles, makeStaticStyles, mergeClasses } from "@griffel/react";
|
|
import { useIconState } from '../useIconState';
|
|
import { fontIconClassName } from '../constants';
|
|
import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
|
|
import fontFilledWoff from './FluentSystemIcons-Filled.woff';
|
|
import fontFilledWoff2 from './FluentSystemIcons-Filled.woff2';
|
|
import fontRegularTtf from './FluentSystemIcons-Regular.ttf';
|
|
import fontRegularWoff from './FluentSystemIcons-Regular.woff';
|
|
import fontRegularWoff2 from './FluentSystemIcons-Regular.woff2';
|
|
import fontLightTtf from './FluentSystemIcons-Light.ttf';
|
|
import fontLightWoff from './FluentSystemIcons-Light.woff';
|
|
import fontLightWoff2 from './FluentSystemIcons-Light.woff2';
|
|
import fontOneSizeTtf from './FluentSystemIcons-Resizable.ttf';
|
|
import fontOneSizeWoff from './FluentSystemIcons-Resizable.woff';
|
|
import fontOneSizeWoff2 from './FluentSystemIcons-Resizable.woff2';
|
|
const FONT_FAMILY_MAP = {
|
|
[0 /* Filled */]: 'FluentSystemIconsFilled',
|
|
[1 /* Regular */]: 'FluentSystemIconsRegular',
|
|
[2 /* Resizable */]: 'FluentSystemIcons'
|
|
};
|
|
const useStaticStyles = makeStaticStyles(`
|
|
@font-face {
|
|
font-family: ${FONT_FAMILY_MAP[0 /* Filled */]};
|
|
font-display: "block";
|
|
src: url(${JSON.stringify(fontFilledWoff2)}) format("woff2"),
|
|
url(${JSON.stringify(fontFilledWoff)}) format("woff"),
|
|
url(${JSON.stringify(fontFilledTtf)}) format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: ${FONT_FAMILY_MAP[1 /* Regular */]};
|
|
font-display: "block";
|
|
src: url(${JSON.stringify(fontRegularWoff2)}) format("woff2"),
|
|
url(${JSON.stringify(fontRegularWoff)}) format("woff"),
|
|
url(${JSON.stringify(fontRegularTtf)}) format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: ${FONT_FAMILY_MAP[3 /* Light */]};
|
|
src: url(${JSON.stringify(fontLightWoff2)}) format("woff2"),
|
|
url(${JSON.stringify(fontLightWoff)}) format("woff"),
|
|
url(${JSON.stringify(fontLightTtf)}) format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: ${FONT_FAMILY_MAP[2 /* Resizable */]};
|
|
font-display: "block";
|
|
src: url(${JSON.stringify(fontOneSizeWoff2)}) format("woff2"),
|
|
url(${JSON.stringify(fontOneSizeWoff)}) format("woff"),
|
|
url(${JSON.stringify(fontOneSizeTtf)}) format("truetype");
|
|
}
|
|
`);
|
|
const useRootStyles = __styles({
|
|
"0": {
|
|
"Bahqtrf": "f9dzkbp"
|
|
},
|
|
"1": {
|
|
"Bahqtrf": "f1krtbx5"
|
|
},
|
|
"2": {
|
|
"Bahqtrf": "f1sxfq9t"
|
|
},
|
|
"3": {
|
|
"Bahqtrf": "fgtzeza"
|
|
},
|
|
"root": {
|
|
"mc9l5x": "f14t3ns0",
|
|
"B80ckks": "fmd4ok8",
|
|
"Bg96gwp": "fne0op0",
|
|
"sj55zd": "f303qgw",
|
|
"ycbfsm": "fg4l7m0"
|
|
}
|
|
}, {
|
|
"d": [".f9dzkbp{font-family:FluentSystemIconsFilled;}", ".f1krtbx5{font-family:FluentSystemIconsRegular;}", ".f1sxfq9t{font-family:FluentSystemIcons;}", ".fgtzeza{font-family:FluentSystemIconsLight;}", ".f14t3ns0{display:inline-block;}", ".fmd4ok8{font-style:normal;}", ".fne0op0{line-height:1em;}", ".f303qgw{color:currentColor;}"],
|
|
"t": ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}"]
|
|
});
|
|
export function createFluentFontIcon(displayName, codepoint, font, fontSize, options) {
|
|
const Component = props => {
|
|
useStaticStyles();
|
|
const styles = useRootStyles();
|
|
const className = mergeClasses(styles.root, styles[font], fontIconClassName, props.className);
|
|
const state = useIconState({
|
|
...props,
|
|
className
|
|
}, {
|
|
flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl
|
|
});
|
|
// We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`
|
|
if (props.primaryFill && props.primaryFill.toLowerCase() !== 'currentcolor') {
|
|
state.style = {
|
|
...state.style,
|
|
color: props.primaryFill
|
|
};
|
|
}
|
|
if (fontSize) {
|
|
state.style = {
|
|
...state.style,
|
|
fontSize
|
|
};
|
|
}
|
|
return React.createElement("i", Object.assign({}, state), codepoint);
|
|
};
|
|
Component.displayName = displayName;
|
|
Component.codepoint = codepoint;
|
|
return Component;
|
|
} |