Add react-native-svg-transformer to iOS and macOS (#695)
* Add react-native-svg-transformer to iOS and macOS * Remove SVG icons from Windows test page * Change files
This commit is contained in:
Родитель
3aa5c6b7f9
Коммит
1700c9e4c3
|
@ -4,7 +4,7 @@ import { Stack } from '@fluentui-react-native/stack';
|
|||
import * as React from 'react';
|
||||
import { Platform, View } from 'react-native';
|
||||
import { stackStyle } from '../Common/styles';
|
||||
import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
|
||||
import { SvgIconProps } from '@fluentui-react-native/icon';
|
||||
import TestSvg from './test.svg';
|
||||
|
||||
const CustomizedIconButton = Button.customize({
|
||||
|
@ -13,48 +13,35 @@ const CustomizedIconButton = Button.customize({
|
|||
});
|
||||
|
||||
export const ButtonIconTest: React.FunctionComponent<{}> = () => {
|
||||
if (Platform.OS == ('win32' as any)) {
|
||||
const testImage = require('./icon_24x24.png');
|
||||
const testTtf = require('./Font Awesome 5 Free-Solid-900.otf');
|
||||
|
||||
const fontProps: FontIconProps = {
|
||||
fontFamily: `Font Awesome 5 Free`,
|
||||
fontSrcFile: testTtf,
|
||||
codepoint: 0xf083,
|
||||
fontSize: 16,
|
||||
};
|
||||
|
||||
const svgProps: SvgIconProps = {
|
||||
src: TestSvg,
|
||||
viewBox: '0 0 500 500',
|
||||
};
|
||||
|
||||
// SVG-based icons are not available on all platforms yet
|
||||
const svgIconsEnabled = ['ios', 'macos', 'win32'].includes(Platform.OS as string);
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Stack style={stackStyle}>
|
||||
<Button icon={testImage} content="Button with png Icon" tooltip="button tooltip" />
|
||||
<Button icon={{ fontSource: fontProps, color: 'blue' }} content="Button with font Icon" tooltip="button tooltip" />
|
||||
{svgIconsEnabled ? (
|
||||
<Button
|
||||
icon={{ svgSource: svgProps, width: 20, height: 20, color: 'red' }}
|
||||
content="Button with svg Icon"
|
||||
tooltip="button tooltip"
|
||||
/>
|
||||
) : null}
|
||||
{svgIconsEnabled ? (
|
||||
<CustomizedIconButton
|
||||
icon={{ svgSource: svgProps, width: 20, height: 20 }}
|
||||
content="Button with Customized Icon"
|
||||
tooltip="button tooltip"
|
||||
/>
|
||||
) : null}
|
||||
</Stack>
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<View>
|
||||
<Stack style={stackStyle}>
|
||||
<Button icon={require('./icon_24x24.png')} content="Button with Icon" tooltip="button tooltip" />
|
||||
<CustomizedIconButton icon={require('./icon_24x24.png')} content="Button with Customized Icon" tooltip="button tooltip" />
|
||||
</Stack>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -71,11 +71,7 @@ const icons: React.FunctionComponent<{}> = () => {
|
|||
{showSvgIcons ? (
|
||||
<View>
|
||||
<Text>SVG icons</Text>
|
||||
{
|
||||
// TODO: Enable on macOS and iOS once we get react-native-svg-transformer working properly
|
||||
// See https://github.com/microsoft/fluentui-react-native/issues/644
|
||||
(Platform.OS == 'ios' || Platform.OS == 'macos') ? null : <Icon svgSource={svgProps} width={100} height={100} color="orange" />
|
||||
}
|
||||
<Icon svgSource={svgProps} width={100} height={100} color="orange" />
|
||||
{
|
||||
// TODO: Causes TypeError: Network request failed on Android
|
||||
Platform.OS == 'android' ? null : <Icon svgSource={svgD20DataUriProps} width={100} height={100} color="#7a7" />
|
||||
|
|
|
@ -5,11 +5,21 @@
|
|||
* @format
|
||||
*/
|
||||
|
||||
const {getWatchFolders} = require('@uifabricshared/build-native');
|
||||
const { getWatchFolders } = require('@uifabricshared/build-native');
|
||||
const { getDefaultConfig } = require('metro-config');
|
||||
|
||||
module.exports = {
|
||||
module.exports = (async () => {
|
||||
const {
|
||||
resolver: { sourceExts, assetExts },
|
||||
} = await getDefaultConfig();
|
||||
return {
|
||||
watchFolders: getWatchFolders(),
|
||||
resolver: {
|
||||
assetExts: assetExts.filter((ext) => ext !== 'svg'),
|
||||
sourceExts: [...sourceExts, 'svg'],
|
||||
},
|
||||
transformer: {
|
||||
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
||||
getTransformOptions: async () => ({
|
||||
transform: {
|
||||
experimentalImportSupport: false,
|
||||
|
@ -17,4 +27,5 @@ module.exports = {
|
|||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
};
|
||||
})();
|
||||
|
|
|
@ -34,7 +34,9 @@
|
|||
"@uifabricshared/eslint-config-rules": "^0.1.1",
|
||||
"babel-jest": "^24.9.0",
|
||||
"jest": "^24.9.0",
|
||||
"metro-config": "^0.58.0",
|
||||
"metro-react-native-babel-preset": "^0.59.0",
|
||||
"react-native-svg-transformer": "^0.14.3",
|
||||
"react-test-renderer": "~16.13.1"
|
||||
},
|
||||
"jest": {
|
||||
|
|
|
@ -5,13 +5,20 @@
|
|||
|
||||
const path = require('path');
|
||||
const blacklist = require('metro-config/src/defaults/blacklist');
|
||||
const {getWatchFolders} = require('@uifabricshared/build-native');
|
||||
const { getWatchFolders } = require('@uifabricshared/build-native');
|
||||
const { getDefaultConfig } = require('metro-config');
|
||||
|
||||
const rnmPath = path.dirname(require.resolve('react-native-macos/package.json'));
|
||||
|
||||
module.exports = {
|
||||
module.exports = (async () => {
|
||||
const {
|
||||
resolver: { sourceExts, assetExts },
|
||||
} = await getDefaultConfig();
|
||||
return {
|
||||
watchFolders: getWatchFolders(),
|
||||
resolver: {
|
||||
assetExts: assetExts.filter((ext) => ext !== 'svg'),
|
||||
sourceExts: [...sourceExts, 'svg'],
|
||||
extraNodeModules: {
|
||||
'react-native': rnmPath,
|
||||
},
|
||||
|
@ -19,6 +26,7 @@ module.exports = {
|
|||
blacklistRE: blacklist([/node_modules\/react-native\/.*/]),
|
||||
},
|
||||
transformer: {
|
||||
babelTransformerPath: require.resolve('react-native-svg-transformer'),
|
||||
getTransformOptions: async () => ({
|
||||
transform: {
|
||||
experimentalImportSupport: false,
|
||||
|
@ -26,4 +34,5 @@ module.exports = {
|
|||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
};
|
||||
})();
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
"metro-config": "^0.58.0",
|
||||
"metro-react-native-babel-preset": "^0.59.0",
|
||||
"react-native": "^0.63.4",
|
||||
"react-native-svg-transformer": "^0.14.3",
|
||||
"react-test-renderer": "~16.13.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "patch",
|
||||
"comment": "Add react-native-svg-transformer to iOS and macOS",
|
||||
"packageName": "@fluentui-react-native/tester",
|
||||
"email": "adam.gleitman@gmail.com",
|
||||
"dependentChangeType": "patch",
|
||||
"date": "2021-05-20T01:05:38.730Z"
|
||||
}
|
Загрузка…
Ссылка в новой задаче