microsoft / fluentui-system-icons

Fluent System Icons are a collection of familiar, friendly and modern icons from Microsoft.
https://aka.ms/fluentui-system-icons
MIT License
5.89k stars 518 forks source link

Added package for react-native SVG icons #529

Open ValentinaKozlova opened 1 year ago

ValentinaKozlova commented 1 year ago

Added package for generation of react-native SVG icons. 1st commit contains copy of react-icons code because majority of it can be reused. For better readability in other commits I added react-native-specific code. This PR is for getting early feedback. Maybe it would be good to put duplicated code in sort of react-common folder.

Issues with current package:

  1. Fails while running npm run build:cjs
  2. Icon is generated with size in rm which is not suitable for RN

Things to do:

  1. Fix issues
  2. Add font icons support
  3. Move duplicated code to a separate folder

Verification: Icon generated code looks like this:

import * as React from "react";
import { FluentReactNativeIconsProps } from "../utils/FluentReactNativeIconsProps.types";
import wrapIcon from "../utils/wrapIcon";
import { Path, Svg, Rect, G } from 'react-native-svg';

const AccessTimeFilledIcon = (props: FluentReactNativeIconsProps) => {
  const { fill: primaryFill = 'currentColor', style } = props;
  return <Svg {...props} width="1em" height="1em" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}><Path d="M...7Z" fill={primaryFill} /></Svg>;
}
export const AccessTimeFilled = /*#__PURE__*/wrapIcon(/*#__PURE__*/AccessTimeFilledIcon, 'AccessTimeFilled');

In RN tester: image

rurikoaraki commented 1 year ago

Should a "Build React Native library" CI step be added?

ValentinaKozlova commented 1 year ago

Should a "Build React Native library" CI step be added?

Yes, but I thought to add it separately. Next steps can be to move duplicate code to a separate folder, check the generated icons and then build it for RN