diff --git a/change/@uifabric-experiments-2020-04-13-09-19-23-feat-add-react-icons-package.json b/change/@uifabric-experiments-2020-04-13-09-19-23-feat-add-react-icons-package.json new file mode 100644 index 00000000000000..22663d80c0e659 --- /dev/null +++ b/change/@uifabric-experiments-2020-04-13-09-19-23-feat-add-react-icons-package.json @@ -0,0 +1,8 @@ +{ + "type": "none", + "comment": "Minor prettier changes.", + "packageName": "@uifabric/experiments", + "email": "dzearing@microsoft.com", + "dependentChangeType": "none", + "date": "2020-04-13T16:18:43.499Z" +} \ No newline at end of file diff --git a/change/office-ui-fabric-react-2020-04-13-09-19-24-feat-add-react-icons-package.json b/change/office-ui-fabric-react-2020-04-13-09-19-24-feat-add-react-icons-package.json new file mode 100644 index 00000000000000..4c25558dc6d179 --- /dev/null +++ b/change/office-ui-fabric-react-2020-04-13-09-19-24-feat-add-react-icons-package.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "Adding SVG icon examples", + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-04-13T16:19:23.983Z" +} \ No newline at end of file diff --git a/packages/experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/UnifiedPeoplePickerPage.tsx b/packages/experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/UnifiedPeoplePickerPage.tsx index 9b6388f75e96f6..eb3bdc3bf21228 100644 --- a/packages/experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/UnifiedPeoplePickerPage.tsx +++ b/packages/experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/UnifiedPeoplePickerPage.tsx @@ -23,7 +23,7 @@ export class UnifiedPeoplePickerPage extends React.Component('!raw-loader!@uifabric/experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/UnifiedPeoplePicker.types.ts') + >('!raw-loader!@uifabric/experiments/src/components/UnifiedPicker/UnifiedPeoplePicker/UnifiedPeoplePicker.types.ts'), ]} /> } diff --git a/packages/experiments/src/components/UnifiedPicker/UnifiedPicker.styles.ts b/packages/experiments/src/components/UnifiedPicker/UnifiedPicker.styles.ts index ad37dcd6ed6eb7..3195e0ffb2a887 100644 --- a/packages/experiments/src/components/UnifiedPicker/UnifiedPicker.styles.ts +++ b/packages/experiments/src/components/UnifiedPicker/UnifiedPicker.styles.ts @@ -9,7 +9,7 @@ export interface IUnifiedPickerStyles { const GlobalClassNames = { pickerText: 'ms-UnifiedPicker-text', - pickerInput: 'ms-UnifiedPicker-input' + pickerInput: 'ms-UnifiedPicker-input', }; export const getStyles = (props: IUnifiedPickerStyleProps): IUnifiedPickerStyles => { @@ -37,10 +37,10 @@ export const getStyles = (props: IUnifiedPickerStyleProps): IUnifiedPickerStyles minHeight: '32px', selectors: { '&:hover': { - borderColor: themeLight - } - } - } + borderColor: themeLight, + }, + }, + }, ], pickerInput: [ classNames.pickerInput, @@ -53,10 +53,10 @@ export const getStyles = (props: IUnifiedPickerStyleProps): IUnifiedPickerStyles margin: '1px', selectors: { '&::-ms-clear': { - display: 'none' - } - } - } - ] + display: 'none', + }, + }, + }, + ], }; }; diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json index 0113dc401c6d62..d282fc66ff7071 100644 --- a/packages/office-ui-fabric-react/package.json +++ b/packages/office-ui-fabric-react/package.json @@ -72,6 +72,7 @@ }, "dependencies": { "@fluentui/react-focus": "^7.1.13", + "@fluentui/react-icons": "^0.1.0", "@microsoft/load-themed-styles": "^1.10.26", "@uifabric/foundation": "^7.5.25", "@uifabric/icons": "^7.3.24", diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.doc.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.doc.tsx index 2e93b09ac82dc6..0bd2a69c64239e 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/Icon.doc.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.doc.tsx @@ -5,11 +5,13 @@ import { IDocPageProps } from '../../common/DocPage.types'; import { IconSvgExample } from './examples/Icon.Svg.Example'; import { IconColorExample } from './examples/Icon.Color.Example'; import { IconImageSheetExample } from './examples/Icon.ImageSheet.Example'; +import { IconSvgFactoryExample } from './examples/Icon.SvgFactory.Example'; const IconBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx') as string; const IconSvgExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx') as string; const IconColorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Color.Example.tsx') as string; const IconImageSheetExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.ImageSheet.Example.tsx') as string; +const IconSvgFactoryExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.SvgFactory.Example.tsx') as string; export const IconPageProps: IDocPageProps = { title: 'Icon', @@ -36,6 +38,11 @@ export const IconPageProps: IDocPageProps = { code: IconImageSheetExampleCode, view: , }, + { + title: 'Icon using svg factory', + code: IconSvgFactoryExampleCode, + view: , + }, ], overview: require('!raw-loader!office-ui-fabric-react/src/components/Icon/docs/IconOverview.md'), bestPractices: '', diff --git a/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.SvgFactory.Example.tsx b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.SvgFactory.Example.tsx new file mode 100644 index 00000000000000..3148af58ce643e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Icon/examples/Icon.SvgFactory.Example.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { OneDriveIcon, YammerIcon, BorderBlindsIcon } from '@fluentui/react-icons'; +import { mergeStyles } from 'office-ui-fabric-react/lib/Styling'; + +const rootClass = mergeStyles({ + display: 'flex', + selectors: { + '> *': { + height: 50, + width: 50, + marginRight: 25, + }, + }, +}); + +export const IconSvgFactoryExample: React.FunctionComponent = () => { + return ( +
+ + + +
+ ); +}; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Icon.SvgFactory.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Icon.SvgFactory.Example.tsx.shot new file mode 100644 index 00000000000000..a450917b70397e --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Icon.SvgFactory.Example.tsx.shot @@ -0,0 +1,104 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Component Examples renders Icon.SvgFactory.Example.tsx correctly 1`] = ` +
* { + height: 50px; + margin-right: 25px; + width: 50px; + } +> + + + + + + + + + + + + + + + + + + + + + + + +
+`; diff --git a/packages/office-ui-fabric-react/src/utilities/color/updateT.ts b/packages/office-ui-fabric-react/src/utilities/color/updateT.ts index 05bfa33eea3ea5..024bfb45639fb7 100644 --- a/packages/office-ui-fabric-react/src/utilities/color/updateT.ts +++ b/packages/office-ui-fabric-react/src/utilities/color/updateT.ts @@ -12,6 +12,6 @@ export function updateT(color: IColor, t: number): IColor { ...color, t, a, - str: _rgbaOrHexString(color.r, color.g, color.b, a, color.hex) + str: _rgbaOrHexString(color.r, color.g, color.b, a, color.hex), }; } diff --git a/packages/react-icons/.npmignore b/packages/react-icons/.npmignore new file mode 100644 index 00000000000000..418a6be209f2f5 --- /dev/null +++ b/packages/react-icons/.npmignore @@ -0,0 +1,32 @@ +*.api.json +*.config.js +*.log +*.nuspec +*.test.* +*.yml +.editorconfig +.gitattributes +.gitignore +.vscode +coverage +dist-storybook +dist/*.stats.html +dist/*.stats.json +dist/demo*.* +fabric-test* +gulpfile.js +images +index.html +jsconfig.json +node_modules +results +src/**/* +!src/**/examples/*.tsx +!src/**/docs/**/*.md +!src/**/*.types.ts +temp +tsconfig.json +tsd.json +tslint.json +typings +visualtests diff --git a/packages/react-icons/.npmrc b/packages/react-icons/.npmrc new file mode 100644 index 00000000000000..825c83e09df4da --- /dev/null +++ b/packages/react-icons/.npmrc @@ -0,0 +1,2 @@ +registry=https://registry.npmjs.org/ + diff --git a/packages/react-icons/.storybook/main.js b/packages/react-icons/.storybook/main.js new file mode 100644 index 00000000000000..2914f69af39061 --- /dev/null +++ b/packages/react-icons/.storybook/main.js @@ -0,0 +1,8 @@ +const custom = require('@uifabric/build/storybook/webpack.config'); + +module.exports = { + webpackFinal: config => { + return custom({ config }); + }, + addons: ['@storybook/addon-a11y/register'], +}; diff --git a/packages/react-icons/.storybook/manager.js b/packages/react-icons/.storybook/manager.js new file mode 100644 index 00000000000000..5044c88991160f --- /dev/null +++ b/packages/react-icons/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from '@storybook/addons'; + +addons.setConfig({ + showPanel: true, + panelPosition: 'right', +}); diff --git a/packages/react-icons/.storybook/preview.js b/packages/react-icons/.storybook/preview.js new file mode 100644 index 00000000000000..2db85558d226e8 --- /dev/null +++ b/packages/react-icons/.storybook/preview.js @@ -0,0 +1,25 @@ +import generateStoriesFromExamples from '@uifabric/build/storybook/generateStoriesFromExamples'; +import { configure, addParameters, addDecorator } from '@storybook/react'; +import { withA11y } from '@storybook/addon-a11y'; + +addDecorator(withA11y()); +addParameters({ + a11y: { + manual: true, + }, +}); + +const req = require.context('../src/components', true, /\.stories\.tsx$/); + +function loadStories() { + const stories = new Map(); + + req.keys().forEach(key => { + generateStoriesFromExamples({ key, req, stories }); + }); + + // convert stories Set to array + return [...stories.values()]; +} + +configure(loadStories, module); diff --git a/packages/react-icons/LICENSE b/packages/react-icons/LICENSE new file mode 100644 index 00000000000000..8d438c88e9121f --- /dev/null +++ b/packages/react-icons/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-icons + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-icons/README.md b/packages/react-icons/README.md new file mode 100644 index 00000000000000..c317c7af9e4ccd --- /dev/null +++ b/packages/react-icons/README.md @@ -0,0 +1,11 @@ +# @fluentui/react-icons + +**Icon components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** + +This package provides utilities for creating svg icons, as well as set of customizable Icons. + +To import ReactIcons components: + +```js +import { ComponentName } from '@fluentui/react-icons'; +``` diff --git a/packages/react-icons/config/tests.js b/packages/react-icons/config/tests.js new file mode 100644 index 00000000000000..f1e4a5670a217e --- /dev/null +++ b/packages/react-icons/config/tests.js @@ -0,0 +1,12 @@ +/** Jest test setup file. */ + +const { configure } = require('enzyme'); +const Adapter = require('enzyme-adapter-react-16'); + +// Mock requestAnimationFrame for React 16+. +global.requestAnimationFrame = callback => { + setTimeout(callback, 0); +}; + +// Configure enzyme. +configure({ adapter: new Adapter() }); diff --git a/packages/react-icons/jest.config.js b/packages/react-icons/jest.config.js new file mode 100644 index 00000000000000..8edc6ee6da6b85 --- /dev/null +++ b/packages/react-icons/jest.config.js @@ -0,0 +1,12 @@ +let { createConfig, resolveMergeStylesSerializer } = require('@uifabric/build/jest/jest-resources'); +let path = require('path'); + +const config = createConfig({ + setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], + + moduleNameMapper: {}, + + snapshotSerializers: [resolveMergeStylesSerializer()], +}); + +module.exports = config; diff --git a/packages/react-icons/just.config.ts b/packages/react-icons/just.config.ts new file mode 100644 index 00000000000000..8e468e33d56c6e --- /dev/null +++ b/packages/react-icons/just.config.ts @@ -0,0 +1,3 @@ +const { preset } = require('@uifabric/build'); + +preset(); diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json new file mode 100644 index 00000000000000..f7bc7e2e741840 --- /dev/null +++ b/packages/react-icons/package.json @@ -0,0 +1,60 @@ +{ + "name": "@fluentui/react-icons", + "version": "0.1.0", + "description": "React components for building web experiences.", + "private": true, + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "lib/index.d.ts", + "sideEffects": [ + "lib/version.js" + ], + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "start": "just-scripts dev:storybook", + "start-test": "just-scripts jest-watch", + "test": "just-scripts test", + "update-api": "just-scripts update-api", + "update-snapshots": "just-scripts jest -u" + }, + "devDependencies": { + "@types/enzyme": "3.10.3", + "@types/enzyme-adapter-react-16": "1.0.3", + "@types/es6-promise": "0.0.32", + "@types/jest": "~24.9.0", + "@types/react": "16.8.25", + "@types/react-dom": "16.8.4", + "@types/react-test-renderer": "^16.0.0", + "@types/webpack-env": "1.15.1", + "@uifabric/build": "^7.0.0", + "@uifabric/tslint-rules": "^7.1.2", + "enzyme": "~3.10.0", + "enzyme-adapter-react-16": "^1.15.0", + "es6-weak-map": "^2.0.2", + "react": "16.8.6", + "react-app-polyfill": "~1.0.1", + "react-dom": "16.8.6", + "react-test-renderer": "^16.3.0", + "typescript-plugin-css-modules": "^2.2.0" + }, + "dependencies": { + "@uifabric/set-version": "^7.0.9", + "@uifabric/styling": "^7.11.2", + "@uifabric/utilities": "^7.15.6", + "tslib": "^1.10.0" + }, + "peerDependencies": { + "@types/react-dom": ">=16.8.0 <17.0.0", + "react": ">=16.8.0 <17.0.0", + "react-dom": ">=16.8.0 <17.0.0" + } +} diff --git a/packages/react-icons/src/components/BorderBlindsIcon.tsx b/packages/react-icons/src/components/BorderBlindsIcon.tsx new file mode 100644 index 00000000000000..c3b5473d317a16 --- /dev/null +++ b/packages/react-icons/src/components/BorderBlindsIcon.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import createSvgIcon from '../utils/createSvgIcon'; + +const BorderBlindsIcon = createSvgIcon<{ color1?: string; color2?: string; color3?: string }>({ + svg: ({ classes, props }) => { + const { color1 = 'red', color2 = 'green', color3 = 'blue' } = props; + return ( + + + + + + + + ); + }, + displayName: 'BorderBlindsIcon', +}); + +export default BorderBlindsIcon; diff --git a/packages/react-icons/src/components/OneDriveIcon.tsx b/packages/react-icons/src/components/OneDriveIcon.tsx new file mode 100644 index 00000000000000..9bd55ff2b67430 --- /dev/null +++ b/packages/react-icons/src/components/OneDriveIcon.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import createSvgIcon from '../utils/createSvgIcon'; + +const OneDriveIcon = createSvgIcon({ + svg: ({ classes }) => ( + + + + + + ), + displayName: 'OneDriveIcon', +}); + +export default OneDriveIcon; diff --git a/packages/react-icons/src/components/YammerIcon.tsx b/packages/react-icons/src/components/YammerIcon.tsx new file mode 100644 index 00000000000000..50173811163455 --- /dev/null +++ b/packages/react-icons/src/components/YammerIcon.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import createSvgIcon from '../utils/createSvgIcon'; + +const YammerIcon = createSvgIcon({ + svg: ({ classes }) => ( + + + + + + ), + displayName: 'YammerIcon', +}); + +export default YammerIcon; diff --git a/packages/react-icons/src/index.ts b/packages/react-icons/src/index.ts new file mode 100644 index 00000000000000..b294b62acee15c --- /dev/null +++ b/packages/react-icons/src/index.ts @@ -0,0 +1,7 @@ +import './version'; + +export { default as createSvgIcon } from './utils/createSvgIcon'; + +export { default as OneDriveIcon } from './components/OneDriveIcon'; +export { default as YammerIcon } from './components/YammerIcon'; +export { default as BorderBlindsIcon } from './components/BorderBlindsIcon'; diff --git a/packages/react-icons/src/utils/SvgIcon.styles.ts b/packages/react-icons/src/utils/SvgIcon.styles.ts new file mode 100644 index 00000000000000..6676a9407ac26d --- /dev/null +++ b/packages/react-icons/src/utils/SvgIcon.styles.ts @@ -0,0 +1,25 @@ +import { ISvgIconStyles } from './SvgIcon.types'; +import { mergeStyleSets } from '@uifabric/styling'; + +export interface ISvgIconStyleProps { + className?: string; + styles?: Partial; +} + +/** Class names used in themeable and non-themeable Icon components */ +export const classes = mergeStyleSets({ + root: {}, + svg: { + height: '100%', + width: '100%', + }, +}); + +export const getStyles = (props: ISvgIconStyleProps): ISvgIconStyles => { + const { className, styles } = props; + + return { + root: [classes.root, className, styles && styles.root], + svg: [classes.svg], + }; +}; diff --git a/packages/react-icons/src/utils/SvgIcon.types.ts b/packages/react-icons/src/utils/SvgIcon.types.ts new file mode 100644 index 00000000000000..f83b56aa27441b --- /dev/null +++ b/packages/react-icons/src/utils/SvgIcon.types.ts @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { IStyle } from '@uifabric/styling'; + +export interface ISvgIconProps extends React.HTMLAttributes { + /** + * Custom class to style the icon. + */ + className?: string; +} + +export interface ISvgIconStyles { + root?: IStyle; + svg?: IStyle; +} diff --git a/packages/react-icons/src/utils/createSvgIcon.test.tsx b/packages/react-icons/src/utils/createSvgIcon.test.tsx new file mode 100644 index 00000000000000..e47bdb71a2d31b --- /dev/null +++ b/packages/react-icons/src/utils/createSvgIcon.test.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { mount } from 'enzyme'; +import { default as createSvgIcon } from './createSvgIcon'; + +const testSvg = () => ; + +describe('createSvgIcon', () => { + it('returns a valid React component', () => { + const TestIcon = createSvgIcon({ svg: testSvg, displayName: 'TestIcon' }); + expect(React.isValidElement()).toEqual(true); + }); + + it('sets displayName to the created Component', () => { + const TestIcon = createSvgIcon({ svg: testSvg, displayName: 'TestIcon' }); + expect(TestIcon.displayName).toEqual('TestIcon'); + }); + + it('spreads unhandled props on the root element', () => { + const TestIcon = createSvgIcon({ svg: testSvg, displayName: 'TestIcon' }); + + const wrapper = mount(); + expect(wrapper.find('span').props().id).toEqual('test-id'); + }); + + it('provides all props on the svg function', () => { + interface IBookProps { + foo: boolean; + } + + const BookIcon = createSvgIcon({ + svg: ({ props }) => , + displayName: 'BookIcon', + }); + + const wrapper = mount(); + + expect(wrapper.find('svg').prop('data-foo')).toEqual('true'); + }); +}); diff --git a/packages/react-icons/src/utils/createSvgIcon.ts b/packages/react-icons/src/utils/createSvgIcon.ts new file mode 100644 index 00000000000000..9c1d676d28cabb --- /dev/null +++ b/packages/react-icons/src/utils/createSvgIcon.ts @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { css, getNativeProps, htmlElementProperties } from '@uifabric/utilities'; +import { classes } from './SvgIcon.styles'; +import { ISvgIconProps } from './SvgIcon.types'; +import { SvgIconCreateFnParams } from './types'; + +const createSvgIcon = ({ svg, displayName }: SvgIconCreateFnParams) => { + const Component: React.FC & TProps & ISvgIconProps> = props => { + const { className, style = {} } = props; + + const nativeProps = getNativeProps>(props, htmlElementProperties); + const containerProps = props['aria-label'] + ? {} + : { + role: 'presentation', + ['aria-hidden']: true, + }; + + return React.createElement( + 'span', + { + ...containerProps, + ...nativeProps, + className: css(classes.root, className), + style, + }, + svg({ classes, props }), + ); + }; + + Component.displayName = displayName; + + return Component; +}; + +export default createSvgIcon; diff --git a/packages/react-icons/src/utils/types.ts b/packages/react-icons/src/utils/types.ts new file mode 100644 index 00000000000000..817b1aa7a3f8f3 --- /dev/null +++ b/packages/react-icons/src/utils/types.ts @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { ISvgIconProps } from './SvgIcon.types'; + +export type SvgIconFuncArg = { + classes: { [iconSlot: string]: string }; // renamed from classes + // rtl: boolean; // how do we support this? + props: TProps; +}; + +export type SvgIconChildrenFn = (svgIcon: SvgIconFuncArg) => React.ReactNode; + +export type SvgIconCreateFnParams = { + svg: SvgIconChildrenFn; + displayName: string; + // handledProps?: (keyof TProps)[]; +}; + +export type SvgIconFuncWithRootArg = { + classes: { [iconSlot: string]: string }; // renamed from classes + // rtl: boolean; // how do we support this? + props: TProps; + processedRootProps: React.HTMLAttributes; +}; + +export type SvgIconChildrenFnWithRoot = ( + svgIcon: SvgIconFuncWithRootArg, +) => React.ReactElement; + +export type SvgIconCreateFnWithRootParams = { + children: SvgIconChildrenFnWithRoot; + displayName: string; + // handledProps?: (keyof TProps)[]; +}; diff --git a/packages/react-icons/src/version.ts b/packages/react-icons/src/version.ts new file mode 100644 index 00000000000000..9a93a2553b7418 --- /dev/null +++ b/packages/react-icons/src/version.ts @@ -0,0 +1,4 @@ +// @fluentui/react-icons@0.1.0 +// Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only. +import { setVersion } from '@uifabric/set-version'; +setVersion('@fluentui/react-icons', '0.1.0'); diff --git a/packages/react-icons/tsconfig.json b/packages/react-icons/tsconfig.json new file mode 100644 index 00000000000000..ffd31380801bcf --- /dev/null +++ b/packages/react-icons/tsconfig.json @@ -0,0 +1,38 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "outDir": "dist", + "target": "es5", + "module": "commonjs", + "jsx": "react", + "declaration": true, + "sourceMap": true, + "experimentalDecorators": true, + "importHelpers": true, + "noUnusedLocals": true, + "forceConsistentCasingInFileNames": true, + "strictNullChecks": true, + "noImplicitAny": true, + "moduleResolution": "node", + "preserveConstEnums": true, + "lib": ["es5", "dom"], + "types": ["jest", "webpack-env"], + "paths": { + "@fluentui/react-icons/lib/*": ["./src/*"], + "@fluentui/react-icons": ["./src"] + }, + "plugins": [ + { + "name": "typescript-plugin-css-modules", + "options": { + "classnameTransform": "asIs", + "customMatcher": "\\.scss$", + "dotenvOptions": {}, + "postCssOptions": {}, + "rendererOptions": {} + } + } + ] + }, + "include": ["src"] +} diff --git a/packages/react-icons/tslint.json b/packages/react-icons/tslint.json new file mode 100644 index 00000000000000..06e306229f8738 --- /dev/null +++ b/packages/react-icons/tslint.json @@ -0,0 +1,4 @@ +{ + "extends": ["@uifabric/tslint-rules"], + "rules": {} +}