Build, document and release lucide-react-native package (lucide-icons…

…#744)

.github/workflows/release.yml

@@ -102,6 +102,44 @@ jobs:
           name: lucide-react-package-json
           path: packages/lucide-react/package.json
 
+  lucide-react-native:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+          cache-dependency-path: 'yarn.lock'
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+
+      - name: Set package.json version lucide
+        run: yarn workspace lucide-react-native version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: yarn workspace lucide-react-native build
+
+      - name: Test
+        run: yarn workspace lucide-react-native test
+
+      - name: Publish
+        run: yarn workspace lucide-react-native publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-react-native-package-json
+          path: packages/lucide-react-native/package.json
+
   lucide-vue:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest

README.md

@@ -29,6 +29,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
 * [Usage](#usage)
   * [Web](#web)
   * [React](#react)
+  * [React Native](#react-native)
   * [Vue 2](#vue-2)
   * [Vue 3](#vue-3)
   * [Angular](#angular)
@@ -76,6 +77,20 @@ npm install lucide-react
 
 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react).
 
+### React Native
+
+Implementation of the lucide icon library for React Native applications.
+
+```sh
+yarn add lucide-react-native
+
+# or
+
+npm install lucide-react-native
+```
+
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react-native#lucide-react-native).
+
 ### Vue 2
 
 Implementation of the lucide icon library for vue applications.

docs/index.md

@@ -17,7 +17,7 @@ When designing new icons, the community is working with a set of design rules. T
 
 Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
 
-Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
+Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
 
 Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
 

docs/packages/lucide-react-native.md

@@ -0,0 +1,75 @@
+# Lucide React Native
+
+Implementation of the lucide icon library for React Native applications
+
+## Installation
+
+First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
+
+```bash
+yarn add lucide-react-native
+
+# or
+
+npm install lucide-react-native
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a react component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+```js
+import { Camera } from 'lucide-react-native';
+// Returns ReactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48} />;
+};
+
+export default App;
+```
+
+### Props
+
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+```js
+// Usage
+const App = () => {
+  return <Camera fill="red" />;
+};
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+```js
+import * as icons from 'lucide-react';
+
+const Icon = ({ name, color, size }) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />;
+};
+
+export default Icon;
+```

package.json

@@ -22,11 +22,12 @@
     ]
   },
   "scripts": {
-    "build": "yarn lucide build && yarn lucide-react build && yarn lucide-preact build && yarn lucide-vue build && yarn lucide-vue-next build && yarn lucide-angular build",
+    "build": "yarn lucide build && yarn lucide-react build && yarn lucide-react-native build && yarn lucide-preact build && yarn lucide-vue build && yarn lucide-vue-next build && yarn lucide-angular build",
     "test": "yarn lucide build:icons && yarn lucide-react build:icons && yarn lucide-vue build:icons && jest",
     "lucide": "yarn workspace lucide",
     "lucide-angular": "yarn workspace lucide-angular",
     "lucide-react": "yarn workspace lucide-react",
+    "lucide-react-native": "yarn workspace lucide-react-native",
     "lucide-preact": "yarn workspace lucide-preact",
     "lucide-vue": "yarn workspace lucide-vue",
     "lucide-vue-next": "yarn workspace lucide-vue-next",

packages/lucide-react-native/README.md

@@ -1,6 +1,6 @@
 # Lucide React Native
 
-Implementation of the lucide icon library for react applications.
+Implementation of the lucide icon library for React Native applications.
 
 > What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).