feat: implement variable support

.github/actions/setup/action.yml

@@ -15,13 +15,13 @@ runs:
       with:
         path: |
           **/node_modules
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          .yarn/install-state.gz
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
         restore-keys: |
+          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
           ${{ runner.os }}-yarn-
 
     - name: Install dependencies
       if: steps.yarn-cache.outputs.cache-hit != 'true'
-      run: |
-        yarn install --cwd example --frozen-lockfile
-        yarn install --frozen-lockfile
+      run: yarn install --immutable
       shell: bash

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Run unit tests
         run: yarn test --maxWorkers=2 --coverage
 
-  build:
+  build-library:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -45,4 +45,20 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Build package
-        run: yarn prepack
+        run: yarn prepare
+
+  build-web:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build package
+        run: yarn prepare
+
+      - name: Build example for Web
+        run: |
+          yarn example expo export:web

.gitignore

@@ -60,6 +60,14 @@ buck-out/
 android/app/libs
 android/keystores/debug.keystore
 
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Expo
 .expo/
 
@@ -68,4 +76,5 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
-.yarn/
+dist/
+web-build/

.nvmrc

@@ -1 +1 @@
-20.11.1
+v18

.yarnrc.yml

@@ -1 +1,10 @@
 nodeLinker: node-modules
+nmHoistingLimits: workspaces
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Oktay Şenkan
+Copyright (c) 2024 Oktay Şenkan
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

README.md

@@ -30,7 +30,19 @@ or
 npx expo install react-native-svg
 ```
 
-add plugin to (babel.config.js)
+Add comment line to entryfile of your project (App.js or App.tsx or main.tsx or \_layout.tsx)
+
+```tsx
+// @@iconify-code-gen
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+Add plugin to (babel.config.js)
 
 ```js
 module.exports = {
@@ -40,17 +52,98 @@ module.exports = {
   plugins: [
     ...
     'react-native-iconify/plugin',
+    {
+      icons: [
+        'mdi:heart',
+        'mdi:home',
+        'mdi:account',
+        // other icons
+      ],
+    },
   ],
 };
 ```
 
+Add plugin to vite.config for Vite
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          [
+            'react-native-iconify/babel',
+            {
+              icons: [
+                'mdi:heart',
+                'mdi:home',
+                'mdi:account',
+                // other icons
+              ],
+            },
+          ],
+        ],
+      },
+    }),
+  ],
+});
+```
+
+Add plugin to next.config.mjs for Next
+
+Warning: You can not use "next/font" with babel
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(js|jsx|ts|tsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['next/babel'],
+          plugins: [
+            [
+              'react-native-iconify/babel',
+              {
+                icons: [
+                  'mdi:heart',
+                  'mdi:home',
+                  'mdi:account',
+                  // other icons
+                ],
+              },
+            ],
+          ],
+        },
+      },
+    });
+
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
 ## Usage
 
 Using the react-native-iconify library is straightforward. First, you need to call the Iconify component and provide the icon name using the icon prop:
 
 ```js
 import React from 'react';
 import { Iconify } from 'react-native-iconify';
+// or
+import { Iconify } from 'react-native-iconify/native';
+
+// for web (not react-native-web)
+import { Iconify } from 'react-native-iconify/web';
 
 const ExampleScreen = () => {
   return <Iconify icon="mdi:heart" size={24} color="#900" />;
@@ -73,23 +166,6 @@ Tested on empty expo managed app
 
 ## Troubleshooting
 
-### Iconify: 'icon' prop must be a string literal
-
-Adding more than 150,000 icons to the application would increase the size and loading time of the application. Therefore, the React Native Iconify Babel plugin loads only the necessary icons, allowing the application to contain only the icons that are needed so you cannot use variable.
-
-Here is an example of the **incorrect** usage:
-
-```js
-const icon = 'mdi:heart';
-<Iconify icon={icon} size={24} color="red" />;
-```
-
-To fix this issue, use like this:
-
-```js
-<Iconify icon="mdi:heart" size={24} color="red" />
-```
-
 ### Iconify: You need to install a Babel plugin before using this library. You can continue by adding the following to your babel.config.js
 
 If you're using a library that requires the "react-native-iconify/plugin" Babel plugin but you forgot to install it, you may encounter errors. Here's how to troubleshoot and fix the issue:
@@ -104,6 +180,14 @@ module.exports = {
   plugins: [
     ...
     'react-native-iconify/plugin',
+    {
+      icons: [
+        'mdi:heart',
+        'mdi:home',
+        'mdi:account',
+        // other icons
+      ],
+    },
   ],
 };
 ```

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
 };

example/app.json

@@ -11,9 +11,6 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
     "ios": {
       "supportsTablet": true
     },

example/babel.config.js

@@ -17,7 +17,28 @@ module.exports = function (api) {
           },
         },
       ],
-      path.join(__dirname, '..', 'plugin'),
+      [
+        path.join(__dirname, '..', 'dist', 'babel'),
+        {
+          icons: [
+            'mdi:home',
+            'mdi:account-circle',
+            'mdi:account',
+            'mdi:account-group',
+            'mdi:ab-testing',
+            'mdi:abacus',
+            'mdi:abjad-arabic',
+            'mdi:abjad-hebrew',
+            'mdi:abugida-devanagari',
+            'mdi:abugida-thai',
+            'mdi:access-point',
+            'mdi:access-point-check',
+            'mdi:access-point-minus',
+            'mdi:access-point-network',
+            'feather:activity',
+          ],
+        },
+      ],
     ],
   };
 };

example/metro.config.js

@@ -5,14 +5,17 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
-
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
+const modules = Object.keys({ ...pak.peerDependencies });
 
 const defaultConfig = getDefaultConfig(__dirname);
 
-module.exports = {
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
   ...defaultConfig,
 
   projectRoot: __dirname,
@@ -36,3 +39,5 @@ module.exports = {
     }, {}),
   },
 };
+
+module.exports = config;

example/package.json

@@ -1,29 +1,28 @@
 {
-  "name": "example",
+  "name": "react-native-iconify-example",
   "version": "1.0.0",
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"
   },
   "dependencies": {
-    "@expo/metro-runtime": "~3.1.3",
-    "@shopify/flash-list": "1.6.3",
-    "expo": "^50.0.14",
-    "expo-status-bar": "~1.11.1",
+    "expo": "~51.0.13",
+    "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-svg": "14.1.0",
-    "react-native-web": "~0.19.6"
+    "react-native": "0.74.2",
+    "react-native-svg": "15.2.0",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "~19.0.1",
+    "@expo/webpack-config": "^18.0.1",
     "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^4.1.0"
+    "babel-plugin-module-resolver": "^5.0.0",
+    "expo-atlas": "^0.3.0"
   },
   "private": true
 }