Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added package for react-native SVG icons #529

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

ValentinaKozlova
Copy link

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

@@ -132,12 +132,16 @@ function processFolder(srcPath, destPath, resizable) {
var iconContent = fs.readFileSync(srcFile, { encoding: "utf8" })

var jsxCode = resizable ? svgr.default.sync(iconContent, svgrOpts, { filePath: file }) : svgr.default.sync(iconContent, svgrOptsSizedIcons, { filePath: file })
var rnRegex = new RegExp('(<(|\/))(svg|path|rect|g)', 'g')
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As majority of our icons contains only those tags I decided to use regex to change casing

@ValentinaKozlova ValentinaKozlova marked this pull request as ready for review December 23, 2022 10:11
@@ -69,9 +69,9 @@ function processFiles(src, dest) {
// Finally add the interface definition and then write out the index.
indexContents.push('export { FluentReactNativeIconsProps } from \'./utils/FluentReactNativeIconsProps.types\'');
indexContents.push('export { default as wrapIcon } from \'./utils/wrapIcon\'');
indexContents.push('export { default as bundleIcon } from \'./utils/bundleIcon\'');
//indexContents.push('export { default as bundleIcon } from \'./utils/bundleIcon\'');

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these commented lines be removed?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not for now. Maybe I'll need it later. If not, I'll remove it

@rurikoaraki
Copy link

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

rurikoaraki
rurikoaraki previously approved these changes Jan 10, 2023
@ValentinaKozlova
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants