feat: generate react-native icon components that use react-native-svg

README.md

@@ -28,6 +28,22 @@ yarn add @lifeomic/chromicons
 import { Apple } from '@lifeomic/chromicons';
 ```
 
+**With React-Native (react-native-svg)**
+
+1. Install Dependencies
+
+```bash
+yarn add @lifeomic/chromicons react-native-svg
+```
+
+2. Import the Icon Components
+
+```jsx
+import { Apple } from '@lifeomic/chromicons/src/lined/react-native';
+
+<Apple stroke="red" />;
+```
+
 ### Web App 💻
 
 You can view and copy all of the SVGs to your clipboard via the [web app](https://lifeomic.github.io/chromicons.com/). It also provides a link to download all raw SVGs.

package.json

@@ -21,9 +21,10 @@
     "analyze": "size-limit --why",
     "build": "tsdx build",
     "clean": "rm -rf src/lined && rm -rf dist/",
-    "generate:build-output": "yarn generate:react-components && yarn generate:index-file",
+    "generate:build-output": "yarn generate:react-components && yarn generate:react-native-components && yarn generate:index-file",
     "generate:index-file": "echo \"export * from './lined'\" > src/index.tsx",
     "generate:react-components": "svgr --template svg-template.js src/raw/lined --out-dir src/lined --typescript",
+    "generate:react-native-components": "svgr --template svg-rn-template.js src/raw/lined --out-dir src/lined/react-native --typescript --native",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -46,7 +47,13 @@
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-native-svg": "12.x"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
   },
   "prettier": {
     "printWidth": 80,

svg-rn-template.js

@@ -0,0 +1,32 @@
+/**
+ * This template allows us to modify the generated React Native component template.
+ */
+
+function template(
+  { template },
+  _,
+  { imports, componentName, props, jsx, exports }
+) {
+  jsx.openingElement.attributes = [
+    ...jsx.openingElement.attributes,
+    {
+      type: 'JSXAttribute',
+      name: { type: 'JSXIdentifier', name: 'viewBox' },
+      value: { type: 'StringLiteral', value: '0 0 24 24' },
+    },
+    // For our generated React components, we think this makes sense
+    // to do by default: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute
+    {
+      type: 'JSXAttribute',
+      name: { type: 'JSXIdentifier', name: 'importantForAccessibility' },
+      value: { type: 'StringLiteral', value: 'no-hide-descendants' },
+    },
+  ];
+  return template.ast`
+    ${imports}
+    const ${componentName} = (${props}) => ${jsx}
+    ${exports}
+  `;
+}
+
+module.exports = template;